Chrome插件（
Chrome Extension），是一个基于事件小型软件程序，它是更底层浏览器功能扩展，能根据个人需要定制属于自己的浏览器，修改或增强浏览器功能，比如捕捉/修改特定的网页内容，用户的浏览动作，捕捉HTTP报文，屏蔽一些广告等等
技术栈
基于Web技术，会使用HTML,JavaScript,CSS即可开发,插件单独运行在一个沙箱环境中，通过浏览器提供的API来来访问浏览器本身的一些特性（如拦截，修改网络请求）
一个扩展由几个相关连的组件组成：
-
background.js是运行在(service worker)后台的脚本,生命周期和浏览器一致，一般放置全局代码;提供一些全局配置, 事件监听, 业务转发等。比如定义右键的菜单 -
content-script.js注入脚本，可以向页面注入js、css等资源这里就可控制页面中的DOM -
popup点击插件图标后弹出的窗口，需自定义,相当于一个网页，会有对应的js,html,一般用它来处理一些简单的用户交互和插件说明。 -
Manifest.json项目配置文件必须放在根目录,上方的组件必须要在此文件中注册才能使用
开发入门
一个项目必须要有Manifest.json文件，打开Chrome拓展的开发这模式 将它拖入即可
icon 图片设置
首先所有图片需要在Manifest.json中注册，且图片只支持png格式
1.工具栏icon 在 action下的default_icon配置
"action": {
"default_icon": {
"16": "/image/01.png",
"32": "/image/02.png",
"48": "/image/03.png",
"128": "/image/04.png"
}
}
2.扩展程序中选项卡icon 通过 icons 配置
"icons": {
"16": "/image/01.png",
"32": "/image/02.png",
"48": "/image/03.png",
"128": "/image/04.png"
}
popup 弹框开发
Manifest.json中注册
"action": {
"default_popup": "popup.html",
}
页面通信
如需访问chrome API 需要在 Manifest.json 中注册才能调用成功
获取当前标签页的信息
- 需获取
activeTab权限
"permissions":["activeTab"]
- 在
popup.js中使用
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
向页面注入方法
- 需获取
scripting权限
"permissions":["scripting"]
- 在
popup.js中使用
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
