0

我知道我们可以显示一个带有小部件或面板的弹出窗口，并且弹出窗口围绕扩展图标，我知道这在 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">and <script src="js/jquery-2.0.1.min.js"></script>)不起作用。那么我能做些什么来解决这个问题呢？谢谢。

4

0 回答 0