Question

我正在开发Firefox扩展程序。我已经使用内容脚本将一些HTML按钮代码注入到网页中。现在我想在单击该按钮时打开一个弹出窗口。我有一个popup.html文件。我想打开这个文件作为弹出窗口。但是，当我尝试这样做时，它会显示错误：

错误：从脚本访问'resource：//test/data/popup/popup.html' 拒绝

我的package.json：

{
  "title": "First",
  "name": "test",
  "version": "0.0.1",
  "description": "Just for testing",
  "main": "index.js",
  "author": "Bharath",
  "engines": {
      "firefox": ">=38.0a1",
      "fennec": ">=38.0a1"
  },
  "license": "MIT"
}

注入脚本：

var popupURL = '';
var timerId = setInterval(function () {
    if(!!$('.aic').length){
        window.clearInterval(timerId);

        $('.aic').append('<div id="sendButtonID" class="sendButtonCls" role="button" tabindex="0" gh="cm" style="-webkit-user-select: none;">Send Now</div></div>');
        $('#sendButtonID').click(function(){
            console.log('Received url: ', popupURL);
            window.open(popupURL, "Popup window", 'width=400 height=500');
        });
    }
}, 1000);

document.addEventListener('popUrlEvent', function (e) {
    popupURL=e.detail;
    console.log('Received url: ', popupURL);
});

content.js：

var popupUrl = '';

var buttonCss = document.createElement('link');
buttonCss.setAttribute("rel", "stylesheet");
buttonCss.setAttribute("type", "text/css");

var jqueryURL = document.createElement('script');
jqueryURL.type = "text/javascript";


var injectedURL = document.createElement('script');
injectedURL.type = "text/javascript";


self.port.on("init", function(scriptURLS) {

    popupUrl = scriptURLS.popupUrl;

    buttonCss.href = scriptURLS.buttonCss;
    (document.head || document.documentElement).appendChild(buttonCss);

    jqueryURL.src = scriptURLS.jQuery;
    (document.head || document.documentElement).appendChild(jqueryURL);


    injectedURL.src = scriptURLS.injectedJs;
    (document.head || document.documentElement).appendChild(injectedURL);
    console.log('URLS: ',scriptURLS);
});

injectedURL.onload = function(){
    var evt=document.createEvent("CustomEvent");
    evt.initCustomEvent("popUrlEvent", true, true, popupUrl);
    document.dispatchEvent(evt);
};

index.js：

var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;

var urls = {
    'jQuery': data.url("js/lib/jquery-1.10.2.min.js"),
    'injectedJs' : data.url("js/main.js"),
    'buttonCss' : data.url("css/button.css"),
    'popupUrl' : data.url("popup/popup.html")
};

pageMod.PageMod({
    include: "https://mail.google.com/*",
    contentScriptFile: data.url("js/content.js"),
    contentScriptWhen: 'end',
    onAttach: function(worker) {
        worker.port.emit("init", urls);
    } 
});

Answer 1

由于您使用的是附加sdk，请使用＆＃34; sdk / panel＆＃34;在index.js脚本中。这里的文档：https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel

pageMod.PageMod({
    include: "https://mail.google.com/*",
    contentScriptFile: data.url("js/content.js"),
    contentScriptWhen: 'end',
    onAttach: function(worker) {
        worker.port.emit("init", urls);
        worker.port.on("showpopup", function() {
            require("sdk/panel").Panel({
                contentURL: data.url("./popup/popup.html"),
                contentScriptFile: ["./lib/jquery.js",
                    data.url("js/main.js")
                    ]         
            });
        });
    } 
});

Firefox附加组件显示注入脚本的弹出窗口

1 个答案: