1、申请ID：ch1no
2、个人邮箱：1571394785@qq.com
3、原创技术文章
关于Chrome插件开发的教程及自己开发过程中的经验总结
一.简介
Chrome是后缀名为crx格式的文件，用以在chromium内核的浏览器上提供扩展功能，因此Edge,Chrome以及国内众多基于Chromium的浏览器都可以使用这种方式开发的插件，目前国内开发文档相对较少，有较古老的360浏览器翻译过的版本https://open.se.360.cn/open/extension_dev/overview.html
二．项目结构
Chrome插件没有较为严格的结构要求，只要求在根文件目录下有一个manifest.json的文件用以描述插件的名称，权限，介绍等基础功能
三．从零开始创建一个chrome插件
在根目录下新建mainifest.json
{
"name": "__MSG_title__", //插件的名称
"icons": { //插件的图标，对应不同大小
"16": "logo16.png",
"48": "logo48.png",
"128": "logo128.png"
},
"description": "__MSG_pluginDesc__",//插件的描述
"version": "1.0",//插件的版本号
"manifest_version": 3, //manifest文件的版本号2已经被淘汰，不能使用
"permissions": //插件需要的权限
"tabs",
"storage"
],
"action": {//插件的动作
"default_popup": "popup.html",//被点击时打开popup.html
"default_title": "Hello Extensions"//鼠标移动上图标的描述
},
"background": {//下文介绍background.js
"service_worker": "js/background.js"
},
"host_permissions": [//允许在什么域名使用
"http://*/*",
"https://*/*"
],
"content_scripts": [//content_scripts
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"js/jquery-1.11.1.min.js",
"js/jquery.danmu.min.js",
"js/content.js"
],
"run_at": "document_end",//脚本在什么时候运行
"all_frames": true//是否允许插件在iframe中运行
}
],
"default_locale": "zh_CN"//默认语言
}
在项目的根目录下新建popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
</head>
<body>
<h1>popup</h1>
</body>
</html>
可实现最简单的效果
四.5种类型的JS对比
Chrome插件的JS主要可以分为这5类：injected script、content-script、popup js、background js和devtools js
1.injected script
injected script是在页面中注入的脚本，可以通过chrome.tabs.executeScript()来执行，也可以通过manifest.json中的content_scripts来执行(通常不使用)
2.content-script
content-script是在页面中注入的脚本，可以通过chrome.tabs.executeScript()来执行，也可以通过manifest.json中的content_scripts来执行
popup js是在popup.html中执行的js，可以通过manifest.json中的action来执行,当插件被点击时，会打开popup.html，然后执行popup.js
4.background js
background js是生命周期最长的js，当浏览器启动时，会执行background.js，当浏览器关闭时，background.js才会关闭，可以通过manifest.json中的background来执行
用以开发chrome的开发者工具，可以在开发者工具中添加自己的功能，比如在console中添加自己的功能，或者在elements中添加自己的功能，这里不做介绍
五.权限
共有
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
是经常用到的权限，在manifest.json中的permissions中添加
六.消息传递
不同的js之间可以通过消息传递的方式来传递消息，比如popup.js向background.js传递消息，background.js向content.js传递消息
| injected-script |
content-script |
popup-js |
background-js |
| injected-script |
- |
window.postMessage |
- |
- |
| content-script |
window.postMessage |
- |
chrome.runtime.sendMessage |
chrome.runtime.connect |
chrome.runtime.sendMessage chrome.runtime.connect |
| popup-js |
- |
chrome.tabs.sendMessage chrome.tabs.connect |
- |
chrome.extension. getBackgroundPage() |
| background-js |
- |
chrome.tabs.sendMessage chrome.tabs.connect |
chrome.extension.getViews |
- |
七.开发过程中的经验总结
1.如何获取iframe中的dom
需要在manifest.json中的content_scripts中添加all_frames:true
2.在chrome插件中是严格js模式
3.本地存储
chrome插件中的本地存储可以通过chrome.storage来实现，chrome.storage是一个异步的API，因此需要使用回调函数来获取数据
// 读取数据，第一个参数是指定要读取的key以及设置默认值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
console.log(items.color, items.age);
});
// 保存数据
chrome.storage.sync.set({color: 'blue'}, function() {
console.log('保存成功！');
});
注意：chrome.storage.sync是云端存储，chrome.storage.local是本地存储，chrome.storage.sync的存储空间更小，但是可以跨设备同步，chrome.storage.local的存储空间更大，但是不可以跨设备同步
发表于 2023-2-27 17:20
发表于 2023-3-4 19:59
收藏
淘帖
有用
分享到朋友圈
