My Firefox extension to inject CSS wont work

一世执手 提交于 2020-01-23 12:24:32

问题


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.


回答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.




回答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();

}



回答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



来源:https://stackoverflow.com/questions/9499745/my-firefox-extension-to-inject-css-wont-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!