申请会员ID：ch1no【申请通过】
1、申请ID：ch1no2、个人邮箱：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来执行
### 3.popup js
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来执行
### 5.devtools js
用以开发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的存储空间更大，但是不可以跨设备同步 I D：ch1no
邮箱：1571394785@qq.com
申请通过，欢迎光临吾爱破解论坛，期待吾爱破解有你更加精彩，ID和密码自己通过邮件密码找回功能修改，请即时登陆并修改密码！
登陆后请在一周内在此帖报道，否则将删除ID信息。
ps:内容有些简单了，期待以后有更多分享。
新人报道，感谢审核~~~
页:
[1]