1.引言
今天是2023的最后一天，相信过很多小伙伴都去体验人挤人的快乐去了，博主不想被踩成猪脚，但待在家里又清闲无所事事。思来想去决定分享一些自己近来学到的干货。一方面是为了巩固已学的内容和提升自己，另一方面也希望我的分享能给将要接触的小伙伴一些帮助和裨益。
很多前端同学可能都没有听说过浏览器插件，也不知道浏览器插件是干什么的，博主以前听到也是满脸的问号。今年因为AI爆火的缘故，公司为了跟上时代的步伐，避免被新技术的浪潮洗刷掉，老总决定开发一款AI产品，主要涉及APP端和插件（运行在浏览器内的WEB项目，神似微信小程序）。目前两款产品都上线了，APP的全球下载量已超十万+，浏览器插件因为是小众产品，目前有一万+用户。但蚊子腿也是肉嘛，浏览器插件还是有市场的，只要你有想法，一切皆有可能。拿今年爆火的AI插件，某些上架短短半年就积累了一百多万用户，博主本人也是他们的白嫖党之一，哈哈。所以想学浏览器插件开发的同学赶紧行动起来，这个赛道国内开发者进入的还非常少，想让我更新的小伙伴：记得收藏支持点赞，这是我持续更新最大的动力哦！
2.总体规划
- Chrome官方常用的基础知识（基于MV3）
- 国际的主流插件开发文档（讲解和翻译）
- 真实案例实践
- 源码分享
3.起步
3.1 新建一个文件夹（chrome-extension），文件夹下创建一个名叫manifest.json的文件，如下
3.2 在manifest.json中编写js代码
manifest是一个配置文件，包含插件的基础信息和一些功能配置清单，如下配置描述了插件的版本，现在都是3。name是插件的名称，description用来简要说明你的插件是干什么的，version用来描述你自己发布的插件的版本，这些都要写，在插件上架到谷歌浏览器商店的时候要用。
{
"manifest_version":3,
"name":"first extension",
"description":"a wonderful extension",
"version":"1.0.0"
}
3.3加载本地的程序到谷歌浏览器
前面已经写好了一个最简单的插件项目，现在我们尝试将项目加载到浏览器里面
- 打开浏览器，在顶部的地址栏输入：chrome://extensions
- 找到页面的开发者模式：打开选择开关按钮
- 点击：加载已解压的扩展程序,选择文件夹，也就是chrome-extension目录，至此一个最简单的插件已经完成。
3.4 如何将插件固定到浏览器右侧界面
3.5 如何在点击图标时打开弹窗页面
在manifest文件下新增代码aciton,action用来声明扩展程序图标的图片，以及当用户点击扩展程序的图标时，弹出窗口显示的 HTML 页面，目录结构如下：
修改manifest文件的代码：
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "icon.png"
}
}
新增一个hello.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
重新加载资源
右上角的图标已变成我们自己换的图标了，点击这个图标会显示html的内容，到这里一个显示弹出窗口的功能就完成了。
4.如何在浏览器网页上运行JS脚本代码
在manifest中声明js脚本,新增content-scripts，以下代码表示，我们要在百度的网址下面注入一个叫content.js的脚本代码。
{
"manifest_version":3,
"name":"first extension",
"description":"a wonderful extension",
"version":"1.0.0",
"action": {
"default_popup": "hello.html",
"default_icon": "icon.png"
},
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://www.baidu.com/"
]
}
]
}
根目录下创建scripts目录，在此目录下新建content.js文件
// scripts/content.js
const bdSearch = document.querySelector("#form");
bdSearch.remove()
然后我们打开浏览器，重新加载修改后的插件，此时刷新百度的主页面，你会发现神奇的一幕，百度的搜索框不见了，因为我们写了js逻辑，将百度的搜索框删除了。
5.添加后台页
后台页是一个陌生概念，它主要用于承担插件的后台任务和长期运行的逻辑。后台页面通常是一个看不见的页面，本质上是一个js文件，主要是用来监听插件的运行情况并做出一些处理。在manifest下添加以下代码：
{
"manifest_version": 3,
"name": "first extension",
"description": "a wonderful extension",
"version": "1.0.0",
"action": {
"default_popup": "hello.html",
"default_icon": "icon.png"
},
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://www.baidu.com/"
]
}
],
"background": {
"service_worker": "background.js"
}
}
然后创建background.js文件，添加以下代码
console.log("运行了")
chrome?.runtime?.onInstalled?.addListener(({ reason }) => {
if (reason === 'install') {
chrome.tabs.create({ url: "https://www.baidu.com" });
}
});
先移除插件再重新加载插件，在插件安刚装成功后会默认打开百度的网址，当我们点击Service Worker控制台打印：运行了。
以上内容就是插件入门的全部教程，接下来我将更新插件开发的进阶教程，主要涉及一些常用API的使用
原文链接：https://juejin.cn/post/7317957339012399104 作者：yywang
