Enable Cross-Origin XMLHttpRequest in devtool

Question

I'm working on a devtool Chrome extension and would like to log all XHR request of the current website. So in my injected script ea "messageback-script" I have this:

(function(open) {
  XMLHttpRequest.prototype.open = function(method, url, async) {


console.log('The URL is: ' + url); 


  };

})(XMLHttpRequest.prototype.open);

And I have given required permissions in the manifest.json:

{
    "name": "DevToolsPanel",
    "version": "0.1",
    "description": "Log XHR requests",
    "devtools_page": "devtools.html",
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "tabs", 
        "http://*/*",
        "https://*/*"
    ],
    "manifest_version": 2
}

The problem is that I don't see anything in the console log (blank). What am I doing wrong?

possible duplicate of [Building a Chrome Extension - Inject code in a page using a Content script](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) — Xan, Aug 24 '14 at 09:18
Comment: it's not an exact duplicate, but it's the canonical question for your problem. — Xan, Aug 24 '14 at 09:18
@Xan Thanks but the answer only talks about code injection. Do you think that is the problem? Because I injected a lot of code and it all works as expected that's why I think the problem maybe something else. — Youss, Aug 24 '14 at 09:23
@Xan It's plain rude trying to close a perfectly good question — Youss, Aug 24 '14 at 09:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59873/discussion-between-xan-and-youss). — Xan, Aug 24 '14 at 09:26

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

Having examined the code you are using, I can say that this script is evaluated via chrome.tabs.executeScript, making it a Content Script.

Content Scripts live in an isolated context, and as such modifying the XHR prototype only affects XHR in your content script(s). There's a canonical question describing this problem and workarounds.

However, since you're writing a devtools extension, you have a simpler solution via chrome.devtools.inspectedWindow.eval(), which directly executes code in the page's own context.

// In the devtool panel code
chrome.devtools.inspectedWindow.eval("/* Your code here*/");

edited May 23 '17 at 10:25

Community

1
1

answered Aug 24 '14 at 10:11

Xan

74,770
16
179
206

Can you help out on how and where to put this. So far I have this in the devtool panel.js: `document.querySelector('#insert').addEventListener('click', function() { sendObjectToInspectedPage({action: "script", content: "jquery.js"}); sendObjectToInspectedPage({action: "script", content: "messageback-script.js"}); }, false);` What Im saying is that there is nowhere a place to put that code... – Youss Aug 24 '14 at 10:18
By code I mean literal code in your question, as a string. – Xan Aug 24 '14 at 10:19
Instead of your `sendObjectToInspectedPage`? – Xan Aug 24 '14 at 10:21
That doesn't work: `document.querySelector('#insert').addEventListener('click', function() { chrome.devtools.inspectedWindow.eval("console.log('hello world')"); }, false);` And you wanted to close my question...;-) – Youss Aug 24 '14 at 10:25

Enable Cross-Origin XMLHttpRequest in devtool

1 Answers1