文章目录
一、manifest.json
注意：json 文件中不允许使用注释！
这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。
其中，manifest_version、name、version 3个是必不可少的，description和icons是推荐的。
1.1 name 插件的名字
1.2 version 插件的版本
1.3 manifest_version 清单文件的版本
- manifest_version: 清单文件(Json)的版本，这个必须写，而且必须是2
1.4 description 插件描述
```javascript
{
"name":"Peng Gang's first Plug-in",
"version":"1.0.0",
"manifest_verson":"2",
"description":"这是我的第一个Chrome插件"
}
1.4 icons 设置图标的图片
2.2 有讲如何将我们插件安装到扩展程序面板
"icons":{
"16":"image/tools.png",
"32":"image/tools.png",
"128":"image/tools.png"
}
效果:
二、content_scripts
所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS
最常见的比如：广告屏蔽、页面CSS定制，等等。
例：
{
// 需要直接注入页面的JS、css
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_start"
}
],
}
特别注意，如果没有主动指定run_at为document_start（默认为document_idle），下面这种代码是不会生效的：
document.addEventListener('DOMContentLoaded', function()
{
console.log('我被执行了！');
});
- addEventListener(参数1，参数2) 方法用于向指定元素添加事件句柄。
参数一：必须。字符串，指定事件名。
参数二：必须。指定事件触发时执行的函数。
详细介绍参考:菜鸟教程 - DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
注意：它和load方法功能上很相似，但却又有细微的差别：
load:应该仅用于检测一个完全加载的页面。 - 区别:页面的load事件会在DOMContentLoaded被触发之后才触发,也就是DOMcontentLoaded早于load
content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。
content-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种：
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。
2.1 matches 设置匹配url的规则
如果要匹配所有网页，可以使用 all_urls
{
"name":"Peng Gang's first Plug-in",
"version":"1.0.0",
"manifest_version":2,
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["index.js"]
}
]
}
index.js
alert('我的插件里边的index.js');
如果满足条件就执行js里边的文件
2.2 加载我们的插件
1、打开 设置-更多工具-扩展程序
2、打开开发者模式
3、选择 加载已解压的扩展程序
然后我们随便进入一个网站测试以下
效果:
可以发现我们的插件成功执行!
匹配所有bilibili开头的url,
"content_scripts":[
{
"matches":["https://www.bilibili.com/*"],
"js":["index.js"]
}
]
注意：每次修改过manifest.json文件后我们都要重启一下插件
三、broswer_action 与 page_action
-
browser_action 是浏览器右边的小按钮图标 一直存在
例如：
![在这里插入图片描述]()
-
page_action 是内置到浏览器url里边的小按钮 只有在匹配某些特定的网页时才显示
例如：
![在这里插入图片描述]()
3.1 default_icon 设置图标的图形
"browser_action":{
"default_icon": "image/tools.png"
}
效果:
3.2 default_title 鼠标悬停时的文字
"browser_action":{
"default_icon": "image/tools.png",
"default_title": "作者:疯狂的地球人"
}
效果:
3.3 default_popup 点击弹出框
几乎所有的插件点击过后都有一个页面弹出，类似这种:
那这是怎么制作出来的呢？这时候就该我们的 default_popup 出场了！
-
default_popup 可以设置当用户点击按钮过后显示的页面(例3.3)
-
popup可以包含任意你想要的HTML内容，并且会自适应大小。可以通过default_popup字段来指定popup页面，也可以调用setPopup()方法。
需要特别注意的是，由於单击图标打开popup，焦点离开又立即关闭，所以popup页面的生命周期一般很短，需要长时间运行的代码千万不要写在popup里面。 -
在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
例3.3：
"browser_action":{
"default_icon": "image/tools.png",
"default_title": "作者:疯狂的地球人",
"default_popup": "popup.html"
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
span{
color: white;
font-size: 20px;
background: linear-gradient(to right,red,purple);
white-space: nowrap;
}
</style>
</head>
<body>
<span>
CSDN:疯狂的地球人出品
</span>
</body>
</html>
效果：
3.3.1 default_popup 打开的文件不能直接写js文件。
在 default_popup打开的文件中，不能直接在script 标签中写脚本。只能使用引入的方式使用js文件。
例如：
四、permissions 声明需要使用到的API
官网API接口说明：Chrome API Permission
声明要使用那些API：
例如：
"permissions":["tabs"],
五、background.js
up主:只要你打开浏览器，它就是会执行。
"background":{
"scripts":["background.js"]
"persistent": false
},
}
background.js
chrome.browserAction.onClicked.addListener(function(){
//chrome.tabs.create({url:"https://www.baidu.com"});
chrome.tabs.create({url:"popup.html"});
});
上面这段代码的作用是监听 browser_acction 的点击事件，当发生点击事件的时候，调用chrome的API tabs 创建一个指定目录的标签页。
注意：browser_action 的default_popup 方法的优先级高于这个接口
5.1 persistent 开启状态
Persistent background pages：一直开启
需要时开启，可通过将persistent设置为false来设置
开启时机：
- 首次安装或更新完版本时
- 触发特定事件时
- content script 向其发送消息时
- 其他页面（例如popup）调用runtime.getBackgroundPage时