Chrome plug-in tutorial 1 – getting to know manifest


About chrome plug-ins Maybe everyone will use a few more or less Screenshot of fealzer, etc These give us great convenience in using the browser more or less How to develop an extension There are few such documents in China Now let’s dissect what chrome plug-ins need

Parsing chrome plug-ins

If you want to develop a plug-in, first let’s take a look at how to write a simple chrome plug-in Let’s take an example

Let’s look at the catalogue first

├── icon. Png // icon file
├── manifest. JSON // declaration file
├── popup. css  // popup. CSS referenced by HTML
├── popup. HTML // page file
├── popup. JS // the JS file referenced by the popup page
└── README. MD // description file

We grouped according to the known first. Icon is an icon file, which is not easy to understand popup. JS, HTML and CSS are all of one page A group There is also a manifest JSON group README. MD. a set of warehouse description documents We just need to check the manifest JSON file HTML / JS / CSS everyone has a certain degree of understanding Explain that the of our chrome plug-in must be manifest JSON file Let’s have a look


Since we need to understand this JSON file Then we have to understand what should be filled in Let’s take a look at the more comprehensive information provided by the officialmanifest.jsonDocuments

  "Manifest_version": 3, // manifest version The parameters represented by 1, 2 and 3 different versions are inconsistent Official recommendation 3
  "Name": "my extension"
  "Version": "versionstring", // extended version number

  "action": {...}, //  Version 3 is new Behavior You can control the display text and other icons on the Chrome extension
  "Default_locale": "en", // the default language If used Must be in_ The locales folder contains the corresponding version of the file
  "Description": "a plain text description"
  "icons": {...}, //  Icon

  //Optional filling
  "author": ..., //  author
  "automation": ..., //  Automation At present, the official did not give the corresponding information
  "Background": {// background page parameters
    "Service_worker": "background. JS", // the logic of the background page
    //Optional filling
    "type": ...  //  Type At present, you can fill in module Use the module of ES to write
  //Overwrite chrome settings
  "chrome_settings_overrides": {...},
  //Change the default tab page
  "chrome_url_overrides": {...},
  //Commands for customizing Chrome
  "commands": {...},
  "content_capabilities": ...,
  //Content script
  "content_scripts": [{...}],
  //Content restriction policy CSP
  "content_security_policy": {...},
  //Convert user's script
  "converted_from_user_script": ...,
  //CSP content policy embedder
  "cross_origin_embedder_policy": {"value": "require-corp"},
  //CSP open policy
  "cross_origin_opener_policy": {"value": "same-origin"},
  //Current localization
  "current_locale": ...,
  "declarative_net_request": ...,
  //Debug page
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  //Event rules are mainly used for event listening of declarativecontent
  "event_rules": [{...}],
  //Define certain web pages or extensions to access the extensions you develop
  "externally_connectable": {
    "matches": ["*://**"]
  //File downloader
  "file_browser_handlers": [...],
  //Manage file downloader
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  //Home page address
  "homepage_url": "https://path/to/homepage",
  //Site permissions Which sites are allowed to open your extension
  "host_permissions": [...],
  //Import shared modules
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  //Stealth mode settings
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  //Public key
  "key": "publicKey",
  //Minimum chrome version
  "minimum_chrome_version": "versionString",
  //Declare how file suffixes are handled
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  //Set omnibox
  "omnibox": {
    "keyword": "aString"
  //Permissions used by the options menu
  "optional_permissions": ["tabs"],
  //Options menu page
  "options_page": "options.html",
  //Execute the page and whether to use the chrome UI
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  //Declare required dependencies
  "requirements": {...},
  //Define a set of pages to use in the sandbox
  "sandbox": [...],
  //Short extension name
  "short_name": "Short Name",
  //Define storage
  "storage": {
    "managed_schema": "schema.json"
  "system_indicator": ...,
  "tts_engine": {...},
  //Statement update address
  "update_url": "https://path/to/updateInfo.xml",
  //Version name
  "version_name": "aString",
  //Access rights of web resources
  "web_accessible_resources": [...]


Understand the basic structure Let’s make a simple extension first