chrome插件开发官方文档：https://developer.chrome.com/docs/extensions/mv3/
chrome扩展程序调试地址：chrome://extensions/ （注意：需要打开开发者模式）
chrome应用商店：https://chrome.google.com/webstore/category/extensions
chrome插件其实就是使用前端语法+调用chrome浏览器的API开发的，所以我们必须得了解chrome浏览器的API以及文件结构。
步骤1： 启用开发者模式
在chrome浏览器中，打开扩展程序页面chrome://extensions/，启用开发者模式，如图所示：
image.png
步骤2: 创建插件清单文件manifest.json
manifest.json清单文件此JSON文件描述插件的功能和配置，是必须配置的，位于项目根目录
2.1 基本配置
image.png
{
"manifest_version": 3, 插件版本，现在都用3了，后面就会不再支持版本2
"name": "Hello Extensions", 插件名称
"description": "Base Level Extension", 插件描述
"version": "1.0", 插件开发版本
}
2.2 action : 声明插件图标和点击后展示的页面
{
...
"action": {
"default_popup": "hello.html", 点击扩展图标时，弹出的HTML页面
"default_icon": { 用于指定插件在不同位置的默认图标
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}，
"icons": { 当用户在 Chrome Web Store 中浏览插件或在安装插件时看到插件的图标时，会使用 icons 指定的图标
"128": "icons/icon128.png",
"48": "icons/icon48.png",
"16": "icons/icon16.png"
},
}
image.png
2.3 声明内容脚本content_scripts，这个也是manifest.json很重要的一点
{
...
"content_scripts": [
{
"js": ["scripts/content.js"], 内容脚本路径
"matches": [
"https://developer.chrome.com/docs/extensions/*", 需要插入内容脚本的网址
]
}
]
}
注意：matches里面匹配的网址后面要带*，除非你只在这个网站某个固定网址使用，否则都加*，不然会出现content.js加载失败，无法插入到该网站中，如果要支持所有网站，则设置"matches": ["<all_urls>"]
2.4 service_worker : 在后台监听浏览器事件（service_worker是特殊的javascript环境，加载它处理事件并在不需要时终止）
{
...
service_worker: "scripts/background.js"
}
2.5 host_permissions: 插件可以与特定主机进行通信、访问和修改网页内容
{
...
"host_permissions": [
"https://example.com/*",
"http://www.example.org/",
"https://api.example.net/"
]
}
例如我们需要在service_worker.js文件中获取某个网站缓存的数据，则首先需要在清单文件中“host_permissions”声明该网站，然后才能获取，如下所示
chrome.runtime.onInstalled.addListener(() => {
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
chrome.tabs.get(tabId, async(updatedTab) => {
const url = new URL(updatedTab.url);
if (url.hostname === 'example.com') {
// 在控制台打印存储的数据
const data = await chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
return {
userInfo: sessionStorage.getItem('userInfo'),
};
}
});
if(data && data.length){
userInfo = JSON.parse(data[0].result.userInfo);
}
}
});
});
});
步骤3: 开发插件功能
根据插件的需求，创建相应的 HTML、CSS 和 JavaScript 文件，
使用 JavaScript 编写插件的逻辑和功能。您可以通过 DOM 操作、事件处理和与chrome API 的交互来实现所需的功能。
image.png
步骤4: 加载和调试
加载插件：首先在chrome浏览器地址栏输入chrome://extensions/开发扩展程序页面，点击左上角的“加载已解压的扩展程序”，把自己本地的文件夹直接导入进去，如下图所示。
image.png
调试service_worker.js文件
image.png
调试popup.js文件
鼠标点击插件，点击右键菜单会出现“审查弹出内容”，即可进行调试
image.png
调试content_script.js文件
打开manifest.json中配置content_script对应的网站地址，F12打开调试，如果下方出现了你开发的插件名称以及文件，则代表你的页面成功插入该网站，在console中即可进行调试
image.png
步骤5: 打包和发布插件
chrome中也支持自己打包文件，打包之后生成后缀为.crx的文件，然后把.crx结尾的插件导入到浏览器，但是未发布的插件，开关无法打开，一直处于置灰状态，导致无法使用，查看详情才知道Chrome 只允许使用 Chrome 应用商店中发布的扩展程序
相关说明文档如下：https://support.google.com/chrome_webstore/answer/2811969?visit_id=638279384706503272-341708265&p=ui_remove_non_cws_extensions&hl=zh-Hans&rd=2
注册以及发布流程如下：
chrome应用商店点击注册，就会看到如下图所示。首先同意左侧的开发者协议和政策，然后去支付注册费5美元进行注册。
image.png
这个注册支付，不能用国内的银行卡以及信用卡，要用Visa卡，没有的话也没关系，可以直接去淘宝买一个。
chrome应用商店注册成功之后，先把本地文件压缩为.zip格式，点击上传即可（最多支持发布20个插件）。
image.png
上传成功后，需要你填写一些关于插件相关信息，填写完整之后右上角的“提交审核”按钮才会高亮，然后就能提交审核了。
注意chrome插件的公开范围越广，审核时间越长。
image.png
常用的chrome API
chrome.runtime:
提供与插件运行时环境交互的功能，包括管理插件的生命周期、发送消息、注册事件监听器等。
chrome.extension:
这个 API 已被废弃，不推荐使用。它提供了一些与插件相关的功能，例如获取插件的 URL、向页面注入脚本等。相应的功能可以使用 chrome.runtime 替代。
chrome.tabs:
允许与浏览器标签页进行交互，包括获取当前标签页信息、打开新标签页、切换标签页、执行脚本等。
chrome.windows:
允许与浏览器窗口进行交互，包括获取当前窗口信息、打开新窗口、切换窗口、调整窗口大小等。
chrome.storage
提供持久化存储功能，用于在插件中保存和检索数据，包括使用chrome.storage.local
进行本地存储和 chrome.storage.sync 进行跨设备同步。
chrome.runtime.sendMessage
用于在插件组件之间发送消息，可以实现不同组件之间的通信和数据传递。
chrome.runtime.onMessage
注册消息监听器，用于接收其他组件发送的消息，并进行相应的处理。
chrome.browserAction
允许在浏览器工具栏中创建图标按钮，并定义与按钮相关的交互行为，例如点击按钮时打开弹出窗口或执行特定操作。
chrome.contextMenus
允许在浏览器右键菜单中添加自定义菜单项，并定义菜单项的点击行为。
chrome.webRequest
允许拦截和修改网络请求，包括请求的头部、URL、响应内容等，以实现网络请求的修改和过滤。
chrome.notifications
允许在操作系统通知区域显示通知，以向用户发送系统级别的提示和提醒。
chrome.identity:
提供身份验证和用户信息相关的功能，例如使用 OAuth2 进行用户身份验证。
网友评论