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)

scripts/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 you stuff HERE.
            }
        } catch (err) {
            console.debug("Error reading or processing response.", err)
        }
    })

    return send.apply(this, arguments)
}

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

2 个答案: