用 React 开发 chrome 插件

大家好,我是火焱。

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

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

最简 Demo

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

创建插件

  1. 新建空目录 tmp-chrome-ext;
  2. 新建 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"
  }
}
  1. 新建 popup.html
css 复制代码
<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>
  1. 点击下载:ICON,重命名为:popup_extensions.png;

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

加载插件

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

对于简单插件,直接写 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...

相关推荐
Mike_jia10 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind11 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao11 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo11 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽11 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791811 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔11 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖11 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮11 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_7414122411 小时前
大文件上传与文件下载
前端