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