CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
tapananand
tapananand

Reputation: 4872

Chrome - Cross Origin XMLHttpRequest doesnt seem to work in contentscript

In my background script I am injecting my contentScript as follows:

chrome.webRequest.onHeadersReceived.addListener(function(details){
    if(isPDF(details))
    {   
        chrome.tabs.executeScript(details.tabId, {file: "content.js", runAt: "document_end"}, function(result){
            if(chrome.runtime.lastError)
            {
                console.log(chrome.runtime.lastError.message);
            }
        });
        return {
            responseHeaders: [{
              name: 'X-Content-Type-Options', 
              value: 'nosniff'
            }, {
              name: 'X-Frame-Options', 
              value: 'deny'
            }]
          };
        }
}, {
    urls: ['*://*/*'],
    types: ['main_frame']
}, ['blocking', 'responseHeaders']);

In content.js I have the following code:

function reqHandler()
{
    alert("hello");
    var imgData = "" + this.responseText;
    //document.write("" + imgData);
    document.body.innerHTML = "";
    var img = document.createElement("img");
    img.setAttribute("src", 'data:image/jpeg;base64,'  + "" + imgData);
    document.body.appendChild(img);
}

//debugger;
var PDFdata = document.body.innerHTML;  
document.body.innerHTML = "";
var xhr = new XMLHttpRequest();

xhr.onload = reqHandler;
xhr.open("GET", "http://localhost:81/getImage.php", true);
xhr.send();

As you can see I am making a cross-origin XMLHTTPRequest here. The problem that I am facing is that the content.js script is being executed but my reqHandler function which should run after the completion of the xhr request is not running at all.

The alert inside it is not shown. What could be the problem?

UPDATE Here is the manifest file for the extension:

{
    "manifest_version": 2,

    "name": "My Extension",
    "version": "1.0",

    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },

    "permissions": [
        "webRequest",
        "<all_urls>",
        "webRequestBlocking",
        "tabs",
        "webNavigation"
    ]
}

Upvotes: 0

Views: 152

Answers (1)

woxxom
woxxom

Reputation: 73826

AFAIK only internal extension scripts that are executed in the privileged context like the background page script (not content scripts which don't have access to privileged APIs) can make Cross-Origin XMLHttpRequest (more info in the official docs).

Invoke XHR in your background page script, send a message to the tab's content script.

  • background.js:

    chrome.webRequest.onHeadersReceived.addListener(function(details){
    if(isPDF(details))
    {   
        var xhr = new XMLHttpRequest();
        var tabId = details.tabId; // save id in the local context
        xhr.onload = function() {
            chrome.tabs.sendMessage(tabId, {imgData: this.responseText});
        };
        xhr.open("GET", "http://localhost:81/getImage.php", true);
        xhr.send(); 

        chrome.tabs.executeScript(details.tabId, {file: "content.js", ..............
..................

  • content script:

    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.imgData) {
        document.body.innerHTML = "";
        var img = document.createElement("img");
        img.src = "data:image/jpeg;base64," + message.imgData;
        document.body.appendChild(img);
    }
});

Upvotes: 1

Related Questions