What is Chrome Extension

Extenders are small software programs that customize the browsing experience. They allow users to customize Chrome’s functionality and behavior in a variety of ways, such as being able to provide the following:

  • Productivity tool
  • Rich content
  • Information aggregation
  • Fun and games, etc

What can Chrome Extension do

Enhanced browser functions, easy to achieve their own “customized version” of the browser, and so on.

The Chrome plugin provides many useful apis for us to use, including but not limited to:

  • Bookmark control;
  • Download control;
  • Window control;
  • Label control;
  • Network request control, all kinds of events monitoring;
  • Custom native menu;
  • Perfect communication mechanism;
  • And so on;

Chrome Extension development and debugging

debugging

You can access the Plugin Management page from the top right menu -> More Tools -> Extensions, or directly enter Chrome :// Extensions in the address bar. Check the developer mode to load the plugin directly as a folder, otherwise you can only install. CRX files. Chrome requires the plugin to be installed from its Chrome App Store, and you can’t install it directly from any other website, so you can actually unzip the CRX file and load it directly from developer mode.

During development, any changes to the code must be reloaded by pressing Ctrl+R on the plug-in management page, preferably refreshing the page just in case.

The development of

Extension program main structure

  • Manifest file
  • Background Script
  • UI Elements
  • Content Script
  • Options Page

Chrome extension structure

Extended structure

background scripts

Background Scripts are extended event handlers; It contains logic that listens for extended browser events and executes instructions when triggered. Valid background scripts are loaded only when needed and unloaded when idle.

The user interface

  1. popup
  2. You can include plain HTML pages with JavaScript logic.
  3. You can also calltabs.createorwindow.open()Displays additional HTML files that exist in the extension.

Extensions that use page actions and pop-ups can use the Declarative Content API to set rules in background scripts for when pop-ups are available to the user. When the conditions are met, the background script communicates with the pop-up window, making its icon clickable by the user.

content scripts

communication

Extensions that read or write to web pages use Content Scripts. Content scripts contain JavaScript executed in the context of a page that has been loaded into the browser. Content Scripts reads and modifies the DOM of the web page accessed by the browser. Parent-child communication is also possible by using the Storage API to exchange messages and store values.

communication

  1. popupandbackgroundCommunication between

Background => popup is via getBackgroundPage, and popup => background is via getViews.

  1. backgroundandcontentCommunication between
  • Long connection:chrome.tabs.connect 和 chrome.runtime.connect
  • Short connection:chrome.tabs.sendMessage

  1. Communication between Popup and Content

    chrome.runtime.sendMessage, chrome.runtime.onMessage

Common Chrome Extension apis

The official sample