Learn about Chrome extension development

What is a plug-in?

Chrome plug-in is a Web technology development, used to enhance the function of the browser software, it is actually a. CRX suffix compression package composed of HTML, CSS, JS, images and other resources.

My guess is that CRX is probably short for Chrome Extension:

The manifest. Json configuration file allows you to define which scripts to execute on which pages, at which times, and which actions to perform.

{
   // Extend the name
   "name": "MyExtension"./ / version. Consists of 1 to 4 integers. Multiple integers are separated by periods (.)
   "version": "1.0".// Manifest file version number. Chrome18 must start at 2
   "manifest_version": 2./ / description. A maximum of 132 characters
   "description": ", // Expand the icon. Recommended size 16,48,128"icons": {"16":"image/icon- 16.png","48":"image/icon- 48.png","128":"image/icon- 128.png"}, // language"default_locale":"en// It is recommended to reserve at least one setting, otherwise the extension icon will be dark.browser_action": {"default_icon":"image/icon- 128.png","default_title":"My Message","default_popup":"html/browser.html}, // Add the icon at the end of the address bar. Including ICONS and behaviors."page_action": {"default_icon":"image/icon- 48.png","default_title":"My Test","default_popup":"html/page.html"}, // theme, used to change the appearance of the entire browser"theme": {}, // specify the URL to which the extension should jump"app": {}, // Specify the background runtime environment and runtime script for the extension process"background": {"scripts": ["lib/jquery3.31..min.js","js/background.js"]."page":"html/background.html"}, // replace page"chrome_url_overrides": {"pageToOverride":"html/overrides.html"}, // specify the script/CSS to run on the Web page and when to run/insert it"content_scripts": [{"matches": ["https://www.baidu.com/*"],
     "css": ["css/mystyles.css"]."js": ["Lib/jquery - 3.3.1. Min. Js." "."js/content.js"]."run_at": "document_idle"}].// Security policy
   "content_security_policy": ","file_browser_handlers": [], // The extension's official home page"homepage_url":"http://xxx",
   // Configure the plugin in private mode
   "incognito": "spanning".// User operation intent description
   "intents": {},
   // Extend the unique identifier. You don't need to be assigned
   "key": ", // The smallest version of Chrome required for the extension"minimum_chrome_version":"1.0", // Message mapping to local processing module"nacl_modules": [], // Whether offline running is allowed"offline_enabled": true, // ominbox Input event in response to address bar"omnibox": {"keyword":"myKey"}, // Options page. Used to jump to option Settings on extension Admin page"options_page":"aFile.html", // Apply for permission"permissions": ["https://www.baidu.com/*",
     "background"."tabs"]./ / extensions. Third-party extensions can be invoked
   "plugins": [{
     "path": "extension_plugin.dll"."public": true}].// Specify the special technology required. Currently only supports "3D"
   "requirements": {},
   // Automatic upgrade
   "update_url": "http://path/to/updateInfo.xml".// Specify the resource path, which is a String array
   "web_accessible_resources": []}Copy the code

So much? Let’s take a look at some of the attributes we can use:

  • Name Extended name.
  • Version Version of the plug-in.
  • Manifest_version Manifest configuration file version.
  • Description Describes the functions of the plug-in.
  • The ICONS of ICONS plugins allow you to find a nice icon for the plugin.
  • Browser_action defines the plugin icon, the page that pops up when you click on the plugin, and the plugin title. It is recommended that you always keep one. If you do not set this property, the plugin icon will be gray and will light up only after it is set.
  • Background page, the background running environment of the extension process, can intercept modification requests, etc.
  • Content_scripts Content scripts that specify which scripts or CSS resources to insert into which pages and at what times
  • Permissions request items, such as storage, webRequest, webRequestBlocking, and so on.

After understanding these basic knowledge, the rest of the work is in accordance with the we want to realize the actual function, writing code, we begin to write our below the first plug-in, because it is the first plug-in, although the function is very simple, but we also want to give him a resounding name “terminator” plugin, what’s the end, and listen to our moments. Development plug-ins can use common front-end development tools, Vscode or other development tools, in fact, you can also use notepad to write but there is no hint of bad experience, it is recommended to use professional front-end development tools, the author here uses WebStorm demonstration

