Skip to content

Chrome Extension Manifest Configuration

The Manifest Configuration is the central configuration file for a Chrome Extension, named manifest.json.^[600-developer-frontend-google-chrome-plugin-develop.md] This file defines essential metadata, such as the plugin's name, description, version, and icons^[600-developer-frontend-google-chrome-plugin-develop.md]. It also controls the extension's capabilities and structure by declaring the required API permissions, the entry point for the user interface, and the content scripts injected into web pages^[600-developer-frontend-google-chrome-plugin-develop.md].

File Structure

The extension typically consists of the manifest file alongside resources like HTML, CSS, and JavaScript^[600-developer-frontend-google-chrome-plugin-develop.md]. A standard structure includes:

  • manifest.json: The main configuration file^[600-developer-frontend-google-chrome-plugin-develop.md].
  • popup.html: The HTML page for the extension's popup interface^[600-developer-frontend-google-chrome-plugin-develop.md].
  • icon.png: Icons used for the browser action and toolbar^[600-developer-frontend-google-chrome-plugin-develop.md].
  • Scripts (e.g., popup.js): Logic handling the popup interface^[600-developer-frontend-google-chrome-plugin-develop.md].
  • Libraries (e.g., jquery.js): External libraries to be included^[600-developer-frontend-google-chrome-plugin-develop.md].

Configuration Keys

The manifest file utilizes specific JSON keys to configure the extension's behavior^[600-developer-frontend-google-chrome-plugin-develop.md]:

Core Metadata

  • manifest_version: Specifies the version of the manifest file format (e.g., 2)^[600-developer-frontend-google-chrome-plugin-develop.md].
  • name: The display name of the extension^[600-developer-frontend-google-chrome-plugin-develop.md].
  • description: A brief 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].

Interface Icons

  • icons: Defines the image files for the extension. It typically supports sizes like 16, 48, and 128 pixels^[600-developer-frontend-google-chrome-plugin-develop.md].

Browser Action

  • browser_action: Configures the extension's icon in the Chrome toolbar^[600-developer-frontend-google-chrome-plugin-develop.md].
    • 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

  • permissions: An array of strings declaring which Chrome APIs or host permissions the extension needs^[600-developer-frontend-google-chrome-plugin-develop.md]. For example, "activeTab" allows the extension to access the currently active tab^[600-developer-frontend-google-chrome-plugin-develop.md].

Content Scripts

  • content_scripts: Defines scripts that are injected into web pages matching specific URL patterns^[600-developer-frontend-google-chrome-plugin-develop.md].
    • matches: An array of URL patterns (e.g., ["http://*/*", "https://*/*"]) specifying which pages the scripts should run on^[600-developer-frontend-google-chrome-plugin-develop.md].
    • js: An array of file paths to JavaScript files (e.g., jQuery) to be injected into the matched pages^[600-developer-frontend-google-chrome-plugin-develop.md].

Sources

^[600-developer-frontend-google-chrome-plugin-develop.md]