我的Firefox扩展注入CSS将无法正常工作 [英] My Firefox extension to inject CSS wont work

问题描述

我正在开发一个Firefox扩展。我使用的是附加组件生成器

$ ol

从PHP页面获取一个ID（XMLHttpRequest）

调用另一个函数并使用它发送ID

该函数将插入带有由javascript创建的链接标记的CSS

问题：

这是行不通的。如果我提醒当前的主题变量，什么都不会发生。所以XMLHttpRequest似乎不工作。

我的代码：

$ b 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）; 
 
 
函数getData（）{
 client = new XMLHttpRequest（）; 
尝试{
 client.open（'GET'，'http：// localhost：8888 / istyla / login / popuplogin / myaccount.php'）; 
} catch（e）{
 alert（error while open+ 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文件位于数据文件夹中。

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

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.

解决方案

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.

这篇关于我的Firefox扩展注入CSS将无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！