写chrome插件前必须要知道的
介绍billion是什么意思
浏览器插件本质上就是利⽤前端的html\css\javascript等技术，借⽤浏览器对外提供的API，实现各种不同的功能
插件组成
⾸先先看⼀下我们要开发的插件的各个⽂件组成
manifest.json ：我们在项⽬的根⽂件必须要有⼀个命名为manifest.json的⽂件，它是整个插件的功能⼊⼝，⽤来告诉浏览器插件的⼀些基本信息，及需要加载和执⾏的资源⽂件等，⾥⾯包含⼀些必填项：
name 插件的名字
version 插件版本
manifest_version manifest的版本
description 插件的描述(选填)
{
"name": "hello extension",
"description": "Ba Level Extension",
"version": "1.0",
"manifest_version": 2,
}
复制代码
icons 在扩展程序管理界⾯，呈现的图标，可以设置不同的尺⼨的选项，⽤来适配不同的场景
{
"icons": {
"16": "images/extension_icon16.png",
"32": "images/extension_icon32.png",
"48": "images/extension_icon48.png",
"128": "images/extension_icon128.png"
},
}
复制代码
background 在扩展程序被开启时，会⾸先触发执⾏background 选项中指定的js资源，并且⼀直存在于扩展程序的整个⽣命周期，直到扩展程序被关闭或者删除，background⼀直被⽤来做任务和状态的控制管理⼯作
// scripts ⼦选项指定了需要执⾏的js⽂件的路径及⽂件名
discuss的用法{
"background": {
"scripts":["background.js"],
"persistent": fal
}
}
复制代码
background.js 通常最外层使⽤监听事件Installed.addListener(()=>{})初始化插件，监听插件安装成功后，会触发对应的逻辑开始⼯作
permissions 属性值为⼀个数组，申请chrome API的权限，只有在这个选项中申请了才能使⽤（⽐如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、设置插件激活规则（declarativeContent）、类似localStorage的存储（storage）等）
{
"permissions": [
"/api"
"tabs",
"activeTab",
"notifications",
"declarativeContent",
"storage"
],
}
复制代码
与⽤户实现UI交互的功能主要有两个：browr_action、page_action 两者选择其中⼀个browr_action 提供的功能⾯向所有⽹站，插件图标⼀直是激活的状态
{
"browr_action": {
"default_popup": "popup.html" // 指定click插件图标时，展⽰的页⾯
"default_icon": "images/icon.png", // 指定浏览器⼯具栏展⽰的插件的图标
"default_title": "display tooltip" // 当⿏标悬浮在插件图⽚上⽅时，展⽰的⽂字，叫tooltip；如果没有这个配置选项，则悬浮时显⽰menifest.json中的name选项 }
}
复制代码
page_action 只针对对应⽬标⽹站提供的功能，插件会在background页设置激活插件的规则，只有满⾜条件的⽹页的插件才是激活
的，其他⽹站插件是不可⽤的，插件的icon是灰的 在background script⾥，Installed.addListener(()=>{})初始化中使⽤chrome.declarativeContent定义插件被激活的规则
{
"page_action":{
"default_popup": "popup.html", // 指定click插件图标时，展⽰的页⾯
"default_icon": "hello_extension.png" // 指定浏览器⼯具栏展⽰的插件的图标
"default_title": "display tooltip"
},
}
复制代码
Installed.addListener(function() {
// Replace all rules ...
veRules(undefined, function() {
// With a new rule ...
PageChanged.addRules([
{
// That fires when a page's URL contains a 'g' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' }, //url的内容中包含字母g的，插件才会被激活
})
],lrh
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]
);
});
});
复制代码
popup.html
popup.html 是使⽤browr_action或者page_action 指定的default_popup选项，表⽰点击插件图标会触发的html资源，其与普通的html页⾯的区别就是不能使⽤内联script，其他都⼀样 it can contain links to stylesheets and script tags, but does not allow inline JavaScript.
Content Script 对当前web页⾯注⼊扩展程序代码，也就是在当前web页⾯的上下⽂环境中，可以访问页⾯的DOM信息并且修改DOM，具有操作Chrome API的权限，并且可以把信息传递给⽗级插件
1. content script⼯作在⼀个独⽴的空间，它使得不会访问和调⽤web page或者其他content script中定义的变量和函数，两者唯⼀共
享的是DOM
2. Content Script与Page action 或Browr action通信的⽅式是通过传递Message的⽅式，正确的机制应该是：
1. Page action 或Browr action 中的js使⽤chrome.tabs.ndMessage()发布⼀个请求信息，传递出去当前的tab页id及其他信
息
2. 注意：从Page action 或Browr action发布消息到Content Script必须⽤chrome.tabs.ndMessage()，从Content Script
发布简单的信息到Page action 或Browr action 可以使⽤chrome.runtime.ndMessage()
chrome.tabs.ndMessage(
tabs[0].id, //当前激活的tab页id
{greeting: "hello"}, //需要传递的信息
function(respon) { //⽤来接收反馈的回调函数
console.log(respon.farewell);
});
复制代码
1. Content Script完成初始化，设置Message().addListener()监听事件，等待另⼀侧请求信息的发布
Message.addListener(
function(request, nder, ndRespon) {
console.log(nder.tab ?
任何时候
"from a content script:" + nder.tab.url :
"from the extension");
if (ing == "hello")
ndRespon({farewell: "goodbye"});
});
复制代码
fake pass1. Content Script将信息通过Message发布订阅的⽅式，发布出去
2. Page action 或Browr action 中的js chrome.tabs.ndMessage()最后⼀个参数是⼀个回调函数，⽤来接收另⼀侧反馈回来的
数据，最后同步到UI上
chrome.tabs.ndMessage()
复制代码
3. Content script有两种注⼊⽅式：编程式动态注⼊、声明式注⼊
4. 编程式动态注⼊：获取activeTab权限后，使⽤uteScript()来注⼊js代码⽚段，使⽤chrome.tabs.inrtCSS()注⼊css
代码⽚段
//manifest.json
{
"name": "My extension",
...
"permissions": [美籍华人怎么翻译
"activeTab"
],
}
复制代码
在Page action 或Browr action 中的js中实⾏编程式动态注⼊content script，其访问和更改的就是web page上的DOM属性
```js
Message.addListener(cooper union
function(message, callback) {
if (message == “changeColor”){
uteScript({
code: 'document.body.style.backgroundColor="orange"'
});
}
});
specify什么意思
// 你也可以注⼊⼀个⽂件
Message.addListener(
function(message, callback) {
if (message == “runContentScript”){
uteScript({
file: 'contentScript.js'
});
}
});
复制代码
5. 声明式注⼊，在manifest.json中使⽤content_scripts来定义
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["*./*"],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
生活大爆炸第一季15
],
...
}
复制代码
matches：必填 数组，⽤来匹配注⼊Content Script的页⾯地址。可以使⽤通配符来指代：'*'指代任意
长度字符；'?'指代单个字符css：选填 数组，在页⾯的任何DOM创建和展⽰之前，按照数组中定义的顺序，依次注⼊
js：选填 数组，按照数组中定义的顺序，依次注⼊
run_at：Content Script注⼊的时机
如果是document_start, ⽂件将在所有CSS加载完毕，但是没有创建DOM并且没有运⾏任何脚本的时候注⼊
如果是document_end，则⽂件将在创建完DOM之后，但还没有加载类似于图⽚或frame等的⼦资源前⽴刻注⼊
如果是document_idle，浏览器会在document_end和发出load事件之间的某个时机注⼊。具体的时机取决与⽂档加载的复杂度，为加快页⾯加载⽽优化
{
"content_scripts" : [{
"matches" : ["*://*/*"],
"js" : ["content.js", "jquery.js"],
"css" : ["style.css"],
"run_at" : "document_end"
}],
}
复制代码
options_page 设置插件的选项页⾯，配置了此选项后，在插件上⿏标右键时，会有⼀个‘选项’按钮，点击后会进⼊options_page 对应的页⾯
{
"options_page":"options.html"
}
复制代码
chrome_url_overrides 设置可替换的chrome默认页⾯
newtab：新建标签时打开的页⾯
bookmarks：书签页⾯
history：历史记录
{
"chrome_url_overrides":{
"newtab": "newTab.html"
}
}
复制代码
常⽤到的Chrome API
chrome.tabs
1. ate(object createProperties, function callback) 创建新的标签。注： ⽆需请求manifest的标签权限，此⽅法也
可以被使⽤。 Parameters createProperties ( object )
2012浙江高考英语1. windowId ( optional integer ) 创建新标签的⽬标窗⼝。默认是当前窗⼝ 。
2. index ( optional integer ) 标签在窗⼝中的位置。 值在零⾄标签数量之间。
3. url ( optional string ) 标签导航的初始页⾯。完整的URL 必须包含⼀个前缀 (如 '', 不能写为 '')。 相对 URL
则与扩展所在的页⾯相对， 默认值为新标签页⾯。
4. lected ( optional boolean ) 标签是否成为选中标签。默认为true。
5. pinned ( optional boolean ) 标签是否被固定。默认值为fal。
6. callback ( optional function )
Callback function 回调 参数 应该如下定义：
function(Tab tab) {...}; tab ( Tab ) 所创建的标签的细节，包含新标签的ID。
2. uteScript(integer tabId, object details, function callback) 向页⾯注⼊JavaScript 脚本执⾏ Parameters
