Talk about Chrome plugins from development to debugging to packaging

What is the Chrome plugin

Chrome plug-in and a common Web application is actually composed of HTML + CSS + JS zip package, plug-in can use Chrome to provide the browser API, enhance the function of the browser. Chrome plugins are usually.crx files that can be downloaded from Google’s Online App Store or dragged directly into the browser in developer mode. Plug-ins can appear in two locations after successful installation:

1. In the browser address bar
2. In the browser toolbar

The locations that appear can be configured in the configuration file.

Next, use clearRead as an example to discuss the development, packaging and distribution of Chrome plug-ins. The clearRead plugin is a tool that extracts the content of news pages to provide a clean and clean reading interface. It can be downloaded and installed in the Chrome App Store.

Here is the GitHub address github.com/mai-kuraki/…

The project structure

Let’s look at the project structure. The real packaged directory is the buildSrc folder. Since the project is developing using ES6 syntax, put ES6 files in devSrc and compile them into buildSrc. If you use ES5 directly, you can omit the devSrc directory and develop directly in buildSrc.

.├ ── gruntfile.js // Grunt Config File ├─ LICENSE ├─ readme.md ├─ buildSrc // Finally pack into CRX directory │ ├─ icon.png │ Icon_gray ├ ─ ─ image │ │ └ ─ ─ icon. The PNG │ ├ ─ ─ js │ │ ├ ─ ─ background. Js │ │ ├ ─ ─ contentScript. Js │ │ └ ─ ─ popup. Js │ ├ ─ ─ key. The pem │ ├ ─ ─ The manifest. Json │ ├ ─ ─ MDL │ │ ├ ─ ─ material. Min. CSS │ │ └ ─ ─ material. Min. Js │ ├ ─ ─ popup. The HTML │ └ ─ ─ style │ ├ ─ ─ the CSS │ ├ ─ ─ the content. The CSS. The map │ ├ ─ ─ content. SCSS │ ├ ─ ─ style.css. CSS │ ├ ─ ─ style.css. CSS. The map │ └ ─ ─ style.css. SCSS ├ ─ ─ contents / / contents file │ the generated output directory ├ ─ ─ clearRead. Contents │ └ ─ ─ clearRead. Zip ├ ─ ─ devSrc / / development file directory │ ├ ─ ─ background. Js │ ├ ─ ─ contentScript. Js │ ├ ─ ─ lib │ │ └ ─ ─ ├─ ├─ download.txt └─ download.txtCopy the code

At the heart of a plug-in is the manifest.json manifest file, which provides various information about the extender.

{
  "manifest_version": 2."name": "My Extension"."version": "Version string",}Copy the code

This is the simplest manifest file, and note that the manifest_version field is fixed to a value of 2. All configuration items of the manifest can be viewed in the document.

Project development

The Chrome plugin can be divided into three parts, each running in a different environment.

Background page/Event page (Backgrund)

As the name implies, the background web page is running in the browser background, with the browser started to run, the browser closed to finish running. Event pages are loaded when called and unloaded when scripts are idle, both running in the background.

User Interface Web page (POPup)

Click the small pop-up window out of the plug-in, every time you click the pop-up window to start running, the end of the pop-up window closed, you can interact with backgrund script.

Content script

After the plug-in is installed, the content script can be injected into the page every time it opens. The content script can read the details of the page visited by the browser and can modify the page.

1. Popup page on the toolbar

Click the toolbar/address bar icon (depending on the configuration file) and the popover is actually an HTML page. The popover file to display, and the toolbar ICONS are configured in the manifest.json file.

{
    "browser_action": {
        "default_title": "clearRead"."default_icon": "icon.png"."default_popup": "popup.html"}},Copy the code

In the clearRead plug-in, the PopUp interface mainly provides plug-in enable status and shortcut key configuration functions.

2. Content script content.js

Content scripts are injected into the web page when it is opened, and they are executed in the context of the loaded page in the browser. Content scripts should be treated as part of the loaded page. The core functionality of clearRead is to rely on content scripting. Which pages to inject scripts into and which scripts to inject are configured in the manifest.json file.

{
    "content_scripts": [{"matches": ["* : / / * / *"."file://*"]."css": ["style/content.css"]."js": ["js/contentScript.js"]]}}Copy the code

