My Firefox extension to inject CSS wont work

Question

I am busy developing a firefox extension. I am using the Add-on Builder

What it will do:

1. Get an ID from a PHP page (XMLHttpRequest)

2. Call another function and send that ID with it

3. That function inserts CSS with a link tag created by javascript

My Problem:

It won't work. If I alert the currenttheme variable, nothing happens. So the XMLHttpRequest doesn't seem to work.

My code:

main.js:

var Widget = require("widget").Widget;
var tabs = require('tabs');
exports.main = function() {
var pageMod = require("page-mod");
var data = require("self").data;
scriptFiles = data.url("s.js");
pageMod.PageMod({
include: "*.facebook.com",
contentScriptWhen: 'ready',
contentScriptFile: scriptFiles
});

s.js

function addCSS(theTheme) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel = 'stylesheet';
s.href = theTheme+'.css';
(document.head||document.documentElement).appendChild(s);
}

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;
                        window.user_data = user_data;
                        var currenttheme = user_data;
                        window.currenttheme = currenttheme;
                        addCSS(currenttheme);
                }
            }

            client.send(null);
}

getData();

P.S. The CSS file is in the data folder.

Answer 1

Content scripts run with the privileges of the page that they are in. So if the page isn't allowed to load http://localhost/, your content script won't be able to do it either. You don't get an immediate error due to CORS but the request will fail nevertheless. What you need to do is to send a message to main.js so that it does the request (extension code is allowed to request any URI) and sends the data back to the content script.

Answer 2

Im very new to this so not sure if I can help. Have you had a look in the error console(ctrl+shift+j) if its complaining about anything? You can console.log() and it will show in here.

Maybe use the Request lib instead of XMLHttpRequest

Here is a snippet from my code:

var Request = require("request").Request;

getUserDetails : function(userID, callback)
{
   Request({
      url: Proxy.remoteUrl,
      content : {command:'getUser',UserID:userID},
      onComplete: function(response) {callback(response.json)}
   }).get();

}

Answer 3

As said, the content script has the same privileged of the web page where is attached, that is meaning you're under the Same Origin Policy.

You can solve the issue as suggested, so sent a message to the add-on code (that is not restricted by the SOP) and post the result back to the content script.

Here an example how the code could be: https://groups.google.com/d/topic/mozilla-labs-jetpack/VwkZxd_mA7c/discussion