I am writing a Firefox extension. I am using a content script that matches a specific domain. I want to get data from a PHP page. Eventually adding a CSS file to the page to change the styling. The content of the PHP page will be the name of the CSS file I fetch. Here is my content script javascript, the alert returns nothing.

I was told I am limited by the same origin policy. Is there any way I can get data from the php page?

function getData() {
            client = new XMLHttpRequest();
            try{
                client.open('GET','http://localhost:8888/istyla/login/popuplogin/myaccount.php');                   
            } catch (e){
                alert( "error while opening " + e.message );
            }

            client.onreadystatechange = function(){
                if (client.readyState ==4){
                        user_data = client.responseText;
                        var currenttheme = user_data;
                        alert (currenttheme);
                }
            }

            client.send(null);
}

getData();

I am writing a Firefox extension. I am using a content script that matches a specific domain. I want to get data from a PHP page. Eventually adding a CSS file to the page to change the styling. The content of the PHP page will be the name of the CSS file I fetch. Here is my content script javascript, the alert returns nothing.

I was told I am limited by the same origin policy. Is there any way I can get data from the php page?

function getData() {
            client = new XMLHttpRequest();
            try{
                client.open('GET','http://localhost:8888/istyla/login/popuplogin/myaccount.php');                   
            } catch (e){
                alert( "error while opening " + e.message );
            }

            client.onreadystatechange = function(){
                if (client.readyState ==4){
                        user_data = client.responseText;
                        var currenttheme = user_data;
                        alert (currenttheme);
                }
            }

            client.send(null);
}

getData();

• javascript
• firefox
• firefox-addon
• firefox-addon-sdk

• Important context missing: this is a content script of an extension built with the Add-on SDK. I've already answered your question here, not going to answer it again. – Wladimir Palant Commented Mar 1, 2012 at 5:53
• See also: https://jakearchibald.com/2015/thats-so-fetch/ – dreftymac Commented Sep 5, 2020 at 17:34

2 Answers 2

You're looking for JSONP.

You can use Fetch API its not supported by Safari or IE for now but its a good alternative.

You ma use it as:

function getData(){
    fetch('flowers.jpg').then(function(response) {
         return response.blob();
    })
}


if(self.fetch) {
    // run my fetch request here
    var resp = getData();
} else {
    // do something with XMLHttpRequest?
}

You can get more info from MDN Using Fetch API. You may want More advance usage.

Update: you might find this article useful That's so fetch!