How to Listen to XMLHttpRequests - Browser extension

Question

My Script

var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', function() {
        //console.log(this.responseURL);        
        if(this.responseURL == "https://get.example.com/dashboard/summary")
        {
            // Run the function
            funMain();
        }
    });
    origOpen.apply(this, arguments);
};

function funMain() {
    // My codes
}

This is my script and it's working as expected. What this does is, this listen to XMLHttpRequests and when an XMLHttpRequest is made to 'https://get.example.com/dashboard/summary', it calls funMain function. Since this is an event, this is not a one time event. This can be happened multiple times. This XMLHttpRequest is made by https://example.com/dashboard webpage.

Process: If an XMLHttpRequest is made to 'https://get.example.com/dashboard/summary' by https://example.com/dashboard webpage, then call funMain function.

So now, I want to build an extension using this working script.
This is what I have tried so far...

Content Script

function funMain() {
    // My codes
}

Note: I know that I have to use browser.runtime.sendMessage() to communicate between background script and content script. But at the moment, I'm trying to get the event function (in the Background Script) working.

Background Script

console.log("Msg 01 - Background script is running.");
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', function() {
        console.log("Msg 02 - " + this.responseURL);        
        if(this.responseURL == "https://get.example.com/dashboard/summary")
        {
            // Run the function
            // funMain();
            console.log("Msg 03 - Hello! I am working as expected.");
        }
    });
    origOpen.apply(this, arguments);
};

Manifest

{
  "manifest_version": 2,
  "name": "Beastify",
  "version": "1.0",

  "description": "des",
  "icons": {
    "48": "icons/beasts-48.png"
  },

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

  "content_scripts": [{
        "matches": [
            "*://*.example.com/dashboard"
        ],
        "js": [
            "content-script.js"
        ]
    }],

    "background": {
    "scripts": ["background.js"]
  }
}

The problem is, the event does not work as expected. Therefore, funMain cannot be called. When I inspect the background page, I can only see Msg 01. I cannot see Msg 02 or Msg 03.

Output: background.js

Msg 01 - Background script is running.

What am I doing wrong and how can I fix this?

The background script runs in a separate hidden background page which is not related to the web page. In this case you don't need it at all. Use a **content script** and put that hook code in a script element as shown in [this answer](/a/9517879) so you'll override XHR in page context. — wOxxOm, Oct 13 '19 at 13:54

score 1 · Answer 1 · answered Oct 16 '19 at 14:01

It all depends on the actual situation. Here are some ideas that you can work on.

It is better to use standard JavaScript XMLHttpRequest instead of usingXMLHttpRequest.prototype.

Content script and browser have different scope and for security do not interact directly.

You can

Have XHR in the content script and use webRequest API in the background script to listen to HTTP requests
Use runtime.sendMessage() from content script to background script to run the XHR in the background script

Then from background script

Use tabs.sendMessage() to send message to contentscript
Use tabs.executeScript() to directly run scripts in the content scope or initiate functions in the content script

How to Listen to XMLHttpRequests - Browser extension

1 Answers1