chrome插件开发
chrome 插件的控制能力
除了支持传统的一切 web API、JavaScript API 以外，chrome插件额外支持以下API（chrome.xxx）：
浏览器窗口（chrome.window）
tab标签（chrome.tabs）
书签（chrome.bookmark）
历史（chrome.history）
下载（chrome.download）
网络请求（chrome.webRequest）
各类事件监听？
自定义右键菜单（chrome.contextMenus）
开发者工具扩展（chrome.devtool）
插件管理（chrome.extension）
————————————————
版权声明：本文为CSDN博主「windrainpy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/windrainpy/article/details/104883252
2. background
在后台一直运行的脚本或页面；
生命周期最长，随着浏览器打开而打开，随着浏览器关闭而关闭；
几乎可以调用所有的 chrome API（除了 devtools），而且它可以无限跨域；
没有界面
3. content_scripts
请注意，我们不需要使用jQuery来检查文档是否已加载。默认情况下，Chrome在DOM完成后注入content.js。
可以访问页面的DOM，但不能访问页面里的JS环境对象
不能访问大部分的 chrome API，除了下面几种：
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) 这是？？？
chrome.i18n 国际化
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage) 访问配置文件，本页url
chrome.storage 访问本地存储
这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用
————————————————
4. popup
- popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互，或者作为一个需要频繁操作的快捷入口。
- 可以通过default_popup字段来指定popup页面，也可以调用setPopup()方法。
- 由于单击图标打开popup，焦点离开又立即关闭，所以popup页面的生命周期一般很短，需要长时间运行的代码千万不要写在popup里面。
- 在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
配置页面：options_page
options_page：顶级配置，用于设置右击插件的option(选项)页面的展示。
{
...
"options_page": "options.html"
...
}5. 五种JS之间的消息通信（比较关键！）
- popup和background其实几乎可以视为一种东西，因为它们可访问的API都一样、通信机制一样、都可以跨域。
1. popup 访问 background：
popup 可以直接调用 background 的JS方法，也可以直接访问background的DOM：
// popup.js
let bg = chrome.extension.getBackgroundPage()
bg.xxx() // 访问bg的方法
console.log(bg.document.title) // 访问BG的DOM
2. background 访问 popup：（前提是popup已经打开）：
// background.js
let views = chrome.extension.getViews({type: 'popup'})
if (views.length) {
console.log(views[0].document.title)
}
3. popup 或 background 主动向 content 发送消息
网上有很多老代码用的是 chrome.extension.onMessage，没有搞清楚 chrome.extension 和 chrome.runtime 之间的区别，可能只是别名。建议统一使用 chrome.runtime。
popup或background发信息用：chrome.tabs.sendMessage(id,message,cb)
chrome.runtime.onMessage.addListener(fn)
// popup.js 或 background.js
function sendMessageToContent (message, callback) {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, message, (response) => {
if (callback) callback(response)
})
})
}
sendMessageToContent({action: 'test', data: '你好，我来自popup！'}, (response) => {
console.log('来自content的回复:', response)
})
// content.js 接收
chrome.runtime.onMessage.addListener((request, sender, senderResponse) => {
if (request.action === 'test') {
console.log(request.data)
}
senderResponse('我收到了你的消息---来自content')
})
4. content 主动向 popup 或 background 发送消息。注意事项：
content 向 popup 主动发送消息的前提是 popup 必须打开，否则需要利用 background 作中转；
如果 background 和 popup 存在多个地方监听，那么他们都可以同时收到消息，但只有一个可以 senderResponse，一个先发送了，另外的就无效了。
content发送用chrome.runtime.sendMessage(message,cb)
pop和background接受用chrome.runtime.onMessage.addListener
// content.js
chrome.runtime.sendMessage({data: '你好，我来自content'}, (response) => {
console.log('收到来自后台的回复：', response)
})
// background.js 或 popup.js
chrome.runtime.onMessage.addListener((request, sender, senderResponse) => {
console.log('收到来自content的消息')
console.log(request, sender, senderResponse)
senderResponse('我来自后台，我已收到你的消息')
})
5.嵌入页面的JS 与 content 之间
（待续。。。暂未发现使用场景）
主要通过window.postMessage和window.addEventListener来实现二者消息通讯。
6. 简单了解：event_pages
鉴于background生命周期太长，长时间挂载后台可能会影响性能，所以Google又弄一个event-pages，在配置文件上，它与background的唯一区别就是多了一个persistent参数：
{
"background": {
"scripts": ["event-page.js"],
"persistent": false
}
}
它的生命周期是：在被需要时加载，在空闲时被关闭，什么叫被需要时呢？比如第一次安装、插件更新、有content-script向它发送消息，等等。
7. 有待深入：injected-script，涉及到消息通讯
使用场景：因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "做的一次简单测试",
"version": "1.0",
"permissions": ["https://secure.flickr.com/"],
"browser_action": {
"default_icon": "icon.png",
// 我的理解：这个popup.html和background.js冲突，
//配置了default_popup，那么background就不会起作用
"default_popup": "popup.html",
"default_title": "Google Mail"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": [""],
"js": ["jquery.js", "content.js"]
}
],
"homepage_url": "http://baidu.com/"
}
十四、更便捷地注入代码executeScript
之前实现的browserAction插件，在任何界面上都可以使用，而为了实现仅针对特定页面的插件，第8节引入了pageAction功能。
content_scripts里面可以做限制，background里面的scripts可以执行js,不能操作dom,popup.js里面可以执行js，可以操作dom。
chrome_url_overrides：新标签页:newtab，历史记录页面:history，书签页:bookmarks，直接加页面；
-
"permissions":[
-
"storage",
-
"notifications",
-
"contextMenus"]
-
翻译案例：permission,background
参考：
Chrome 插件开发_windrainpy的博客-CSDN博客_chrome插件开发
https://www.jianshu.com/p/f8ff391b22ba
Chrome插件开发入门_CShadow7的博客-CSDN博客_谷歌插件开发