用 React 开发 chrome 插件

大家好，我是火焱。

日常开发中，经常需要转换色值，每次需要转换时（比如 rgb(255, 255, 255) 转换成 #FFFFF），都要打开网页找一款在线转换工具，操作链路比较长。如果有一款 chrome 插件可以用来转换就比较方便了，插件市场翻了一下，没找到，于是自己搞了一个，实现逻辑不难，就不过多解释了，重点放在如何开发一款插件上。

本文你会收获： 1、插件的结构； 2、用 React 开发插件；

最简 Demo

下面的代码来自 chrome 官网，菲常简洁，只需要一个 manifest.json 和 popup.html 就能跑起来。

创建插件

新建空目录 tmp-chrome-ext；
新建 manifest.json 文件，粘贴如下内容：

json 复制代码

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

新建 popup.html

css 复制代码

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

点击下载：ICON，重命名为：popup_extensions.png；

到此，我们的插件就开发完了，接下来添加到 chrome 上。

加载插件

chrome 浏览器打开页面：chrome://extensions
开启开发者模式
加载已解压扩展程序
点击插件就能看到插件的页面了

对于简单插件，直接写 html 问题不大，如果插件复杂点开发成本就变高了。既然插件实际上就是"前端页面"，那能不能用 React 来开发呢？后来发现了一款受欢迎的模版。

React 开发插件

有了上面的基础认识，这里就不介绍运行模版的过程了，按照官网操作即可操作流程，我们来看一下模版中的几种页面。

popup

点击插件后弹出

Newtab

顾名思义，就是在打开新 tab 时展示

Devtools & Panel

打开 devtools 工具时展示，其中 Devtools 目录是用来创建面板，Panel 是面板的内容

Options

选项页面

下面的 Content 和 Background 其实不属于页面，主要是脚本。

Content

插件注入到页面的脚本，可以调用有限的 chrome 插件 API，网络请求收到同源策略限制。

Background

可以调用全部的 chrome 插件 API，实现跨域请求、网页截屏、弹出 chrome 通知消息等功能。

发布插件

直接加载已解压插件比较繁琐，可以把插件发布到 chrome 商店，但是发布插件需要账号，注册账号需要 5 美元注，如果需要注册，可以参考这篇文章使用支付宝开通 ChatGPT plus ，购买个虚拟卡。

总结

有了 React 插件模版，已经很大程度上降低了插件的开发门槛了，如果可以提供 cli 定制功能（比如我只需要 popup 页面）会更好。

如果本文对你有启发，欢迎点赞、评论。

参考

github.com/lxieyang/ch...

developer.chrome.com/docs/extens...

juejin.cn/post/711495...