How to develop a chrome browser plugin

Table of contents

foreword

chrome extension

foreword

At present, the chrome browser has already occupied the largest market share and is also the browser with the best comprehensive experience. It is basically the browser used by developers.

In the process of using chrome, I accumulated a lot of bookmarks, at most close to a thousand, and then gradually cleared some. Once when I checked and cleaned up these bookmarks, I found that it was not intuitive, so I thought about developing a simple chrome plug-in by myself to count these bookmarks from time to time.

This plug-in is also relatively simple, with the following functions: counting the total number of bookmarks, counting the number of bookmarks in each folder, counting the number of bookmarks of commonly used technology sites, the latest added bookmarks, the earliest added bookmarks, etc.

The specific display diagram is as follows:

Through this extension, I keep abreast of the bookmarks I added, and clear them after learning.

Therefore, this article will use this simple plug-in to introduce how to develop a chrome plug-in.

chrome extension

A chrome plug-in, also known as an extension, is mainly developed based on front-end technology. It is a type of software program used to extend the browser's functions and can be loaded and run on the chrome browser.

You can also open the extension management interface in the browser to view all extensions installed in the current browser.

In addition to supporting the basic front-end WebAPI and JS-API, the extension also has some other capabilities, such as browser windows, tabs, right-click menus, developer tools, history, download requests, bookmarks, and other operations. These corresponding functions are handled by their own chrome objects. For example, bookmarks will use the chrome.bookmarks object, which is used to specifically process bookmark-related data and operations. Others include `chromes.tabs` tab tag object, `chromes.history` history object, etc., many dedicated APIs for extensions.

There are two types of chrome extensions:

Pop-up window: After clicking the button, there will be a pop-up window page, which can be used for interactive operations.
Background program: A script program that runs permanently in the background and is closed when the browser is closed.

There are generally two types of user interface:

Browser buttons, Browser Actions, functions attached to the browser as a whole.
Page buttons, Page Actions, functions attached to a separate tab page, can only be used on a specific page.

In the example of this article, the bookmark plugin is a browser button pop-up window used to organize bookmarks . The extension will be fully introduced below.

file structure

First, take a look at the file directory structure of the bookmark plugin:

From the above figure, you can see that the file structure is relatively simple:

manifest.json: resource and feature configuration file for plugins
popup.html: Plug-in window page entry file, popup window page
bookmarks.js: js code corresponding to function processing
popup.css: css code
images/icon.png: Icon resource for configuring plugins and button icons

These files are the most basic files needed to develop chrome plug-ins, and other files such as locale internationalization resource files, module files, etc. can also be used.

Since the function of our bookmark plug-in is relatively simple, it is enough to use these few basic files.

manifest.json

The manifest.json configuration file is used to provide the basic information of the plug-in, such as version, icon, title, entry file, etc., as shown below, which is the basic configuration of the bookmark plug-in.

{
  "manifest_version": 3,
  "version": "2.0",
  "name": "mybookmarks",
  "description": "a chrome extension for bookmarks",
  "icons": {
    "128": "images/icon.png",
    "16": "images/icon.png"
  },

  "action": {
    "default_title": "书签概览",
    "default_popup": "popup.html"
  },
  "permissions": [
    "bookmarks"
  ],

  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

The manifest V3 version is used here, compared to the V2 version:

Added action to replace the previous browser_action and page_action

The content_security_policy configuration has changed, V3 uses the object type instead of the V2 string

Added host_permissions to specifically deal with host permissions, no longer mixed into permissions

V3 supports native Promise, and async/await

V3 does not allow access to remote js or wasm files

V3 adds declarativeNetRequestAPI to handle network requests

V3's Background Scripts force the use of Service Workers

From the configuration of the bookmark plugin, you can see:

Plugin version, name, description information.
The icon of the plugin, referenced from images/icon.png in the file, customizes a suitable image resource, but does not support SVG images.
The button title of the plug-in on the browser, which will be displayed when the mouse moves over the button.
Plug-in pop-up entry page file, popup.html.
Plug-in permission configuration needs to process bookmarks browser bookmarks.

The figure above shows the button position of the bookmark plugin on the browser, the icon icon and default_title mouse hover description configured through the manifest.json file.

html and css

The html file of the plug-in sets the page structure of the pop-up window, just like the general front-end html page, adding page label elements, importing js and css files, etc.

The basic code is as follows:

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>书签概览</title>
    <link rel="stylesheet" type="text/css" type href="./popup.css"></link>
  </head>
  <body>
    <div id="app">
      <div id="total"></div>
      <div id="menus"></div>
      <div id="sites">站点: </div>
      <!-- ... -->
    </div>
    <script src="./bookmarks.js"></script>
  </body>
</html>

Our plug-in html code introduces the popup.css style file and bookmarks.js script file.

The same is true for css files, which are no different from the usual front-end styles we write.

It should be noted that js code can only be processed by importing script files, and script embedded scripts cannot be used in html, otherwise an error will be reported.

<script>
  console.log(3333)
</script>

If you use the above method to add js code, no code will be executed, and there will be an error message of unsafe code:

In addition, js files of network resource type must not be requested.

js

Let's take a look at the code in the js file. It is essentially the same as the usual code and supports es6 syntax. For example, read the elements on the page according to the id, as shown in the following code:

const app = document.getElementById('app')
const totalEl = document.getElementById('total')

Our plugin mainly deals with bookmarks, and chrome provides bookmarks objects that can be used:

chrome.bookmarks.getRecent(10000, (results) => {
  totalEl.innerHTML = '总数：' + results.length
})

The above code obtains the total number of browser bookmarks through the getRecent method of the bookmarks object (here, the default total number of bookmarks is less than 10,000, and the latest 10,000 bookmarks are read).

The above code uses a callback function to obtain the result, and we can also use the Promise method to call:

chrome.bookmarks.getRecent(10000).then((results) => {
  totalEl.innerHTML = '总数：' + results.length
})

In this way, the total number of corresponding bookmarks can be obtained, and other bookmarks can be classified differently, and the latest or earliest bookmark information can be counted, all of which can be processed through the bookmark object.

// 获取整个书签栏的树结构数据
chrome.bookmarks.getTree()
// 获取某个父节点下的所有子节点书签
chrome.bookmarks.getChildren(str)
// 根据条件搜索书签
chrome.bookmarks.search(str)

Through the operation of the bookmark object, we can basically complete the bookmark statistics and special bookmark display functions of our plug-in.

load plugin

At this point, the simple bookmark plug-in can be used. We need to load the plug-in code into the browser and open the browser's extension management interface.

As shown in the figure above, click the Load the decompressed extension button to directly load the source code folder to complete the loading and importing of the extension.

The mybookmarks 2.0 in the picture above is our bookmark plug-in, which has been successfully loaded and can be used.

debugging

If the plug-in can be loaded, but some codes have errors, an error will be displayed, and you can click to view:

Debugging the plug-in code is also relatively simple. Right-click on the pop-up page to check, and the developer tools on the plug-in page will be opened, which is the same as the developer tools on the browser page, and code debugging can be performed.

Open the developer tools and load the pop-up window entry page:

Summarize

So far, our bookmark plug-in has been developed and can be loaded into the browser for use.

Although the function is very simple, it is also based on the various specifications developed by the chrome plug-in. If you want to develop more complex functions, you need to check the various APIs provided in the chrome plug-in development specification. Or use front-end web technology to expand more functions will be a matter of course.