There are many tutorials about chrome plug-in development on the Internet, but they are all based on the second version (MANIFEST V2), Chrome official in November 2020 launched the third version (MANIFEST V3 development specification, but feel that there are few plug-ins based on this development, let alone related aspects of the introduction. The Nuggets also provide a plugin, unzip open a look, also manifest V2. Embrace Edition 3, because it’s officialManifest V2 support timelineNow all 2022, 2023 will be completely unable to use the Manifest V2 version of the plug-in, also don’t hurry to follow the official footsteps, learn to learn the Manifest V3 development posture, don’t learn not to move, in fact, the difference is not so big, don’t panic 😁.

Before I get to the bottom of this, I’d like to point out that a browser plugin is officially called an extension, while a browser plugin is a lower-level set of tools. Finally, I didn’t actually use version 2 for development. I went straight to the latest version, and the following is an introduction to V3.

Hello, extensions

Moving the example from the official website, we will begin our first experience with the Hello-World plugin. We will introduce the project directory, which is very simple and consists of three files.

HTML // plugin interface --hello_extensions. PNG // plugin icon --manifest.json // configuration fileCopy the code
  • manifest.json
{"name": "Hello Extensions", "description": "Base Level Extension", "version": "1.0", // Manifest_version ": 3, "action": {"default_popup": "hello.html", // extension page "default_icon": "hello_extensions.png" // extension icon}, "commands": Suggested_key ": {// Shortcut to open an extension page "default": "Ctrl+Shift+F", "MAC ": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } }Copy the code

Minifest. Json is the configuration file for the extension and is required. In addition to the usual name, version, etc., action is responsible for configuring the view page and icon of the extension.

  • hello.html
<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>
Copy the code

Hello. HTML is pretty simple, there’s nothing to say here, just grab one of the hello_extensions.png ICONS. This is the hello World extension that you need to run locally. There are three steps:

  1. Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions.
  2. Check the box next to Developer Mode.
  3. Click Load Unpacked Extension and select the directory for your “Hello Extensions” extension.

To open developer mode, click “Load Unzipped extensions” for the first time, select your local extensions folder, and click the Update icon under the extension card for subsequent updates.

The core of

UI

UI is to extend those things that can be seen by the user, such as pop-up pages, ICONS behind the URL status bar, etc., there are mainly the following:

icons

ICONS contain ICONS displayed at the end of the URL bar, ICONS displayed in the app marketplace, and so on, configured using default_icon:

{
  "name": "My Awesome page_action Extension",
  ...
  "action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png",
      "48": "extension_toolbar_icon48.png",
      "128": "extension_toolbar_icon128.png"
    }
  }
  ...
}
Copy the code

The four sizes are described as follows:

Icon Size Icon Use
16×16 favicon on the extension’s pages
32×32 Windows computers often require this size. Providing this option will prevent size distortion from shrinking the 48×48 option.
48×48 displays on the extensions management page
128×128 displays on installation and in the Chrome Webstore

Popup

Popup is an HTML page that displays a pop-up window when the user clicks on the plugin icon. It is similar to normal HTML and can contain styles or scripts, but does not allow inline scripts. If you’ve ever used a Chrome extension, it looks like this:

To add a popover to the extension, first register it in manifest.json, and then you can write it just like normal HTML.

"action": {
    "default_popup": "popup.html"
}
Copy the code

Tooltip

The description text that appears when the user hovers over the extension icon is also easier to use;

{
  "name": "Tab Flipper",
  ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}
Copy the code

Override pages

Override Pages can Override some of the browser’s default pages, such as opening a new blank TAB page, which can be replaced with our own:

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}
Copy the code
<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="logic.js"></script>
  </body>
</html>
Copy the code

This will display our override_page.html page when the browser opens a new TAB. Of course, in addition to newTab, there are also bookmarks and History behaviors that can be covered.

background scripts

1. The concept

A script that runs in the background to give the extension the ability to monitor browser behavior, such as opening a new page, removing bookmarks, closing a TAB, etc., by registering events to respond to browser events of interest. To enable this, add the following configuration to manifest.json:

"Background ": {"service_worker":" background-.js "// "type": "module" optional, supports ESM, lets you import other code in the script},Copy the code
//// background.js ////
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"]
  });
});
Copy the code

