如何开发一个chrome浏览器插件

扩展程序除了支持基本的前端WebAPI和JS-API以外，还拥有一些其他能力，如浏览器窗口、tab标签页、右键菜单、开发者工具、历史记录、下载请求、书签等等操作处理。这些对应的功能都有自己的chrome对象来处理，比如书签就会使用到 chrome.bookmarks 对象，它用于专门处理书签相关的数据和操作。其他的还有诸如 `chromes.tabs` tab标签对象、`chromes.history` 历史记录对象等等，很多个为扩展程序提供的专用API。

chrome扩展程序有两种：

弹出窗口：点击按钮后有弹出窗口页面，可用于交互操作。
后台程序：常驻在后台运行的脚本程序，随浏览器的关闭而关闭。

用户界面一般也有两种：

浏览器按钮，Browser Actions，附着于浏览器整体的功能。
页面按钮，Page Actions，附着于单独标签页面的功能，在特定的页面上才能使用。

本文的示例，书签插件就是用来整理书签的一个浏览器按钮性质的弹出窗口，下面将完整介绍这个扩展程序。

文件结构

首先，看一下该书签插件的文件目录结构：

通过上图，可以看到，文件结构比较简单：

manifest.json：插件的资源和功能配置文件
popup.html：插件窗口页面入口文件，弹窗页面
bookmarks.js：对应功能处理的js代码
popup.css：css代码
images/icon.png：图标资源，用于配置插件程序和按钮图标

这几个文件是开发chrome插件所需要的最基本的文件，其他的还可以使用诸如 locale国际化资源文件、模块文件等等。

由于我们的书签插件功能较简单，所以使用这几个基本文件就可以了。

manifest.json

manifest.json 配置文件，用于提供插件的基本信息，如版本、图标、标题、入口文件等等，如下所示，即为书签插件的基本配置。

{
  "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://*/*"
  ]
}

这里使用了manifest V3版本，相比较V2版本：

增加了 action，取代之前的 browser_action 和 page_action

content_security_policy 配置有所变化，V3使用对象类型，取代V2的字符串

增加了 host_permissions 专门处理主机权限，不再糅杂入 permissions 中

V3支持原生的 Promise，以及 async/await

V3不允许访问远程js或wasm文件

V3增加 declarativeNetRequestAPI 处理网络请求

V3的 Background Scripts 强制使用 Service Workers

从书签插件的配置可以看到：

插件版本、名称、描述信息。
插件的图标，引用自文件中的 images/icon.png，自定义一个合适的图片资源，但不支持SVG图片。
插件在浏览器上的按钮标题，鼠标移动到按钮上面时会显示。
插件的弹窗入口页面文件，popup.html。
插件权限配置，需要处理 bookmarks 浏览器书签。

上图展示的是书签插件在浏览器上的按钮位置，通过 manifest.json 文件配置的 icon 图标和 default_title 鼠标hover描述。

html和css

插件的html文件，设置弹窗的页面结构，和一般的前端html页面一样，添加页面标签元素、引入js和css文件等等。

基本代码如下：

<!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>

我们的插件html代码中引入了 popup.css 样式文件和 bookmarks.js 脚本文件。

css文件也是一样，与平常我们写前端样式没有区别。

需要注意的是，js代码只能通过引入脚本文件的方式进行处理，不能在html中使用script内嵌脚本，否则会报错。

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

如果使用上述方式增加js代码，则任何代码都不会被执行，并且会有非安全代码错误提示：

另外，也不得请求网络资源类型的js文件。

js

再来看一下js文件中的代码，本质上也与平时写的代码一样，支持es6语法，比如根据id读取页面上的元素，如下代码所示：

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

我们的插件主要处理书签，chrome提供了 bookmarks 对象可以使用：

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

以上代码，即通过 bookmarks 对象的 getRecent 方法，获取到浏览器书签的总数量(这里默认书签总数小于10000，读取最近1万个书签数据)。

上面代码是使用的回调函数的方式获取结果，我们也可以使用 Promise 的方式调用：

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

通过这种方式就可以获取到对应的书签总数量，其他的对书签进行不同的分类、统计最新或最早的书签信息，都可以通过书签对象来处理。

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

通过对书签对象的操作，可以基本完成我们插件对书签的统计和特殊书签的展示功能。

加载插件

到此，简单的书签插件就可以使用了，我们需要把插件代码加载到浏览器中，打开浏览器的扩展程序管理界面。

如上图所以，点击加载已解压的扩展程序按钮，直接加载源代码文件夹，即可完成扩展程序的加载导入。

上图中的 mybookmarks 2.0 就是我们的书签插件，已经顺利加载，就可以使用了。

调试

如果插件可以加载，但部分代码有错误，则会明示错误，可以点击查看：

调试插件代码，也比较简单，在弹窗页面上右键点击检查，就会打开插件页面的开发者工具，和浏览器页面的开发者工具一样，可以进行代码调试工作。

打开的开发者工具，加载的就是弹窗入口页面：

总结

至此，我们的书签插件就开发完成，可以加载到浏览器中使用了。

功能虽然很简单，但也是依据chrome插件开发的各种规范，如果要开发更复杂的功能，就需要查看chrome插件开发规范中提供的各种API。或者使用前端web技术，扩展更多的功能也将是水到渠成的事情。