作者：Curly_Brackets
链接：juejin.cn/post/702265…
说的直白一点，就是拿着浏览器开放的能力（插件 API），去实现一些小型应用。
浏览器插件主要由四部分构成：background scripts、content scripts、全局 UI 元素、options page。
-
background scrips: 后台脚本，一个后台脚本是一个独立线程，是游离于各个页面之外的“上帝之眼”。具有访问各类插件 API 的能力，但同时也丧失了直接操作页面的能力；
-
content scripts：内容脚本，具有直接操作页面的能力。其实就是在页面中运行 js 脚本，可以使用 DOM API。
content script只能直接访问少量插件 API，但能和background script进行双向通信完成数据交换； -
全局 UI 元素：浏览器层的 UI 交互，包括
- 在 Toolbar 显示 icon，定义点击 icon 后显示的 Popup 或其他效果
- 增加右键选项
- 增加全局快捷键
- 改造新 Tab 页、历史记录页、书签页
-
options page：插件配置页
浏览器插件的核心机制可以用下图简单概括
想必，大家最好奇的还是有哪些 API 以及能用这些 API 做什么，这里例举几个：
-
contextMenus：增加右键选项- 使用选中文本，例如：划词翻译、文本收集
- 快速调用插件功能，例如：打开 DevTool，页面剪藏
-
cookies：增删改查 cookie（任意域名），直接拿着本地 cookie 发送请求，不必再做授权。同时由于后台脚本不是 Web 页面，在发送请求时没有跨域限制。：- 多平台信息聚合
- 多平台信息分发
-
devtools.panels：增加 Devtool 面板，这个对前端开发者来说应该很熟悉，React Developer Tools、Vue.js devtools -
notifications：浏览器通知，未打开页面的情况下进行通知，可以辅助一些工具类应用 -
storage：全局保存数据，可跟随浏览器账户同步
这里例举的只是我常用的一些，只是沧海一粟，更多 API 可以查阅
浏览器插件就简单介绍到这里，如果有兴趣继续了解，推荐三家的文档：
作者：Curly_Brackets
链接：juejin.cn/post/702265…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
