1. Chrome DevTools Extension

剛看到的時候，我也覺得很神奇，
因為React Developer Tools和其他Chrome Extension不同，
它居然出現在了Chrome開發者工具欄中，和原生的DevTools一樣強大。
例如，可以審查元素，檢視元素的屬性，等等。

比起普通的Chrome Extension，Chrome DevTools Extension可以訪問更多API，例如，
（1）devtools.inspectedWindow
（2）devtools.network
（3）

2. 背景 & 基本概念

在某一具體專案中，有一個這樣的需求，
我們需要選擇頁面中發起的http請求，然後將它們儲存到資料庫中。

由於頁面發起的請求可能會發往不同的伺服器，所以在伺服器端解決這個問題就顯得比較麻煩，
而編寫一個Chrome DevTools Extension會更簡單直接。

下文我將這個功能的核心抽離出來，作為一個例子，來還原Chrome DevTools Extension的編寫方法。
為此，我們先熟悉幾個基本的概念。

（1）tab頁

Chrome瀏覽器是由tab頁組成的，一個瀏覽器例項中可以開啟多個tab頁。

（2）DevTools Window

每個tab頁，都可以開啟自己的開發者工具視窗，稱為DevTools Window。

注意，每個tab頁都有自己獨立的DevTools Window，
只是切換tab頁的時候，只會顯示當前tab頁的DevTools Window。

（3）DevTools Page 和 Panel

下面我們來建立一個Chrome DevTools Extension專案，目錄結構如下，

chrome-devtools-extension-example
├── devtools.html    // DevTool Page
├── devtools.js      // DevTool Page中引用的js
├── manifest.json    // 入口
├── panel.html       // 開發者工具欄選項卡頁面
└── panel.js         // 選項卡頁面中引用的js

其中manifest.json是入口，它會宣告一個對使用者不可見的DevTools Page。
在本例中為devtools.html，

{
  "name": "PageRecorder",
  "version": "1.1.0",
  "minimum_chrome_version": "10.0",
  "description": "Record all http requests in a page.",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

DevTools Page對使用者是不可見的，如果需要在開發者工具欄中建立新的DevTool選項卡，
還需要在DevTools Page使用一下方法來建立，DevTool選項卡，官方稱為Panel。
原生的Panel包括，Elements，Console，Network，等等。

// 建立一個Panel
chrome.devtools.panels.create(

  // title
  'ChromeDevToolsExtensionExample',

  // iconPath
  null,

  // pagePath
  'panel.html'
);

以上，我們在DevTool Page中建立了一個新的Panel，名字為ChromeDevToolsExtensionExample。

其中，panel.html，我們只是簡單的寫了一個Hello World!。
值得注意的是，每個Panel都可以載入自己的html，js和css，且具有和DevTools Page一樣的許可權。

（4）Panel的生命週期

Panel只有在第一次被啟用的時候，才進行例項化，
同一個DevTools Window中的不同Panel切換時，不會重新載入。
當前tab頁重新整理時，Panel也不會重新載入。

DevTools Window關閉後，Panel將被銷燬。

因此，我們要想使用Chrome DevTools Extension，就必須先開啟開發者工具視窗，
然後再啟用我們新建的DevTools Panel。

3. 監聽請求

上文我們提到了，Chrome DevTools Extension可以訪問devtools.network API，
現在我們來展示使用chrome.devtools.network.onRequestFinished.addListener來獲取請求。
為此，我們新建了一個panel.js檔案，並在panel.html中引用它。

// Chrome DevTools Extension中不能使用console.log
const log = (...args) => chrome.devtools.inspectedWindow.eval(`
    console.log(...${JSON.stringify(args)});
`);

// 註冊回撥，每一個http請求響應後，都觸發該回調
chrome.devtools.network.onRequestFinished.addListener(async (...args) => {
    try {
        const [{
            // 請求的型別，查詢引數，以及url
            request: { method, queryString, url },

            // 該方法可用於獲取響應體
            getContent,
        }] = args;

        log(method, queryString, url);

        // 將callback轉為await promise
        // warn: content在getContent回撥函式中，而不是getContent的返回值
        const content = await new Promise((res, rej) => getContent(res));
        log(content);
    } catch (err) {
        log(err.stack || err.toString());
    }
});

以上就是panel.js的完整內容了，我們還需要做以下幾點說明，

（1）Chrome DevTools Extension中，不能直接使用console.log，
所以本例中使用了devtools.inspectedWindow API中的chrome.devtools.inspectedWindow.eval方法，
在當前審查的視窗中直接求值一段js程式碼，從而間接實現列印日誌的功能。

（2）與獲取http請求的method，queryString，url不同的是，
我們需要呼叫getContent方法來獲取http響應體，
並且，getContent是一個高階的非同步函式。

所謂高階函式，指的是，它接受一個回撥函式作為引數getContent(content=>{ })，
這個回撥函式的引數content，才是對應http請求的響應體。

所謂非同步，指的是，當回撥函式還沒觸發的時候，getContent就已經返回了。
這也導致了事件監聽函式，也不得不具有非同步性。

（3）由於事件監聽函式是非同步的，
所以，有可能在上一個onRequestFinished事件還未處理完的情況下，
下一個onRequestFinished的監聽函式就又被觸發了。

這就導致了，以上例子中，log(method, queryString, url);和log(content);，
可能是亂序列印的。

總結

到此為止，我們最簡版的Chrome DevTools Extension示例已經介紹完了，
以下是可以執行的原始碼地址：github: chrome-extension-example
（注：不是master分支，而是simply分支。

Chrome擴充套件遵循一種優秀的設計原則，
那就是在設計系統的時候，應該想辦法讓擴充套件對使用者而言，與原生功能平權。
這種對稱性，會拉近原生與擴充套件之間的距離，從而讓系統架構從一開始就建立在靈活的基礎之上。