Skip to content

Chrome Extension file structure

A Chrome Extension is fundamentally a web application composed of standard web technologies: HTML, CSS, and JavaScript^[600-developer__frontend__google__chrome-plugin-develop.md]。

The structure is centered around a configuration file and typically includes interface pages for interaction and scripts for execution on web pages^[600-developer__frontend__google__chrome-plugin-develop.md]。

Core Files

manifest.json

The manifest.json file is the primary configuration file for the plugin^[600-developer__frontend__google__chrome-plugin-develop.md]。It defines essential metadata and settings, including: * Manifest Version: The version of the manifest file format (e.g., "manifest_version": 2)^[600-developer__frontend__google__chrome-plugin-develop.md]。 * Metadata: The plugin's name, description, and version number^[600-developer__frontend__google__chrome-plugin-develop.md]。 * Icons: Image files for the extension icon in various sizes (e.g., 16x16, 48x48, 128x128)^[600-developer__frontend__google__chrome-plugin-develop.md]。 * Browser Action: Settings for the extension's UI in the Chrome toolbar, such as the default icon and the HTML page to display as a popup^[600-developer__frontend__google__chrome-plugin-develop.md]。 * Permissions: API permissions required, such as "activeTab", which grants the extension access to the current tab^[600-developer__frontend__google__chrome-plugin-develop.md]。

Interface Pages

Extensions often include HTML files to define the user interface^[600-developer__frontend__google__chrome-plugin-develop.md]。 * popup.html: A common file named popup.html is specified in the manifest to serve as the dialog that appears when the user clicks the extension's icon^[600-developer__frontend__google__chrome-plugin-develop.md]。 * These HTML pages can load external resources like CSS for styling and JavaScript for logic^[600-developer__frontend__google__chrome-plugin-develop.md]。

Script Contexts

A key aspect of the file structure is the separation between scripts that run in the extension's popup interface and scripts that run on the actual web pages the user visits^[600-developer__frontend__google__chrome-plugin-develop.md]。

Content Scripts

Scripts defined in the manifest.json under the content_scripts key are injected into the matching web pages^[600-developer__frontend__google__chrome-plugin-develop.md]。 * Matches: The matches property determines which URLs the scripts run on (e.g., http://*/*, https://*/*)^[600-developer__frontend__google__chrome-plugin-develop.md]。 * External Libraries: The js array can import external libraries (like jQuery) to be available on the target page^[600-developer__frontend__google__chrome-plugin-develop.md]。

Background / Popup Scripts

Script files such as popup.js handle the logic within the extension's interface^[600-developer__frontend__google__chrome-plugin-develop.md]。 * These scripts use specific Chrome APIs (like chrome.tabs.executeScript) to interact with or send code to the active browser tabs^[600-developer__frontend__google__chrome-plugin-develop.md]。 * This logic is distinct from content scripts, as it operates in the extension's context but triggers actions on the page^[600-developer__frontend__google__chrome-plugin-develop.md]。

示例結構

A typical directory layout for an extension might look like this^[600-developer__frontend__google__chrome-plugin-develop.md]：

plugin/
  manifest.json
  popup.html
  popup.js
  app.css
  jquery.1.8.3.js
  icon.png

Sources

  • 600-developer__frontend__google__chrome-plugin-develop.md