The matches field sets up a match expression to filter sites that need to inject scripts. The clearRead plug-in uses content scripts to inject scripts into the page, and generates reading patterns by listening to the shortcut key activator to analyze and extract the title body of the page.

3. Background page/Event page

Configure the scripts to run in the manifest.json file

{
  "background": {
    "scripts": ["eventPage.js"]."persistent": false}}Copy the code

If you set the parameter persistent:false, the background page changes to the event page. The difference between the event page and the background page is whether the background page is always running in the background.

4. Communication between content, background, and POPUp

Listen for events in the script

chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
    console.log('Received message')
    sendResponse('Send return value');
});
Copy the code

Send a message

chrome.extension.sendMessage({msg: 'send a message'},(response) => { 
    console.log(response); 
});
Copy the code

The three pages can communicate with each other. It’s important to note that the Content script is injected into each open browser TAB. If you send a message from popup or background to the content, you need to confirm the current content. Use Chrome.tabs. Query to find the currently active window. In addition to communicating via events, popup and Background can also access scripts through the Chrome.extensionAPI.

chrome.extension.getBackgroundPage()
Copy the code

GetBackgroundPage returns the window object in the background script of the current extension.

chrome.extension.getViews()
Copy the code

GetViews returns an array of JavaScript Window objects for each page running in the current extender.

5. Local storage

Application development is also a more important data persistence, Chrome plug-in can use HTML5 localStorage API to achieve data storage. For state Chrome provides Chrome. Cookies.*API to store cookies. Chrome also provides Chrome. Storage.*API to store data. To use chrome. Storage, you need to configure the storage permission in the manifest.json file (cookies also need to be configured) :

{
    "permissions": [
      "storage"]}Copy the code

* and chrome.storage.local.* The difference between the two modes is that the data stored in synchronous mode will be synchronized if you log in to the same account on the browser of another device. Storing data:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});
Copy the code

Read data:

chrome.storage.sync.get(['key'].function(result) {
  console.log('Value currently is ' + result.key);
});
Copy the code

If you want read-only storage, you can use Chrome.storage.managed to store it

Script packaging

The Chrome extensions page provides the ability to package extensions.

crx

npm install crx
Copy the code

After the installation is complete, go to the directory for packaging

$ cd myFirstExtension
$ crx pack -o myFirstExtension.crx
Copy the code

The third method is recommended, packaged with Grunt:

npm install grunt-crx
Copy the code

Install the grunt- CRX module configured in gruntfile.js

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt); . grunt.initConfig({ ... crx: { myPublicExtension: { src:"buildSrc/**/*",
                dest: "crx/clearRead.zip",
            },
            mySignedExtension: {
                src: "buildSrc/**/*",
                dest: "crx/clearRead.crx",
                options: {
                    privateKey: "buildSrc/key.pem"}}}}); . grunt.registerTask('crxTask'['crx']);
};
Copy the code

The command line uses the $grunt crxTask command to package the packet. Note: The private key file key.pem can be generated by running the CRX package command. You need to generate CRX and zip files for the package file, and upload the ZIP file to the Chrome App Store

Extension debugging

1. Install the extension

First, you need to open the Chrome Extension management page to open developer mode. In normal mode, Chrome does not allow you to install extensions that are not downloaded from the store. Open developer mode and drag the CRX /zip file directly into the browser to install.

Note: If you drag CRX /zip files directly to Windows, you may get an error (I have this problem with Window10). You need to drag the unzipped folder to install it

2. To debug the popup

Right – click on the extension icon in the toolbar to select review pop-ups

3. The debugging backgrund

On the extension management page, click the DevTools button on the installed extension that has a background page to pop up the background page.

3. Debug the content

Content scripts are things that are injected directly into the page that you can debug by opening Devtools on the page.

Release on

Once the app is developed and packaged, it’s ready to go to the app Store, you need a Google account to log in to the developer’s information and this is the first time developers have to pay $5 to upload the plugin to the Google App Store and click Add new content to start uploading and fill in the plugin information

manifest.json
manifest_version

Some API document addresses

1. Introduction to the Chrome plug-in
2. Developer guide
3. Manifest.json complete field
4. Chrome APIs