This includes the chrome extension discussed below, which is officially referred to as Chrome Extension, considering the current mainstream term for chrome extension

What does chrome do

Quote from the official website:

Extenders are small software programs that can customize the browsing experience. It allows users to customize Chrome features and behavior based on their personal needs or preferences. They are built based on Web technologies such as HTML, JavaScript, and CSS. Extensions consist of interrelated components that can include background scripts, content scripts, option pages, UI elements, and various logical files.

• Bookmark control
• Download the control
• Window control
• The label control
• Network request control, all kinds of events monitoring
• Custom native menu
• Perfect communication mechanism

We commonly include a lot of webpage price comparison tools, color picker, gold digging default TAB page, and even redux development debugging tools, JSON browser tools are implemented through Chrome plug-ins

Interested can go to chrome the official app store: chrome.google.com/webstore/ca…

Version of the Chrome plugin

Note that there are official versions of the Chrome plugin, and support for Chrome varies from version to version

This tutorial is developed and presented in the V2 version for compatibility

Chrome plugin for browser support

First of all, there’s no denying that Chrome has the best support for chrome plugins

Secondly, webKit kernel browsers (domestic 360 browser, Sogou browser, etc.) generally can also run

Finally, the Firefox browser now has some support for the Chrome plugin

That said, chrome plugins are the preferred solution for limited manpower, regardless of browser support, online profiles and development difficulties

Features of the Chrome plugin

Chrome plugin is composed of several components, the purpose of each component and subsequent development and debugging methods will also have some differences, here you first understand ~

manifest.json

This file is a chrome plugin configuration file, the purpose of which is to tell the browser that loaded the plugin to go to the various resource files, plug-in configuration information, etc.

This is an essential part of every Chrome plugin

popup

A separate popup page, a row of plug-in ICONS in the upper right corner of the browser, is popup

The page consists of relatively independent HTML, CSS, and JS

This is also the part of the development that is closest to a traditional front-end project

content script

This part is usually a JS script, the purpose is usually to get/modify the DOM of the target page, for example, you want to add some component UI to the target page need to use this script

Note that the JS of this script and the page script are isolated and cannot be accessed directly. There is no way that you can directly access some of the variables of the target page (there are other ways to communicate with each other below).

However, CSS is not isolated, so CSS with the same name will pollute, and it is usually necessary to ensure that the CSS name within the script is unique

background script

This is the script that runs in the background of the browser, where you normally put code that needs to run all the time

It has high API permissions and can access many Chrome apis without cross-domain restrictions

Displays the chrome plug-in

Finally, a brief introduction to some of the existing forms of chrome plug-ins, which are usually defined in manifest.json files

BrowserAction (top right corner of browser)

"Browser_action ": {"default_icon": "img/icon.png", "default_title":" This is Chrome plugin ", "default_popup": "popup.html"}Copy the code

This configuration adds a plugin icon in the upper right corner of the browser, which is another frequently used presentation

PageAction (top right corner of browser)

// manifest.json {"page_action": {"default_icon": "img/icon. PNG ", "default_title": "I am pageAction", "default_popup": "popup.html" }, "permissions": ["declarativeContent"] } // background.js chrome.runtime.onInstalled.addListener(function(){ chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){ chrome.declarativeContent.onPageChanged.addRules([ { conditions: / / / only open the baidu will show pageAction new chrome. DeclarativeContent. PageStateMatcher ({pageUrl: {urlContains: 'baidu.com'}}) ], actions: [new chrome.declarativeContent.ShowPageAction()] } ]); }); });Copy the code

The same as browserAction in general, but pageAction can define qualified pages in background-script and only enable our plugin in certain cases

Right-click menu

// manifest.json {"permissions": ["contextMenus"]} // background.js chrome.contextMenus.create({ type: 'normal', // Type, optional: ["normal", "checkbox", "radio", "separator"], default normal title: 'Name of menu ', // Display text. This parameter is required unless it is of the "separator" type. If it is of the "selection" type, you can use %s to display selected text contexts: ['page'], // Context, optional: ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"], default page onclick: Function (){}, // parentId: 1, // right-click the menu item's parent menu item ID. Specifying a parent menu item makes it a child of the parent menu item documentUrlPatterns: 'https://*.baidu.com/*' // Displays this right-click menu only on certain pages}); / / remove a menu item chrome contextMenus. Remove (menuItemId); / / delete all custom right-click menu. Chrome contextMenus. RemoveAll (); / / update chrome a menu item. The contextMenus. Update (menuItemId updateProperties);Copy the code

The Chrome plug-in can also customize the right mouse button menu. When the user right-clicks the mouse button on a single computer, the plug-in menu is displayed to trigger functions

Override (to override a particular page)

"chrome_url_overrides":
{
	"newtab": "newtab.html",
	"history": "history.html",
	"bookmarks": "bookmarks.html"
}
Copy the code

Use to replace pages that Chrome provides by default, such as new tabs, bookmarks, etc

The Nuggets TAB navigation is based on this ability

Devtools (Developer tools)

} // devtools.html <! DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="js/devtools.js"></script> </body> </html> // devtools.js // create a custom panel. The same plug-in can create multiple custom panels. Panel title, icon (actually set up and no place to display), the page to load, load, after the success of the callback chrome. Devtools. Panels. Create (' MyPanel ', 'img/icon. PNG', 'MyPanel. HTML, Function (Panel) {console.log(' Custom panel created successfully! '); }); / / create a custom sidebar. Chrome devtools. Panels. Elements. CreateSidebarPane (" Images ", function (sidebar) {/ / sidebar. SetPage ('.. /sidebar.html'); / / specified to load a page sidebar. SetExpression (' document. QuerySelectorAll (" img ") ', 'All Images'); //sidebar. SetObject ({aaa: 111, BBB: 'Hello World! '}); });Copy the code

The React or Vue control bar debugger is a plugin of this type that allows you to customize your own sidebar and its contents in the console

The Devtool page has access to a proprietary set of apis to retrieve information about the page’s review window and network requests

review

• What is the Chrome plugin
• The use of chrome plugins
• The core components of the Chrome plugin
• Displays the chrome plug-in