問題描述

我做了一個(gè) Firefox 擴(kuò)展來獲取所有請求的 url 并顯示它們.但代碼只有在我將其粘貼到控制臺時(shí)才有效.

I make a firefox extension that get all the request url's and displays them. But the code only works if I paste it in the console.

當(dāng)擴(kuò)展程序加載時(shí)它沒有顯示任何錯(cuò)誤，它似乎只是不會運(yùn)行

when the extension loads it doesn't show any error, it seems like it just won't run

這是完整的代碼

xhrScript.js

(function(){

    const proxiedOpen = XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function ( _, url) {
        this.__URL = url;
        return proxiedOpen.apply(this, arguments);
    };

    const proxiedSend = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function () {
        const { protocol, host } = window.location;
        // showing only when it paste in console
        console.log("full request url ", `${protocol}//${host}${this.__URL}`);
        return proxiedSend.apply(this, [].slice.call(arguments));
    };

})();

// this works all times
document.body.style.border = "7px solid blue";

ma??nifest.json

{
    "manifest_version": 2,
    "name": "XHR request urls",
    "version": "1.0",
    "description": "get all the request url's",

    "content_scripts": [
      {
        "matches": ["*://*/*"],
        "js": ["xhrScript.js"]
      }
    ]  
}

如您所見，最后一行是 document.body.style.border = "7px solid blue";，每次都可以正常工作.但是 XMLHttpRequest open 和 send 方法不起作用.僅當(dāng)我將代碼粘貼到控制臺時(shí)才有效.

As you can see, in the last line is document.body.style.border = "7px solid blue";, this works fine every time. But the XMLHttpRequest open and send methods don't work. only works if I paste the code in the console.

如果您想查看示例，可以嘗試將 xhrScript.js 代碼復(fù)制并粘貼到 https://reactjs.org(這是一個(gè) SPA，所以很容易檢查我想要什么)在 devTools 控制臺中，并查看所有請求.

if you want see an example, you can try copy and paste the xhrScript.js code in https://reactjs.org (it's a SPA, so it's easy to check what I want) in the devTools console, and see all the request.

我不知道為什么這段代碼只有在控制臺粘貼時(shí)才會運(yùn)行

I don't know why this code only runs when it is pasted in console

推薦答案

內(nèi)容腳本在隔離的 JavaScript 環(huán)境中運(yùn)行，這意味著 window 及其內(nèi)容與頁面隔離，因此當(dāng)您修改它時(shí)，您只修改內(nèi)容腳本的版本.

Content scripts run in an isolated JavaScript environment meaning that window and its contents are isolated from the page so when you modify it, you only modify the content script's version.

有兩種解決方案:

1. Firefox 專用.

1. Firefox-specific.

使用 wrappedJSObject 和 exportFunction 訪問頁面上下文(更多信息):

Use wrappedJSObject and exportFunction to access the page context (more info):

const urls = new WeakMap();
const origXhr = hookPagePrototype('XMLHttpRequest', {
  open(method, url) {
    urls.set(this, url);
    return origXhr.open.apply(this, arguments);
  },
  send() {
    console.log('Sending', new URL(urls.get(this), location).href);
    return origXhr.send.apply(this, arguments);
  },
});

function hookPagePrototype(protoName, funcs) {
  const proto = wrappedJSObject[protoName].prototype;
  const oldFuncs = {};
  for (const [name, fn] of Object.entries(funcs)) {
    oldFuncs[name] = exportFunction(proto[name], wrappedJSObject);
    proto[name] = exportFunction(fn, wrappedJSObject);
  }
  return oldFuncs;
}