Skip to content

Chrome Extension manifest.json configuration

The manifest.json file acts as the configuration blueprint for a Chrome Extension^[600-developer__frontend__google__chrome-plugin-develop.md]. It is a required file that defines essential metadata, such as the extension's name, version, and permissions^[600-developer__frontend__google__chrome-plugin-develop.md].

File Structure

The manifest.json file resides in the root directory of the extension project^[600-developer__frontend__google__chrome-plugin-develop.md]. It typically coexists with assets like HTML, CSS, JavaScript, and icon files^[600-developer__frontend__google__chrome-plugin-develop.md].

Configuration Fields

Basic Metadata

The root level of the JSON object describes the extension's identity^[600-developer__frontend__google__chrome-plugin-develop.md]: * manifest_version: Specifies the version of the manifest file format (e.g., 2)^[600-developer__frontend__google__chrome-plugin-develop.md]. * name: The official name of the extension^[600-developer__frontend__google__chrome-plugin-develop.md]. * description: A brief text description of the extension's functionality^[600-developer__frontend__google__chrome-plugin-develop.md]. * version: The version string of the extension software^[600-developer__frontend__google__chrome-plugin-develop.md].

Icons

The icons object maps specific icon sizes to image file paths^[600-developer__frontend__google__chrome-plugin-develop.md]. Common sizes include 16, 48, and 128 pixels^[600-developer__frontend__google-plugin-develop.md:26-29].

Browser Action

The browser_action key configures the extension's behavior within the Chrome toolbar^[600-developer__frontend__google__chrome-plugin-develop.md]. It typically includes: * default_icon: The icon displayed in the toolbar^[600-developer__frontend__google__chrome-plugin-develop.md]. * default_popup: The HTML file (e.g., popup.html) that opens when the user clicks the icon^[600-developer__frontend__google__chrome-plugin-develop.md].

Permissions

The permissions array declares which Chrome APIs or website access the extension requires^[600-developer__frontend__google__chrome-plugin-develop.md]. A common permission is activeTab, which allows the extension to access the currently active tab^[600-developer__frontend__google__chrome-plugin-develop.md].

Content Scripts

The content_scripts property defines scripts that run in the context of web pages matching specific URL patterns^[600-developer__frontend__google__chrome-plugin-develop.md]. It accepts an array of objects containing: * matches: An array of URL patterns (e.g., http://*/*, https://*/*) determining where the script loads^[600-developer__frontend__google__chrome-plugin-develop.md]. * js: An array of JavaScript files to be injected into the matching pages^[600-developer__frontend__google__chrome-plugin-develop.md].

Example

{
  "manifest_version": 2,
  "name": "Extension Name",
  "description": "Description",
  "version": "1.0.0",
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["jquery.1.8.3.min.js"]
  }]
}
^[600-developer__frontend__google__chrome-plugin-develop.md]

  • [[Content Scripts]]
  • [[Chrome Extension Popup]]
  • [[ActiveTab Permission]]

Sources

  • 600-developer__frontend__google__chrome-plugin-develop.md