本文是「浏览器插件开发实战」系列文章的第一篇，从零介绍如何开发 Chrome 插件，主要面向前端开发人员，只需掌握最基本的 HTML、CSS 和 JavaScript 知识，即可快速上手。

说通俗一点：前端开发，就是吃浏览器的饭。

话糙理不糙，近些年 Web 技术迅猛发展，很多需求开始采用 Web 的方式进行开发，从而造就了大量的前端岗位。无论是开发 admin 管理后台，小程序，还是 App 里面的 H5 活动页，甚至是 Electron 开发的桌面应用，都在前端技术的范畴之内。

前端从业人员，不能把自己局限在使用 Vue 或 React 框架来写页面，应该再往下深入一层，对浏览器有更深入的了解，例如：多进程架构、事件循环、v8 引擎等。而学习开发浏览器插件就是一个很好的切入点，不仅能快速将自己的想法快速落地成产品，还能夯实前端技术，提升自身的市场竞争力。

什么是 Chrome 插件？

插件用于增强 Chrome 浏览器的功能，提升用户使用体验，包括：

效率工具（例如：番茄时钟、多语言翻译）
丰富网页内容（例如：去广告、网页增加护眼背景）
信息聚合（例如：展示网站热门文章）

优秀 Chrome 插件案例

TodoList

用户只需要点插件的 icon 图标，就能够弹出网页浮窗，可以快速处理任务：

稀土掘金

当用户打开新标签页的时候，会默认打开掘金的聚合页面，内容包括热点文章、 GitHub trends 和快捷工具等。

JSON Formatter

用于格式化 JSON 的插件，把 JSON 文本按照树状结构展示，用户还可以折叠对象：

为什么学习开发 Chrome 插件

在 Chrome 应用商店当中有成千上万的浏览器插件供用户选择，由于 Chrome 在浏览器市场有高达 63% 的市场份额，这意味着 Chrome 本身就自带流量，以 Google 翻译为例，有 3700 万的用户在使用：

你可能会说：这是官方插件，安装的人自然很多。其实在 Chrome 市场中，超过百万用户级别的插件比比皆是，以最近火热的 AI 领域为例，很多 GPT 相关的插件，在短时间内就能达到 100 万用户。

最令人兴奋的是：开发浏览器插件和开发 web 页面几乎一模一样 。都是用 HTML、CSS、JavaScript 和 Web platform API 完成的，本质区别在于：浏览器插件不仅可以用浏览器提供的全部 JavaScript API，还可以用 Chrome API。Chrome API 提供了一些增强能力，例如：

修改网站行为（在用户访问的网站上注入插件自己的代码）
跨网站整合信息（聚合能力）
为 Chrome DevTools 添加新特性（例如 React DevTools 等）

有了 Chrome API，前端开发简直如虎添翼。

如何开发 Chrome 插件？

这里为大家展示开发一个 Hello World 版本的浏览器插件有多么的简单，只要四个文件即可，其目录结构如下：

sh 复制代码

├── hello.html
├── hello_extensions.png
├── manifest.json
└── popup.js

其中 manifest.json 是配置文件，所有 Chrome 插件必须有这个，就像每个前端 npm 包都要有 package.json 一样，它的内容如下：

json 复制代码

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

其中各字段含义：

name：插件名称
description：插件描述
version：用户的插件版本
manifest_version：插件使用的 manifest.json 文件版本，最新的版本号是 3
action：控制 popup 插件的配置

- default_popup：默认的 popup 页面路径，这里指定为 hello.html
- default_icon：默认的插件 icon

hello.html 文件内容为：

html 复制代码

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

就是普通的 HTML 页面，里面引用了 popup.js，里面内容如下：

js 复制代码

console.log('This is a popup!')
chrome.action.getUserSettings().then(v => console.log(v))

当用户点击工具条上的 Hi 图标时，会打开一个弹窗，里面加载 hello.html：

在这个弹窗上面右击，选择「检查」打开插件控制台，可以看到 popup.js 代码的执行结果：

其中第二行就是调用 chrome.action.getUserSettings 方法拿到的结果，这个 API 就是 Chrome 插件提供的，用于获取当前插件的用户设置，如果 isOnToolbar 为 true 的话，说明用户是将插件固定在工具栏上面的，否则就是收在扩展下拉菜单里面的。

总结

看到这里，你是不是已经开始蠢蠢欲动了？市场有了，技术也会了，就差一个优秀的 idea 了。别急，本文只是 Chrome 浏览器插件系列当中的第一篇，这里面涉及到的知识点也只是其中一小部分，接下来会为大家进行连载更多更有深度的文章，精彩内容不错过，欢迎关注+收藏！

浏览器插件开发实战——开篇