为什么此代码不起作用?我正在创建Firefox扩展，但代码未运行.但是，如果我将代码粘贴到控制台中，它将起作用 [英] Why is this code not working? I am creating a Firefox extension but the code is not running. But if I paste the code into the console it works

问题描述

我进行了一个firefox扩展，它获取了所有请求URL并显示了它们.但是代码只有在我将其粘贴到控制台的情况下才能起作用.

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.

在扩展程序加载时，它没有显示任何错误，似乎它不会运行

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";

manifest.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纯蓝色"; ，每次都可以正常工作.但是XMLHttpRequest的 open 和 send 方法不起作用.仅当我将代码粘贴到控制台中时有效.

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 代码复制并粘贴到 https中在devTools控制台中://://reactjs.org (这是SPA，因此很容易检查我想要的内容)，并查看所有请求.

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.

我不知道为什么此代码仅在粘贴到控制台后才运行

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

推荐答案

内容脚本在隔离的JavaScript环境中运行，这意味着 window 及其内容与页面隔离，因此在进行修改时，您可以只能修改内容脚本的版本.

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;
}

与Chrome兼容.

Chrome-compatible.

使用DOM脚本在页面上下文中运行代码:说明.

Use a DOM script to run the code in page context: instruction.

在受严格的Content-Security-Policy(CSP)保护的页面上无法使用，该页面会阻止脚本执行，因此在为Firefox编写扩展程序时，应改用 wrappedJSObject 方法.

It won't work on pages protected by a strict Content-Security-Policy (CSP) that prevents script execution so when writing an extension for Firefox we should use wrappedJSObject method instead.

这篇关于为什么此代码不起作用?我正在创建Firefox扩展，但代码未运行.但是，如果我将代码粘贴到控制台中，它将起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！