我用于注入 CSS 的 Firefox 扩展不起作用答案

【问题标题】：My Firefox extension to inject CSS wont work我用于注入 CSS 的 Firefox 扩展不起作用
【发布时间】：2012-02-29 13:09:13
【问题描述】：

我正忙于开发一个 Firefox 扩展程序。我正在使用插件生成器

它将做什么：

从 PHP 页面获取 ID (XMLHttpRequest)
调用另一个函数并发送该 ID
该函数插入带有由 javascript 创建的链接标签的 CSS

我的问题：

这行不通。如果我提醒 currenttheme 变量，什么也不会发生。所以 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();

附： CSS 文件位于数据文件夹中。

【问题讨论】：

您请求的路径不存在（也许对您有用，但不是对每个用户）。
在我完成测试后，它将被放在任何人都可以使用的服务器上。
由于某种原因，似乎 XMLHttpRequest 根本没有在 PageMod 脚本的上下文中定义。 jQuery 也是如此。

标签： javascript firefox firefox-addon firefox-addon-sdk

【解决方案1】：

我对此很陌生，所以不确定我是否可以提供帮助。如果它抱怨任何事情，您是否看过错误控制台（ctrl+shift+j）？你可以 console.log() 它会显示在这里。

也许使用 Request 库而不是 XMLHttpRequest

这是我的代码中的一个 sn-p：

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

}

【讨论】：

我无法让 XMLHttpRequest 或 Request 库工作。你介意给我一个代码示例吗？

【解决方案2】：

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

【讨论】：

我不完全确定该怎么做。我无法找到并回答。你能告诉我怎么做吗？

【解决方案3】：

如前所述，内容脚本具有与附加网页相同的权限，这意味着您在Same Origin Policy下。

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

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

【讨论】：