截至文章发布，chrome插件规范有v3和v2版本。我这里主要讲v2版本，他们改动不大，主要是manifest.json调整。
完整代码https://github.com/IOL0ol1/GetResponse
我们都能够在网上查到不少资料了。
不了解的可以先看看前置资料，个人认为对我这种只有c/c++/c#开发经验100%js新手来讲，我看的前置资料：
举个例子，我的插件是针对百度写的，
只要要打开浏览器，插件是启用状态，后台脚本就开始运行了。
我点击插件图标，弹窗弹出，触发弹窗脚本运行。
关闭弹窗，弹窗脚本结束
浏览器新建标签页A访问了百度，A页面的内容脚本和注入脚本开始运行。
浏览器新建标签页B访问了百度，B页面的内容脚本和注入脚本开始运行。
关闭标签页A，A页面的内容脚本和注入脚本结束运行。
关闭标签页B，B页面的内容脚本和注入脚本结束运行。
关闭浏览器或禁用插件，后台脚本结束。
后台脚本可以监听一些全局事件，而且可以发起跨域访问(全局的东西，没有域就不存在跨域，哈哈)。
内容脚本结合注入脚本主要处理当前页面，可以和后台脚本通讯。
当然，这篇文章我是打算投原创的，所以主要写自己遇到的实际应用场景和解决方案：
我需要通过插件获取网页请求的响应数据，而且不能重复请求，即安装插件之后和之前，浏览器的请求数量不应发生改变（插件需要对后端透明）。
因为要获取响应的body数据，所以基本思路就是通过content script 向当前页面注入 injected script 监听页面的请求和响应数据。但是存在两种 XMLHttpRequest 和 fetch 两种js请求操作，我需要监听这两种请求，所以下文会细说具体操作，我们可以根据应用场景选用。
我的方案是将监听之后的响应数据发送到content script，这部分可以根据实际需要修改。
injectedXhr.js代码：
(function (xhr) {
var XHR = XMLHttpRequest.prototype;
var open = XHR.open;
var send = XHR.send;
XHR.open = function (method, url) {
this._method = method;
this._url = url;
return open.apply(this, arguments);
};
XHR.send = function (postData) {
console.log('xhr request:', this._method, this._url, postData);
this.addEventListener('load', function () {
// sessionStorage['key'] = JSON.stringify(response); // 插件需要添加'storage'权限
// document.cookie
// localStorage['key']
window.postMessage({ type: 'xhr', data: this.response }, '*'); // 将响应发送到 content script
});
return send.apply(this, arguments);
};
})(XMLHttpRequest);
代码如下（示例）：
(function () {
let origFetch = window.fetch;
window.fetch = async function (...args) {
const response = await origFetch(...args);
console.log('fetch request:', args);
response
.clone()
.blob() // 此处需要根据不同数据调用不同方法，这里演示的是二进制大文件，比如音频
.then(data => {
// 对于二进制大文件可以创建为URL(blob:开头)，供其它脚本访问
//sessionStorage['wave'] = URL.createObjectURL(data); // 插件需要添加'storage'权限
window.postMessage({ type: 'fetch', data: URL.createObjectURL(data) }, '*'); // send to content script
})
.catch(err => console.error(err));
return response;
}
})();
以上两段代码存储为 injected.js，下文中我们将它注入到页面。
需要注意manifest.json文件的设置，需要将注入到页面的文件设置为web_accessible_resources
permissions如果有需要的权限也需要设置好
"content_scripts": [
{
"matches": [
"*://*.yourweb.com/*"
],
"js": [
"./content.js"
],
"run_at": "document_start",
"all_frames": true
}
],
"web_accessible_resources": ["injected.js"]
"permissions": [
"cookies",
"storage",
"<all_urls>"
]
content.js文件中将injected.js文件注入到页面中。
console.log('content script start');
// inject injected script
var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function () {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
// receive message from injected script
window.addEventListener('message', function (e) {
console.log('content script received:' , e.data.type, e.data.data);
});
一点点笔记，目前刚接触js，不是特别了解，很多语言层面的特性不是很会，计划是之后转到ts上。
顺便吐槽js真是个屎坑。require/import这种c(#include)都有的模块引用机制还得到es6才添加到语言层面。
很多语言层面应该支持的东西，都要通过库来曲线实现，整个一填坑史。