It is important to note that the background script file we configured must be in the root directory of the extension project, otherwise it will not work.

2. Load the script

The official provides the following loading examples:

  • When the extension is first installed or version updated;
  • The event that the script listens for is raised.
  • Other scripts or extensions send messages;
  • Extension of the other views, such as page popup bullet box, called the runtime. GetBackgroundPage method;

3. Uninstall the script

Once the script is loaded, it runs consistently until all views and message ports are closed.

4.chrome apis

As mentioned above, background script is mainly used to listen for various events distributed by the browser and call various apis. Therefore, the specific documents are not listed here, and you can find them slowly when you use them.

content scripts

1. The concept

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.

So basically, once you’ve installed your extension, your extension can be injected through Content Scripts into any page that you’re interested in, you can manipulate the DOM, overwrite styles, you can imagine a lot, I remember there was an extension for beautify pages, That’s how it’s done. Based on the first example, we modify the configuration item to add Content scripts:

"Content_scripts" : [{" matches ": [" https:// *. Baidu.com/ *"], / / match need injection site, must provide the "CSS" : ["my-styles.css"], // Can also inject CSS, can also inject multiple "js": ["content-script.js"] // inject in writing order}],Copy the code

Provide a good injection of CSS and JS, reload the extension, open Baidu, you can see the effect, is not very powerful 👏.

2. Two ways of injection

The static declaration

Json to declare CSS /js/matches. In addition to these three configuration items, there are several more:

  • run_at

Document_idle, document_start and document_end are used to determine when a script should be injected into a page.

Name Type Description
document_idle string Preferred.  Use "document_idle" whenever possible. The browser chooses a time to inject scripts between "document_end" and immediately after the window.onload event fires. The exact moment of injection depends on how complex the document is and how long it is taking to load, and is optimized for page load speed. Content scripts running at "document_idle" do not need to listen for the window.onload event, they are guaranteed to run after the DOM is complete. If a script definitely needs to run after window.onload, the extension can check if onload has already fired by using the document.readyState property.
document_start string Scripts are injected after any files from css, but before any other DOM is constructed or any other script is run.
document_end string Scripts are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.

Document_idle is somewhere between document_end and window.onload. At this point, the DOM has been loaded. Document_start is before script execution and DOM parsing, document_end is after DOMContentLoaded, and window.onload is before document_idle. So the order is: document_start->document_end->document_idle, and document_end and document_idle occur between DOMContentLoaded and onload;

  • all_frames

Determines whether to inject frames into a page (the url for frames must match the injection criteria). Default: false;

  • match_about_blank

If an about:blank frame is opened on the matching injected page, whether to inject it into the blank page as well. Default: false;

  • exclude_matches

And matches, to exclude certain sites;

  • include_globs

With this configured, sites must match and include_globs to be injected.

  • exclude_globs

Exclude_matches matches matches matches matches and exclude_globs matches matches matches

Programming with

Programmatic injection requires registering service_worker, for example:

"Permissions ": ["activeTab" // requires access to the activeTab to dynamically inject scripts to the page], "background": {"service_worker": "background.js"}Copy the code
//// content-script.js ////
document.body.style.backgroundColor = 'orange';
Copy the code
//// background.js ////
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js']
  });
});
Copy the code

Of course, you can also provide a function execution instead of a JS file, which I haven’t used much, but that’s all.

3. The chrome APIs

Since the script is a browser extension, it is given the ability to access Chrome APIs such as Storage, which can access local storage, as well as i18n and Runtime.

4. The isolation

Our Content Scripts run in an isolated environment, which I don’t understand here, so as not to mislead.

options page

Options Page is actually a page provided for the user to set some Settings for the extension. For example, when the user right-clicks the plug-in icon in the toolbar, or navigates to the extension management page and clicks the “Details” button, the Options page will be displayed.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Copy the code

In the example above, a new page is opened. This is not necessary, but you can also set it to a popover as follows:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Copy the code

Unconsciously copied so much content of the official website, of course, this is only a superficial introduction, there are a lot of content can be in-depth study, today will not say more, later have the opportunity to discuss it one by one.

The resources

  • Official example: github.com/GoogleChrom…
  • The official document: developer.chrome.com/docs/extens…