当前位置：网站首页>Chrome plug-in development tutorial

Chrome plug-in development tutorial

2022-07-24 13:19:00 【Crmeb mall source code】

This article will introduce in detail how to develop a Chrome plug-in unit , Including the introduction of plug-ins 、 Development configuration and debugging . Release without plug-ins 、 Review and other contents .

By reading this tutorial , You can ：

Understand browser plug-ins , This is specifically for Chrome Extension（CE） Basic knowledge and operation principle of

Learn how to develop CE Interface and logic

Debug plug-ins , Repair according to the error message

What is a browser plug-in

Browser plug-in is an embedded program that can enhance the function of web pages . With plug-ins , Users' use is no longer limited to web pages , You can also enjoy the enhancements brought by plug-ins . Users only need to search in the official plug-in store 、 download 、 Install and use , Very convenient .

The plug-in store is maintained by different browser manufacturers , For example, you should be in Chrome Use plug-ins on , Need to go to Chrome Webstore Download and install .Firefox The same is true of the above .

establish manifest

New folder , name CE-Demo, Add one more manifest.json The file of , The contents are as follows ：

{
  "name": "CE-Demo",
  "description": "CE-Demo's description shows here!",
  "version": "0.0.1",
  "manifest_version": 3
}
 Copy code

This file describes the basic attribute information of the plug-in 、 The running path of the code . Later, I will continue to enrich its content .

Add plug-ins

Here we load the entire directory directly （ Not packaged yet ）：

1. Address field input chrome://extensions Go to plug-in management page .

2. Select the developer mode in the upper right corner of the interface

3. Click load the unzipped extension in the upper left corner , And select the plug-in folder just now

The plug-in has been loaded successfully .

You can click the Extender Button , Move the mouse to the fixed button on the right side of the plug-in , Fixed to the label bar .

There are more tabs icon Icon , Click to call the plug-in popup Interface ：

Plug ins will not be hot updated , Remember to click refresh every time you modify the code icon Load the latest code

Add functionality

We will implement a simple version of the history plugin .

register background.js

It is a background script , The browser will scan the plug-in and initialize it when it is installed or reloaded ( Event monitoring, etc ). It is an important part of the whole plug-in . Must be in manifest Internal configuration .

{
"name": "CE-Demo",
  "description": "I am a demo",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}
 Copy code

At the same time, add background.js file , Contains the following code ：

chrome.runtime.onInstalled.addListener(() => {
  console.log(' The background script runs successfully ！')
  chrome.storage.sync.set({ history: [] });
});
 Copy code

The code will be installed after the plug-in , Do two things ：

1. Print a log message

2. adopt storage API Set a storage field whose initial value is an empty array .

To use storage, Need to be in manifest Add this permission ：

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

Click on server worker Link to open devtools Interface , You can see the log information ：

Add history interface

here , We choose popup The form of interaction ： When the user clicks the plug-in icon in the tab bar, the user's access history is displayed （ Only the history after plug-in installation ）.

We need to override the default popup Interface , modify manifest:

{

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

Add three files in the plug-in directory ：popup.html、popup.js、popup.css:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <div id="container">
         There is no browsing record ～
    </div>
    <script src="popup.js"></script>
  </body>
</html>
 Copy code

chrome.storage.sync.get("history", ({ history }) => {
  const contentHTML = history.length === 0
      ? " There is no browsing record ～"
      : history
          .map((record) => {
            return `
    <div class="item-box">
            <div class="item-box_time">${record.time}</div>
            <a class="item-box_text" href="${record.url}">${record.title}</a>
        </div>
    `;
          })
          .join("");
          document.querySelector('#container').innerHTML = contentHTML
});
 Copy code

The above code starts from storage Read in history Content , Then assemble the content into html Insert into the document .

Record browsing history

The plug-in provides content scripts Content Scripts（CS） The concept of , When a user opens and visits a website , The browser will CS Inject into the document of the website to execute .

therefore , We need to be in CS The logic of writing records in the script .

Go to manifest Add in CS:

{
  ...
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content/index.js"]
    }
  ]
}
 Copy code

Add a new directory in the plug-in directory content And add index.js file ：

chrome.storage.sync.get("history", ({ history }) => {
  console.log("history--->", history);
  history.unshift({
    title: document.title,
    url: location.href,
    time: new Date().toLocaleString(),
  });
  chrome.storage.sync.set({
    history
  });
});
 Copy code

The above code obtains the title ,url, Access time stored to storage in .

After visiting a few web pages casually , Click the plug-in icon to see ：

Insert picture description here

Add custom icon

Default icon Relatively simple , We use a panda picture as a plug-in icon.

newly added assets Catalog , Let's play one. icon.png file .

modify manifest:

{
    "action": {
        "default_icon": {
          "16": "/assets/icon.png"
    }
  }
}
 Copy code

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ～

link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27

Extraction code : yu27

Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ～

Open source address

Code cloud address ：

http://github.crmeb.net/u/defu

Github Address ：