是否可以在Chrome浏览器中使用扩展来监控HTTP流量?

xxhby3vn  于 2023-03-06  发布在  Go
关注(0)|答案(3)|浏览(304)

我正在尝试编写一个Chrome扩展,它需要监视HTTP流量,以检查是否请求了特定的域,然后基于此做其他事情。
我想保持这一切作为一个单一的扩展,如果可能的话,所以不能使用Fiddler等,我知道FireFox可以做到这一点,因为它在HttpFox,但不确定这是否是允许在Chrome。
谢谢。

elcex8rz

elcex8rz1#

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)

脚本/注入的. 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)
}
dluptydi

dluptydi2#

也许这就是你要找的http://code.google.com/chrome/extensions/trunk/experimental.webRequest.html#examples

5anewei6

5anewei63#

您可以使用Chrome webRequest API来拦截和监控网络请求。此API允许您监听不同的事件:在请求之前、发送标头之前、接收标头时、完成时、在发生错误时。

chrome.webRequest.onBeforeRequest事件侦听器添加到扩展中

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.url.includes("example.com")) {
      // Do something here
    }
  },
  {urls: ["<all_urls>"]}
);

记住在manifest.json文件中声明webRequest权限:

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
],

你也可以尝试一些网络嗅探器,如集成到浏览器中的WebQSEE

相关问题