如何使用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);