> 本文将详细介绍如何开发一款Chrome插件，包括插件的介绍、开发配置与调试。不包含插件的发布、审核等内容。通过阅读本教程，你能够： - 了解浏览器器插件，这里专指 Chrome Extension（**CE**）的基本知识和运行原理 - 了解如何开发**CE**的界面和逻辑 - 调试插件，根据错误信息做出修复 ## 什么是浏览器插件浏览器插件是一种可增强网页功能的嵌入程序。有了插件，用户的使用不再局限于网页，还可以享用插件带来的增强功能。用户只需到官方插件商店搜索、下载、安装即可使用，非常便捷。 *插件商店由不同的浏览器厂商维护*，比如你要在Chrome上使用插件，要到[Chrome Webstore](https://chrome.google.com/webstore/category/extensions)下载安装。Firefox上亦然。 ## 创建 manifest 新建文件夹,命名`CE-Demo`，增加一个`manifest.json`的文件，内容如下： ```js { "name": "CE-Demo", "description": "CE-Demo's description shows here!", "version": "0.0.1", "manifest_version": 3 } ``` 该文件描述了插件的基本属性信息、代码的运行路径等。后面我会不断地丰富其内容。 ### 加载插件这里我们直接载入整个目录（尚未打包）： 1. 地址栏输入`chrome://extensions`进入插件管理页面。 2. 选中界面右上角的**开发者模式** 3. 点击左上角的**加载已解压的扩展程序**，并选中刚才的插件文件夹 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc74cb41a6794334842f2614f624ff8f~tplv-k3u1fbpfcp-watermark.image?) 插件已经成功载入。可以点击`扩展程序按钮`，鼠标移动到插件右侧的**固定**按钮，固定到标签栏里。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b275c1f950e42f8865f0f7d81484ea4~tplv-k3u1fbpfcp-watermark.image?) 标签栏多了个icon图标，点击可唤出插件的popup界面： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9326c38d2a8a423aa4826f883ae8a976~tplv-k3u1fbpfcp-watermark.image?) *插件不会热更新，记得每次修改代码后点击刷新icon载入最新代码* ## 添加功能我们将实现一个简易版的`历史记录`插件。 ### 注册 background.js 它是一种后台脚本，浏览器会在插件安装或重新加载时扫描它并初始化(事件的监听等)。它是整个插件的重要组成部分。必须在`manifest`里配置。 ``` { "name": "CE-Demo", "description": "I am a demo", "version": "0.0.1", "manifest_version": 3, "background": { "service_worker": "background.js" } } ``` 同时在插件目录添加`background.js`文件，包含以下代码： ```js chrome.runtime.onInstalled.addListener(() => { console.log('后台脚本运行成功！') chrome.storage.sync.set({ history: [] }); }); ``` 代码将在插件安装完毕后，做两件事： 1. 打印一段日志信息 2. 通过[storage](https://developer.chrome.com/docs/extensions/reference/storage/) API 设置一个初始值为空数组的存储字段。要使用storage，需在`manifest`添加该权限： ``` { ... "permissions": ["storage"] ... } ``` 点击`server worker`链接打开devtools界面，即可看到日志信息： ![截屏2022-07-20 18.48.37.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abd8381410e8457a9fa92e276cfb5fdf~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50c3e4cad3ef4214a2ff37865c1e9fec~tplv-k3u1fbpfcp-watermark.image?) ### 添加历史界面这里，我们选择popup的交互形式：当用户点击标签栏里插件图标时展示用户的访问历史（仅含插件安装后的历史）。我们需要覆盖默认的popup界面，修改`manifest`: ```js { ... "action": { "default_popup": "popup.html" }, ... } ``` 在插件目录新增三个文件：`popup.html`、`popup.js`、`popup.css`: ```html

暂无浏览记录～

``` ```js chrome.storage.sync.get("history", ({ history }) => { const contentHTML = history.length === 0 ? "暂无浏览记录～" : history .map((record) => { return `

${record.time}

${record.title}

`; }) .join(""); document.querySelector('#container').innerHTML = contentHTML }); ``` 上述代码先从storage里读取`history`内容，再将内容组装成html插入到文档中。 ### 记录浏览历史插件提供了内容脚本 Content Scripts（**CS**）的概念，当用户打开并访问某个网站时，浏览器将**CS**注入网站的文档里执行。因此，我们需在**CS**脚本里编写记录的逻辑。往`manifest`里添加**CS**: ``` { ... "content_scripts": [ { "matches": ["*://*/*"], "js": ["content/index.js"] } ] } ``` 插件目录里新增目录`content`并添加`index.js`文件： ```js 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 }); }); ``` 上述代码获取访问的页面的 **标题**，**url**,**访问时间**存储到 `storage`里。随便访问几个网页后，点击插件图标可以看到： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50e561ded96f4d0f8a0ac17ece0fe19b~tplv-k3u1fbpfcp-watermark.image?) ## 添加自定义icon 默认icon比较简陋，我们用一张熊猫图片作为插件的icon。新增`assets`目录，放一个`icon.png`文件。修改`manifest`: ```json { "action": { "default_icon": { "16": "/assets/icon.png" } } } ``` ![截屏2022-07-20 20.59.34.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/939724ada62e4487b4b36f658390af62~tplv-k3u1fbpfcp-watermark.image?)