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的html页面（main.html）没有正常显示，因为iframe页面中的js和css链接（例如<link href="css/bootstrap-responsive.css" rel="stylesheet">和<script src="js/jquery-2.0.1.min.js"></script>）无法正常工作。那么我该怎么做才能解决这个问题呢？感谢。

如何在firefox扩展中编写弹出窗口

0 个答案: