如何使用javascript创建自定义窗口，而不是使用附加SDK创建面板

Question

现在我正在开发一个firefox扩展，它可以根据网页操作显示一些javascript对话框。

我有铬扩展版本代码，它运作良好。 它的主要工作流程是当我点击扩展图标时，它会根据网页内容弹出一个特定的javascript对话框（使用TINYBOX）。所以当我尝试在firefox addon中做同样的事情时，我发现这很难。在Chrome中，消息api简单易懂。但在firefox插件中，我经常陷入页面模式，面板，工作等。现在

，我试着这样做：

• 当我点击Firefox扩展图标，它会发出一个信息（包括主HTML的SRC），以内容脚本;

• 然后内容脚本中的相关方法使用消息弹出对话框（使用TINYBOX）。

• 因此，页面可以显示，但没有CSS和JS（因为HTML中的样式和JS链接无效）。有人以前做过这种工作吗？或者 只是给我一些tips.Thanks。

Answer 1

试试这个：

Main.js [内容脚本现在

var workers = []; 
var widget = widgets.Widget({ 
    id: "my-link", 
    label: "my-page", 
    contentURL: self.data.url('mypage.ico')//, 
    //emit the click event 
    contentScript: 'self.port.emit('icon-click', 'icon clicked')' 
}); 

function detachWorker(worker, workerArray) { 
    var index = workerArray.indexOf(worker); 
    if(index != -1) { 
     workerArray.splice(index, 1); 
    } 
} 

var pageMod = require('sdk/page-mod').PageMod({ 
    include: ['https://my-page.com'], 
    //pass the click event to page Script 
    contentScript: 'self.port.on("icon-click", function() 
      {document.defaultView.postMessage({ action:"icon-clicked", msg: "my message", "https://my-page.com"}) 
    })', 
    onAttach: function(worker) { 
     workers.push(worker); 
     worker.on('detach', function() { 
       detachWorker(this, workers); 
     }); 
    } 
}); 

//pass event to worker's content script 
widget.port.on('icon-click', function(){ 
    //use for each on workers 
    worker[0].port.emit("icon-click", 'icon clicked'); 
}); 

，在您的网页脚本监听的postMessage

window.addEventListener('message', function(event) { 
    //include all the dialog libs/resources/css in page 
    var data = event.data; 
     if(data.action === 'icon-clicked'){ 
     showDialog(data.msg); 
     } 

    }, false);