是否可以使用扩展程序监控 Chrome 中的 HTTP 流量？

Question

我正在尝试编写一个 Chrome 扩展程序，它需要监视 HTTP 流量以检查是否请求了特定域，然后基于此执行其他操作。

如果可能的话，我想将其全部保留为单个扩展，因此不能使用 Fiddler 等。我知道 FireFox 可以像在 HttpFox 中那样做到这一点，但不确定 Chrome 是否允许这样做。

谢谢。

Answer 1

也许这就是您正在寻找的： http://code.google.com/chrome/extensions/trunk/experimental.webRequest.html#examples

Answer 2

chrome.webRequest 很有帮助，但它不允许您在 Chrome 中阅读响应正文。

我制作了一个扩展程序，它使用由内容脚本注入页面的脚本来拦截所有 Web 请求。我的例子在这里：https://github.com/onhello-automation/onhello/tree/main/app/scripts。

我使用https://stackoverflow.com/a/48134114/1226799 来帮助编写此内容，但我更正了其中的一些问题并对其进行了简化。

一些相关部分：

manifest.json

    "content_scripts": [
        {
            "matches": [
                "https://example.com/*"
            ],
            "run_at": "document_start",
            "js": [
                "scripts/content_script.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "scripts/injected.js"
    ],
    "permissions": [
        "https://example.com/*"
    ]

scripts/content_script.ts（我使用 webextension-toolbox 构建并将 TypeScript 编译为 JavaScript）

import { browser } from 'webextension-polyfill-ts'

// You can use `browser`/`chrome` here and interact with extension stuff like storage and tabs.

const s = document.createElement('script')
s.src = browser.extension.getURL('scripts/injected.js')
s.onload = async function () {
    (this as any).remove()
};
(document.head || document.documentElement).appendChild(s)

脚本/injected.js：

// You CANNOT use `browser`/`chrome` here and you CANNOT interact with extension stuff like storage and tabs.

const XHR = XMLHttpRequest.prototype

const open = XHR.open
const send = XHR.send
const setRequestHeader = XHR.setRequestHeader

XHR.open = function () {
    this._requestHeaders = {}

    return open.apply(this, arguments)
}

XHR.setRequestHeader = function (header, value) {
    this._requestHeaders[header] = value
    return setRequestHeader.apply(this, arguments)
}

XHR.send = function () {
        
    this.addEventListener('load', function () {
        const url = this.responseURL
        const responseHeaders = this.getAllResponseHeaders()
        try {
            if (this.responseType != 'blob') {
                let responseBody
                if (this.responseType === '' || this.responseType === 'text') {
                    responseBody = JSON.parse(this.responseText)
                } else /* if (this.responseType === 'json') */ {
                    responseBody = this.response
                }
                // Do your stuff HERE.
            }
        } catch (err) {
            console.debug("Error reading or processing response.", err)
        }
    })

    return send.apply(this, arguments)
}