Come ricaricare un pannello popup del widget con firefox addon sdk?

Question

Il mio addon apre un pannello popup (popup.html).

Quando l'utente modifica la scheda corrente in una scheda diversa, il pannello popup viene nascosto finché l'utente non fa nuovamente clic sull'icona di aggiunta. (Nel frattempo l'addon continua a "vivere" sullo sfondo).

Quando il pannello popup viene aperto la seconda volta mi serve per RICARICARE il suo contentURL (popup.html) ma ho trovato il modo di farlo.

Potrebbe sembrare semplice, ma ho solo poca esperienza con l'add-on SDK.

Qualsiasi aiuto sarà apprezzato.

Questo è il mio codice:

exports.main = function() { 
    data = require('self').data; 
    var tabs = require("tabs"); 

    var popupPanel = require("panel").Panel({ 
    width:550, 
    height:400, 
    contentURL: data.url("popup.html"), 
    contentScriptFile: [data.url("popup.js")],  
    contentScript: " "+ 
     "self.port.on('curTabMsg', function(curTabMsg) {" + 
     "main(curTabMsg['curTab']);" + 
     "});" 
    }); 


    require('widget').Widget({ 
    panel: popupPanel, 
    onClick: function() {  
     popupPanel.port.emit("curTabMsg",{'curTab': tabs.activeTab.url}); 
    } 
    }); 
}; 

Answer 1

Ricaricare il codice HTML dell'iframe non è stato il mio problema. (Avevo bisogno di ricaricare anche il mio contentScript)

Quindi quello che ho fatto alla fine è stato creare un nuovo pannello ogni volta che si fa clic sul widget.

ho aggiunto un nuovo file al lib chiamato myPanel.js

function getPanel(contentURL,contentScriptFile,contentScript){ 
    var popupPanel = require("panel").Panel({ 
      width:550, 
      height:400, 
      contentURL: contentURL, 
      contentScriptFile: contentScriptFile,  
      contentScript: contentScript 
     }); 
    return popupPanel; 
} 

exports.getPanel = getPanel; 

e nel mio main.js:

exports.main = function() { 
    data = require('self').data; 
    var myPanel=require("myPanel"); 
    var tabs = require("tabs"); 

    let myWidget = require('widget').Widget({ 
     id: "SomeId", 
     label: "Some lable", 
     contentURL: data.url("some.png"), 
     onClick: function() { 
      var panel = myPanel.getPanel(data.url("popup.html"),[data.url("popup.js")], 
         "self.port.on('curTabMsg', function(curTabMsg) {" + 
          "main(curTabMsg['curTab']);" + 
         "});");   
      panel.show(); 
      panel.port.emit("curTabMsg",{'curTab': tabs.activeTab.url}); 
     } 
    }); 
}; 

Answer 2

Sulla base del parere che ho ricevuto da Wladimir Palant e canuckistani, ho sostituito il mio contentURL con un iFrame

<iframe id="mainFrame" name="mainFrame" src="" frameborder="0" height ="100%" width="100%"></iframe> 

Poi sullo script contenuti ho impostato il iFram src con il nuovo html.

function reload(tabUrl) 
{ 
    document.getElementById("mainFrame").src=tabUrl; 
} 


var popupPanel = require("panel").Panel({ 
      width:550, 
      height:400, 
      contentURL: data.url("container.html"), 
      contentScriptFile: [data.url("popup.js")],  
      contentScript: " "+ 
      "self.port.on('curTabMsg', function(curTabMsg) {" + 
       "reload(curTabMsg['curTab']);" + 
      "});" 
     }); 

Answer 3

Per quanto non c'è modo di passare contentScript insieme pageContent , Vado con un'altra soluzione: tutte le mie "pagine" sono solo sezioni in un file html e tutte le sezioni sono nascoste (css: {display: none;}) tranne una. E invece di cambiare contenuto, ne mostro solo un'altra parte.

Lo svantaggio è: contentScript è lo stesso per tutte le "pagine". Ma tutto va bene.