Firefox add-on show popup from injected script - firefox-addon

Question

I'm developing a Firefox extension. I have injected some HTML button code into a webpage using a content script. Now I want to open a popup when that button is clicked. I have a popup.html file. I want to open this file as a popup window. However, when I attempt to do so it shows the error :
Error: Access to 'resource://test/data/popup/popup.html' from script
denied
my 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"
}
injected script:
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

Since you are using add-on sdk, use "sdk/panel" in the index.js script.
Documentation here: 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")
]
});
});
}
});