Overridding XMLHttpRequest Prototype For Chrome Extension

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"
      ]
    }
  ]
}

You need to run it in a DOM script, see [Insert code into the page context using a content script](//stackoverflow.com/a/9517879). — wOxxOm, Feb 13 '20 at 04:24
Thank you. I did not know I had to add it as a web resource when attempting it the first time. — John Smith, Feb 13 '20 at 04:48

score 1 · Accepted Answer · answered Feb 13 '20 at 04:46

1

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

-wOxxOm

answered Feb 13 '20 at 04:46

John Smith

347
1
11

This should be marked as the correct answer. The reference to another StackOverflow question pointed me out into the right direction. – damianmr Apr 02 '22 at 02:05

Overridding XMLHttpRequest Prototype For Chrome Extension

1 Answers1