前言

群里闲逛，看见有人发了个图，感觉还挺有意思，抽空做一下顺带学下谷歌插件开发

这个要是直接写js还是挺容易实现的，就是获取评论的接口数据操作DOM，但是总不能手动f12 cv一下吧，这就需要用到插件了~
demo地址: biibili评论区成分鉴定
官方文档: https://developer.chrome.com/docs/extensions/
本文及Demo 以v3为基础
本文的常用指的是写这个demo用到的几个，并不是指的实际开发的常用!!

manifest.json

https://developer.chrome.com/docs/extensions/mv3/intro/
An extension manifest gives the browser information about the extension, such as the most important files and the capabilities the extension might use. The extension platform features change when there’s a new manifest version.

就是定义插件的脚本，需要的权限等… …

常用配置项

这里只列举写demo 接触到的几个，完整配置项另见 https://developer.chrome.com/docs/extensions/mv3/manifest/

service_worker
定义后台运行的脚本，只能引入一个

 "background": {// Required"service_worker": "background.js",// Optional"type": ...},

options_page
插件的选项页

经我一次偶然F5，发现这个这个是支持刷新的，开始改一下重导一次插件… 其他page应该也一样的

action.default_popup
点击插件图片的弹出界面
content_scripts
这里引入的脚本可用访问页面的DOM，但是JS数据是独立的，可用手动创建script标签引入资源，引入的资源需要在web_accessible_resources 声明
```
"content_scripts": [{ "matches": ["*://*.bilibili.com/video/*"],"js": ["resources-loader.js"]}
],
```
web_accessible_resources
定义可访问的资源
permissions
定义需要的权限，完整权限说明另见 https://developer.chrome.com/docs/extensions/mv3/manifest/

externally_connectable.matches
定义允许通信的网站

"externally_connectable": {"matches": ["*://*.example.com/*"]
},

常用API

// 安装插件触发的事件
chrome.runtime.onInstalled.addListener()// 持久化数据, 需要storage权限, 加个.sync表示同步google账户
chrome.storage
chrome.storage.sync.set({ key: value })
chrome.storage.sync.get({ key: 默认值}, (data) => {})// 网页发送数据的事件
chrome.runtime.onMessageExternal.addListener()

脚本注入

利用content_scripts 动态创建script即可，注意需要在web_accessible_resources声明资源列表
也可以用chrome.scripting.executeScript 注入, 这个需要声明 scripting 权限，
个人感觉还是content_scripts方便

网站与插件通信

https://developer.chrome.com/docs/extensions/mv3/messaging/
这个是单向的，注入的脚本需要插件持久化的数据就可以这么操作

首先在manifest.json声明可以访问的网站， matches 至少两个二级域，不能 *.com

"externally_connectable": {"matches": ["https://*.bilibili.com/*"]
}

网站端

这个ID换个设备就会变，要固定的话可以生成crx包，安装后进入
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\Extensions\插件
%USERPROFILE% 为用户目录
把里面manifast.json的key复制过来，ID就是固定的了

// 插件ID
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";// 第二个参数为通信携带的数据，第三个响应回调
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},function(response) {if (!response.success)handleError(url);});

插件端

不能在content_script.js使用

chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {// request 携带的数据// sender 网站信息// sendResponse 响应数据用})

打包 .crx

选择打包扩展程序，第一次没有私钥直接确定，会生成一个pem文件，第二次再选pem文件就可以打包成crx了

但是不交5美元是不能直接用的(可以改成rar压缩文件解压出来加载)… …

QA

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
- 通信部分写的不对
- manifest.json 没有正确配置 externally_connectable.matches

其他参考链接

[Chrome插件开发]监听网页请求和响应

Chrome 插件开发小记相关推荐

chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
chrome插件开发记录（1）——解决问题“清单文件缺失或不可读”
chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" 参考文章: (1)chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" (2) ...
Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图浏览器页面右键 ...
Chrome插件开发之一: 搭建基本结构
Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构作者:cmdbuf 发布时间:2010年05月28日发表评论 (6) 4阅读评论欢迎喜爱Chrome的谷友 ...
Chrome 插件开发与本地程序交互流程
Chrome 插件开发与本地程序交互流程一. 将本地程序写入注册表可以采用bat的方式写入注册表 REG ADD "HKCU\Software\Google\Chrome\NativeM ...
Chrome插件开发-右键菜单开启页面编辑
开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version版本为3. Chrome插件基本知识 Chrome插件通常由以下几部分组成: manifest.json 该文件为 ...
Chrome插件开发--后台监控网页并自动刷新，点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...
浙大教务网登录验证码自动填充--chrome插件开发
浙大教务网登录验证码自动填充--chrome插件开发一.前言二.验证码图像识别三.chrome插件开发四.插件使用和结果展示五.未来展望六.提示一.前言女朋友说"教务网每次登 ...

Chrome 插件开发小记

文章目录

前言