And when you write it, it looks like this

So how do you get the browser Google Chrome to work once you’ve written it

  • Step 1: Open Google Chrome
  • Step 2: In the browser address box, type Chrome :// Extensions /
  • Step 3: Enable the developer mode switch in the upper right corner. The switch is disabled by default. You need to manually enable the switch
  • Step 4: Click on the top left corner to load the unzipped extension. A box will pop up asking you to select a file directory

At this time, the logo above is gray, because we did not add icon attribute in manifest.json, so the logo was not displayed. We randomly found a picture on the Internet and put it inNote that the size of the logo should not be too large. 50 x 50 images are recommended

Be aware that we need to refresh the plugin to display the latest version after modifying the code

The first small example: delete baidu search home page logo icon

  • Step 1: Open Baidu to find the DOM element of the logo

  • The second step is to write the CSS in the code, using the content_scripts property

  • The third step, after the code is written, go to the browser to refresh the plug-in, and then open the Baidu search page, a magical moment appears, the logo unexpectedly disappeared

The core concepts of Chrome

content-scripts

Content-scripts is a form of Chrome plugin that injects a script (called script, but can include CSS) into a page, With The help of Content-scripts, we can easily configure javascript and CSS injection to a given page (see below if dynamic injection is required), most commonly: AD blocking, page CSS customization, and so on.

{
  // Need to inject the JS directly into the page
  "content_scripts": [{//"matches": ["http://*/*", "https://*/*"],
      // "
      
       " matches all addresses
      
      "matches": ["<all_urls>"].// Multiple JS are injected in sequence
      "js": ["Js/jquery - 1.8.3. Js"."js/content-script.js"].// JS injection can be arbitrary, but CSS must be careful, because careless can affect the global style
      "css": ["css/custom.css"].Optional values: "document_start", "document_end", or "document_idle". The last one indicates that the page is idle, and the default is document_idle
      "run_at": "document_start"}}]Copy the code

Note that the following code does not work if run_at is not actively specified as document_start (the default is document_IDLE) :

document.addEventListener('DOMContentLoaded'.function() { 
    console.log('I was executed! '); 
});
Copy the code

Content-scripts shares the DOM with the original page, but not the JS

background

The background is a resident page that has the longest life cycle of any type of page in the plugin. It opens with the browser and closes with the browser, so it usually places global code that needs to run all the time, run on startup, in the background.

Background allows you to call almost any Chrome extension API (except DevTools), and it can be accessed across domains without requiring CORS configuration. Background allows you to specify a web page by page. You can also specify a JS directly with scripts, and Chrome will automatically generate a default page for this JS:

{
  // The background JS or background page will always be resident
  "background":
  {
    // If you specify JS, a background page will be generated automatically
    "page": "background.html"
    //"scripts": ["js/background.js"]}},Copy the code

Need of special note is, although you can use the chrome – the extension: / / XXX/background. The HTML directly open the background page, but you open the page background and real has been run in the background of the page is not the same, in other words, You can open an infinite number of background.html files, but there’s only one that actually lives in the background, and you’ll never see its interface, only debug its code.

popup

Popup is a small window that opens when you click on browser_Action or page_Action icon. Popup is usually used for temporary interaction. Popup can contain any HTML content you want and can be sized to suit your needs. You can specify a popup page through the default_popup field, or you can call the setPopup() method.

Configuration mode:

{
  "browser_action":
  {
    "default_icon": "img/icon.png".// The title of the hovering icon, optional
    "default_title": "This is a sample Chrome plugin"."default_popup": "popup.html"}}Copy the code

It is important to note that popUp pages have a very short life cycle because of clicking on the icon to open popUp and then turning off the focus immediately. Code that takes a long time to run should never be written in PopUp.

On the permissions, it and background are very similar, they are the main differences between the different life cycle, can be directly through the chrome in the popup. The extension. GetBackgroundPage () the window object for background.

That’s all for this article

I’ll see you next time. Stay tuned

How do Browsers communicate