iframe - Firefox 拡張機能でポップアップ ウィンドウを作成する方法

Question

ウィジェットまたはパネルでポップアップを表示でき、ポップアップは拡張機能アイコンの周りにあることを知っています。Chrome 拡張機能の開発は簡単です。今、JavaScriptでポップアップを作成したいと思います。

私の考えは、アイコン ボタンをクリックすると、コンテンツ スクリプトにメッセージ (iframe の html ページのパスを含む) が送信されるということです。私のコードは次のとおりです。

nbBtn.addEventListener('click', function() {
       var workers = tabs.activeTab.attach({                    
           contentScriptFile: [ data.url("js/jquery-2.0.1.min.js"),
                                data.url("mycontent.js"),
                                data.url("js/tinybox2/packed.js"),
                                data.url("js/bootstrap.min.js"),
                                data.url("js/jquery.qrcode.min.js"),
                                data.url("js/2.5.3-crypto-sha1-hmac.js"),
                                data.url("js/moment.min.js"),
                                data.url("js/extension.utils.js")]
       });
       let content = encodeURIComponent(data.load("main.html"));
       let url = "data:text/html;charset=utf-8," + content;
       workers.postMessage(url);
    }, false); 

次に、コンテンツ スクリプトがメッセージを含むポップアップを表示します。コードは次のようになります。

var showBox = function(){
    if(document.getElementById(iframeId)==null){
        console.log("Creating frame...");
        TINY.box.show({iframe:popupSrc, width:lgmBoxWidth, height:lgmBoxHeight, top:window.innerHeight*0.1, animate:true});
    }
    else{
        console.log("Frame already exist.");
    }
}

self.on('message', function(message) { 
    popupSrc = message;
    showBox();
});

ただし、iframe ページ内の js および css リンク (および など) が機能しないため、iframe の html page( main.html) が正常に表示されません。では、この問題を解決するにはどうすればよいでしょうか。ありがとう。<link href="css/bootstrap-responsive.css" rel="stylesheet"><script src="js/jquery-2.0.1.min.js"></script>