[FE] Chrome Extension 五步曲

1. Create the manifest.json

Only three fields is needed.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx"
}

2. Add instruction (background.js)

Create and register a background.js script for manifest.json to reference.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["storage"]
}

So, what the means of "persistent" set to false ?

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests.

The webRequest API is incompatible with non-persistent background pages.

Most APIs, must be registered under the "permissions" field in the manifest for the extension to use them.

3. Introduce a User Interface (popup.html)

Like the background script, this file needs to be designated as a popup in the manifest under page_action.

Toolbar icon is in the default_icons under page_action.
Management page icon is in the icons field.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["storage"],
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
        }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
}

4. Logic layer (popup.js)

    ...
  
    
    
  

5. Give Users Options（options.html）

Start by creating a file in the directory called options.html

Create a file called options.js in the extension directory with the logic.

  
    
      
    
    
      

      
      

        
Choose a different background color!
      
    
    
  

Then register the options_page in the manifest,

  {
    "name": "Getting Started Example",
    ...
    "options_page": "options.html",
  }

 

Chrome extension：https://developer.chrome.com/extensions/getstarted

Firefox extension：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

Link：https://www.cnblogs.com/farwish/p/12093314.html