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，直接加页面；

1. "permissions":[

   1. "storage",

   2. "notifications",

   3. "contextMenus"]

翻译案例：permission,background

参考：

Chrome 插件开发_windrainpy的博客-CSDN博客_chrome插件开发

https://www.jianshu.com/p/f8ff391b22ba

Chrome插件开发入门_CShadow7的博客-CSDN博客_谷歌插件开发