简介
什么是扩展？chrome文档给的定义是 自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制 Chrome 的功能和行为。
它们基于 Web 技术（ HTML，JavaScript 和 CSS）构建。为了开发简单，本次使用React+Vite+ Manifest V3 开发。接下来本人就用浅薄的知识简略的说下如何开发chrome插件。
入门教程
开发
每个插件都存在以下必要的文件
①manifest.json可以理解为插件的配置文件
{
"name": "chrome-extension-react",
"version": "1.0",
"description": "chrome-extension-react",
"manifest_version": 3,
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
② background.js 该脚本在插件安装、运行、卸载阶段都在后台执行。所以可以用来做一些监听操作
{
"name": "chrome-extension-react",
"version": "1.0",
"description": "chrome-extension-react",
"manifest_version": 3,
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "background.js"
}
}
// 安装的时候触发 弹出文字
chrome.runtime.onInstalled.addListener(() => {
alert('installed...')
})
③ popup.html点击插件图标的时候的弹出页面
{
"name": "chrome-extension-react",
"version": "1.0",
"description": "chrome-extension-react",
"manifest_version": 3,
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_icon": "images/icon-16.png",
"default_popup": "popup.html"
}
}
<html lang="en">
<head>
<title>example</title>
</head>
<body>
Hello world
</body>
</html>
最终的目录结构大概这样
安装使用
① 打开chrome浏览器的开发者模式
② 加载已解压的扩展程序，选择上面建的文件夹
tips: 可以直接安装crx后缀格式的文件，不过现在不上架chrome商店的扩展这样安装使用不了，故直接加载文件夹
调试
关于background.js的调试点击这里打开控制台
关于popup.html的调试点击这里打开控制台（或者右击弹出页，检查）
如何使用React开发？
我们都知道React的内容都是渲染到一个dom上的，那么我们可以吧index.html作为扩展插件的popup.html，其余js文件使用chrome官方提供的Content scripts插入
为了方便，我们基于Vite官方提供的react脚手架进行修改
下载脚手架
yarn create vite chrome-extension-react --template react-ts
修改脚手架
vite.config.ts 配置如下
export default defineConfig({
plugins: [react()],
build: {
outDir: 'extension',
rollupOptions: {
output: {
chunkFileNames: 'static/[name].js',
entryFileNames: 'static/[name].js',
assetFileNames: 'static/[name].[ext]',
},
}
}
})
为了与react开发的网站dom不冲突，把root改为 root-独一无二的随机数
为了不样式污染，把类app改为app-独一无二的随机数
生成随机数的函数
// 获取唯一标识
const getUuid = () => {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
};
以上两个问题可能有更好的解决方案，目前我是这么干的。
增加public文件夹，存放扩展相关的文件
最终manifest文件大概这样
{
"name": "chrome-extension-react",
"version": "1.0",
"description": "chrome-extension-react",
"manifest_version": 3,
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "scripts/background.js",
"type": "module"
},
"action": {
"default_icon": "images/icon-16.png",
"default_popup": "index.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["static/index.css"],
"js": ["static/index.js"]
}
]
}
在src/App/index.jsx目录下开发弹出页
总结
简易的开发流程就是以上，一些定制功能所需要的Api大家就直接去查文档。
上面的代码我也上传github了，需要可以自取。
参考文档
