1. tab页
Chrome浏览器是由tab页组成的，一个浏览器实例中可以打开多个tab页。
2. DevTools Window
每个tab页，都可以打开自己的开发者工具窗口，称为DevTools Window。
3. DevTools Page
用户可以通过建立DevTools Page的方式，扩展DevTools Window。
{
"name": "chrome-extension-example",
"version": "1.0",
"minimum_chrome_version": "10.0",
"description": "chrome extension example",
"devtools_page": "devtools.html",
"permissions": [
"http://*/*",
"https://*/*",
"tabs"
],
"manifest_version": 2
}
其中，DevTools Page必须是一个html，但它对用户来说是不可见的。
DevTools Page它引入的js，具有访问DevTools API的能力，
包括，devtools.panels，devtools.inspectedWindow，devtools.network。
4. DevTools Page的生命周期
每次打开DevTools Window的时候，都会重新创建一个DevTools Page实例，
如果DevTools Window关闭了，DevTools Page实例也将销毁。
因此，chrome.devtools.* 这些API，
只有在DevTools Window开启的时候才可以使用。
5. Panel
Panel指的是DevTools Window中的选项卡，
例如，Elements，Console，Network等等。
DevTools Page可以选择是否创建Panel，
每个Panel可以加载自己的html，js和css，且具有和DevTools Page一样的权限。
// 创建一个Panel
chrome.devtools.panels.create(
// title
'chrome-extension-example',
// iconPath
null,
// pagePath
'panel.html'
);
6. Panel的生命周期
Panel只有在第一次被激活的时候，才进行实例化，
同一个DevTools Window中的不同Panel切换时，不会重新加载。
当前tab页刷新时，Panel也不会重新加载。
DevTools Window关闭后，Panel将被销毁。
7. 全局事件问题
Panel和DevTools Page之间可以通过建立持久连接进行通信。
例如，在Panel载入的时候，我们可以用以下方法建立一个连接，
const channel = chrome.runtime.connect(null, {
name: 'channel-name',
});
同时需要在DevTools Page中，监听chrome.runtime.onConnect事件，
chrome.runtime.onConnect.addListener(channel => {
...
});
然而，这是有问题的。
因为，chrome.runtime.onConnect.addListener将监听所有的连接请求，
除了当前tab页的，还有其他tab页的。
因此，如果多个页面都打开了DevTools Window，且激活了Panel，
chrome.runtime.onConnect事件就会触发多次，
而且，由于多个tab页中Panel代码是一样的，因此连接的name也是相同的，
这就很容易产生问题。
例如，如果我们打算在建立连接后，绑定另一个事件，
chrome.runtime.onConnect.addListener(channel => {
// 注册事件监听器，每一个http请求完成后触发
chrome.devtools.network.onRequestFinished.addListener((...args) => {
...
// error: 只能向最后一个连接发消息
channel.postMessage(...);
});
});
原因分析：
（1）虽然chrome.devtools.network.onRequestFinished只能监听当前tab页的http请求，
但是，由于chrome.runtime.onConnect事件触发了多次，
因此，同一个tab页的chrome.devtools.network.onRequestFinished事件也被绑定了多次监听器。
（2）当chrome.devtools.network.onRequestFinished发生时，
每个事件处理函数，都会从闭包内获取channel变量，
由闭包的特性，我们知道，
它一定是最后一个chrome.runtime.onConnect事件发生时的channel。
（3）综合上述两条，我们得知，
当前tab页中每一个http请求结束后，就会向最后一个连接，发送多次消息。
8. 传tabId
chrome.runtime.onConnect全局事件的解决方案是，
让每一个DevTools Page只与当前tab页的Panel建立连接。
首先，Panel在建立连接的时候，要将当前tab页的tabId传给DevTools Page，
const channel = chrome.runtime.connect(null, {
name: chrome.devtools.inspectedWindow.tabId.toString(),
});
由于chrome.runtime.connect第二个参数的name属性要求必须是一个string，
且无法传递其他参数，所以我们将tabId转为string作为name值传给DevTools Page。
然后，在DevTools Page的chrome.runtime.onConnect事件中增加判断条件，
chrome.runtime.onConnect.addListener(channel => {
// 如果连接不是来源于当前tab页，就不使用它。
if (channel.name !== chrome.devtools.inspectedWindow.tabId.toString()) {
return;
}
// 作用域中留下了当前tab页的Panel所建立的连接，只有一个
// 因此，以下事件只绑定了一次
chrome.devtools.network.onRequestFinished.addListener((...args) => {
...
// 通过当前tab页的连接，向Panel发送消息
channel.postMessage(...);
});
});
所以，当chrome.devtools.network.onRequestFinished事件发生时，
只有一个事件处理函数，而且channel变量，也是当前tab页的Panel传过来的。
因此，channel.postMessage(...);就可以向当前tab页的Panel发送消息了。
后记
以上内容是在做一个Chrome DevTools扩展的时候总结的，
该扩展的目的是要劫持当前页面发生的所有http请求，然后发送给指定的服务器。
由于一开始我们不知道Panel中的js与DevTools Page中的js具有同样权限，
所以，只在DevTools Page中监听了chrome.devtools.network.onRequestFinished事件。
然后为了将结果显示在Panel中，我们又不得不研究DevTools Page如何与Panel通信，
最终选择了建立持久连接的方式。
结果就可想而知了，由于chrome.runtime.onConnect可以监听所有tab页的chrome.runtime.connect请求，
我们就踩坑了。
最后想到上面的传tabId的方法。
我们后来知道了，Panel是和DevTools Page具有相同权限的。
就只在DevTools Page中保留了创建Panel的代码，
然后在Panel中监听chrome.devtools.network.onRequestFinished事件，
就完成了这个功能。
网友评论