我的Firefox扩展注入CSS不会工作

时间:2012-02-29 13:09:14

标签: javascript firefox firefox-addon firefox-addon-sdk

我正忙着开发一个firefox扩展。我正在使用附加构建器

它会做什么:

  1. 从PHP页面获取ID(XMLHttpRequest)

  2. 调用另一个函数并随身携带该ID

  3. 该函数使用javascript

  4. 创建的链接标记插入CSS

    我的问题:

    它无效。如果我警告当前主题变量,则没有任何反应。所以XMLHttpRequest似乎不起作用。

    我的代码:

    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。 CSS文件位于数据文件夹中。

3 个答案:

答案 0 :(得分:2)

我是新手,所以不确定我是否可以提供帮助。如果它抱怨什么,你有没有看过错误控制台(ctrl + shift + j)?你可以在console.log()中显示它。

也许使用Request lib而不是XMLHttpRequest

以下是我的代码中的代码段:

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

}

答案 1 :(得分:1)

内容脚本使用它们所在页面的权限运行。因此,如果不允许页面加载http://localhost/,则您的内容脚本也无法执行此操作。由于CORS,您不会立即收到错误,但请求仍会失败。您需要做的是向main.js发送消息,以便它执行请求(允许扩展代码请求任何URI)并将数据发送回内容脚本。

答案 2 :(得分:0)

如上所述,内容脚本具有与附加的网页相同的特权,这意味着您位于Same Origin Policy下。

您可以按照建议解决问题,因此向附加代码发送消息(不受SOP限制)并将结果发回内容脚本。

以下是代码的示例:https://groups.google.com/d/topic/mozilla-labs-jetpack/VwkZxd_mA7c/discussion