背景
Chrome瀏覽器提供了擴展功能，
我們可以寫自定義的腳本，來制作Chrome extension。
除此之外，Chrome開發(fā)者工具也是可以擴展的，
我們可以制作自己的devtool，還可以在Elements工具中添加自定義的側邊欄。
本文只介紹Chrome extension。
文件結構
下面我們來新建一個精簡的Chrome extension，
用來獲取頁面中所有發(fā)起的http請求，然后打印在控制臺上。
目錄如下：
chrome-extension-example
├── manifest.json
├── index.html
├── index.js
└── background.js
（1）manifest.json
{
"name": "chrome-extension-example",
"version": "1.0",
"minimum_chrome_version": "10.0",
"description": "chrome extension example",
"devtools_page": "index.html",
"background": { "scripts": ["background.js"] },
"permissions": [
"http://*/*",
"https://*/*"
],
"manifest_version": 2
}
（2）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./index.js"></script>
<script src="./background.js"></script>
</head>
<body>
</body>
</html>
（3）index.js
// chrome extension中不能使用console.log
// 所以，需要通過發(fā)送請求給后臺腳本的方式來打印日志
const log = (...args) => chrome.extension.sendRequest({
tabId: chrome.devtools.tabId,
args,
});
// 注冊回調，每一個http請求響應后，都觸發(fā)該回調
chrome.devtools.network.onRequestFinished.addListener(async (...args) => {
try {
const [{
// 請求的類型，查詢參數(shù)，以及url
request: { method, queryString, url },
// 該方法可用于獲取響應體
getContent,
}] = args;
log(method, queryString, url);
// 將callback轉為await promise
// warn: content在getContent回調函數(shù)中，而不是getContent的返回值
const content = await new Promise((res, rej) => getContent(res));
log(content);
} catch (err) {
log(err.stack || err.toString());
}
});
注：
本例中這樣注冊http請求的回調是有問題的。
我們知道async函數(shù)將返回一個promise，那么，在后一個請求觸發(fā)回調的時候，
前一個請求的async回調函數(shù)可能還沒有resolved。
為了演示方便，本例特意忽略了這個問題，
但這會導致log(content);比較亂，并不一定是按順序打印的，
而且，還有可能前一個請求的log(content);，
會在后一個請求的log(method, queryString, url);之后打印出來。
類似場景串行化的處理方式，可以參考：
promise-executor
（4）background.js
// 注冊回調，當收到請求的時候觸發(fā)
chrome.extension.onRequest.addListener(({ tabId, args }) => {
// 在給定tabId的tab頁中執(zhí)行腳本
chrome.tabs.executeScript(tabId, {
code: `console.log(...${JSON.stringify(args)});`,
});
});
安裝
在Chrome瀏覽器中，打開以下url，
chrome://extensions/
勾選第一行的“開發(fā)者模式”，然后點擊“加載已解壓的擴展程序...”，
選中我們上文中創(chuàng)建的目錄chrome-extension-example，確定，安裝成功。
參考
Getting Started: Building a Chrome Extension
Extending DevTools
Sample Extensions: devtools.network
Github: andrewn/firephp-chrome
