Mohamed Abdallah Mohamed Abdallah - 3 months ago 9
CSS Question

What is the manifest.json file?

I'm learning HTML and CSS and I faced a problem with the background in css .. the browser don't load the background picture . I searched about this and I found that I should declare assets as web_accessible_resources in the manifest file ,
I don't know what is the manifest file and web_accessible_resources although I searched about this but I don't understand
so, please I want to understand what is the manifest.json file and how to declare web_accessible_resources in this file ?

Answer

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.