前言

由于一些原因，研究了下chrome如果去捕獲http請(qǐng)求的response結(jié)果蚣驼，遂記錄下來(lái)忍燥。

// manifest.json
{
  "manifest_version": 2,
  "name": "<插件名稱(chēng)>",
  "version": "1.0.0",
  "description": "zhiniao extension",
  // 會(huì)一直常駐的后臺(tái)JS或后臺(tái)頁(yè)面
  "background": {
    "scripts": [
      "js/jquery.min.js",
      "js/background.js"
    ]
  },
   // 權(quán)限申請(qǐng)
  "permissions": [
    "tabs",
    "activeTab",
    "contextMenus",
    "storage",
    "webRequest",
    "debugger",
    "<all_urls>"
  ],
  // 需要直接注入頁(yè)面的JS
  "content_scripts": [
    {
      "js": [
        "js/jquery.min.js",
        "js/content-script.js"
      ],
      // "<all_urls>" 表示匹配所有地址
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
             // 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"隙姿，最后一個(gè)表示頁(yè)面空閑時(shí)梅垄，默認(rèn)document_idle
            "run_at": "document_start"
    }
  ],
// 普通頁(yè)面能夠直接訪(fǎng)問(wèn)的插件資源列表，如果不設(shè)置是無(wú)法直接訪(fǎng)問(wèn)的
  "web_accessible_resources": ["js/inject.js"],
  // 插件的圖標(biāo)
  "icons": {
    "16": "imgs/icon.png",
    "32": "imgs/icon.png",
    "64": "imgs/icon.png",
    "128": "imgs/icon.png"
  },
  "omnibox": {
    "keyword": "<keyword>"
  },
  // devtools頁(yè)面入口输玷，注意只能指向一個(gè)HTML文件队丝，不能是JS文件
  "devtools_page": "devtools.html"
}

由于Chrome DevTools extensions不支持console.log，所以使用以下方式來(lái)進(jìn)行console.log的操作：

const log = (...args) =>
  chrome.devtools.inspectedWindow.eval(`
    console.log(...${JSON.stringify(args)});
`)

目前chrome.devtools方法只適用于devtools和panel中

// 注冊(cè)回調(diào)欲鹏，每一個(gè)http請(qǐng)求響應(yīng)后机久，都觸發(fā)該回調(diào)
chrome.devtools.network.onRequestFinished.addListener(async (...args) => {
    try {
        const [{
            // 請(qǐng)求的類(lèi)型，查詢(xún)參數(shù)赔嚎，以及url
            request: { method, queryString, url },

            // 該方法可用于獲取響應(yīng)體
            getContent,
        }] = args;

        log(method, queryString, url);

        // 將callback轉(zhuǎn)為await promise
        // warn: content在getContent回調(diào)函數(shù)中膘盖，而不是getContent的返回值
        const content = await new Promise((res, rej) => getContent(res));
        log(content);
    } catch (err) {
        log(err.stack || err.toString());
    }
});