覆盖 Chrome 扩展的 XMLHttpRequest 原型

Question

I am trying to intercept all XMLHttpRequests with my extension and I can currently do it to some extent but it does not work fully. I know about webRequests but it does not let me edit the post/get data unlike with the current code below. I can run this code

Inject.js

(function(){
    console.log("Injected Send")
    var proxiedSend = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        console.log(this, arguments );
        return proxiedSend.apply(this, [].slice.call(arguments));
    }
})();
(function(){
    console.log("Injected Open")
    var proxiedOpen = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function() {
        console.log(this, arguments );
        return proxiedOpen.apply(this, [].slice.call(arguments));
    };
})();

Inside my content script and it will log the "Injected Send" and "Injected Open". I have tested this code and it behaves weirdly.

If you run this code below in the console you would see that it works at intercepting the request but it won't work on any XMLHttpRequests running on the page (old and new objects). It will only intercept XMLHttpRequests made in the console. Another example is this https://www.w3schools.com/code/tryit.asp?filename=GBUKE1JS7IFL . It works in the webpage but I can't get the same behavior by injecting it with an extension.

(function(){
    console.log("Injected Send")
    var proxiedSend = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        console.log(this, arguments );
        return proxiedSend.apply(this, [].slice.call(arguments));
    }
})();
(function(){
    console.log("Injected Open")
    var proxiedOpen = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function() {
        console.log(this, arguments );
        return proxiedOpen.apply(this, [].slice.call(arguments));
    };
})();

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log("success")
    }
};
xhttp.open("GET", "/", true);
xhttp.send();

This problem is causing my Inject.js to not work.

manifest.json

{
  "name": "test",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "testing xmlhttprequests",
  "homepage_url": "http://example.com",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "src/bg/background.js"
    ],
    "persistent": true  
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "page action demo",
    "default_popup": "src/page_action/page_action.html"
  },
  "permissions": [
    "tabs",
    "*://*.google.com/"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "run_at": "document_start",
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]
}

Answer 1

You need to run it in a DOM script, see Insert code into the page context using a content script .

-wOxxOm