Google Chrome Extension manifest.json file

Question

I'm developing a Google Chrome Extension and facing a challenge with the background; the browser doesn't load the background picture added in CSS.

I can't seem to find an effective way to declare assets under the web_accessible_resources key in the manifest.json file.

What is the manifest.json file and how does one declare assets in it?

Answer 1

A manifest.json file is required for any Chrome extension. The manifest.json file contains information that defines the extension. The format of the information in the file is JSON.

You can read more about what it contains in Google Chrome developer documentation: Manifest File Format

You will probably also want to read: Overview of Google Chrome Extensions

A relatively simple manifest.json file looks like (source: Getting Started: Building a Chrome Extension):

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Manifest - Web Accessible Resources:

This is an array of strings assigned to the key web_accessible_resources within your manifest.json file which specifies the assets within your extension that are to be made accessible by webpages. The file/path within manifest.json is relative to your extension's root directory. The webpage can access the resource from a URL that looks like: chrome-extension://[PACKAGE ID]/[PATH].

Example (source:Manifest - Web Accessible Resources):

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

For more information on web_accessible_resources see Google Chrome developer documentation: Manifest - Web Accessible Resources.