¿Cómo volver a cargar un panel emergente de artilugios con firefox addon sdk?

Question

Mi complemento abre un panel emergente (popup.html).

Cuando el usuario cambia la pestaña actual a otra pestaña, el panel emergente se oculta hasta que el usuario vuelve a hacer clic en el ícono de complemento. (Mientras tanto, el complemento todavía "vive" en el fondo).

Cuando el panel emergente se abre la segunda vez, lo necesito para recargar su contentURL (popup.html) pero encontré la manera de hacerlo.

Puede parecer simple pero tengo poca experiencia con Add-on SDK.

Cualquier ayuda será apreciada.

Este es mi código:

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

Volver a cargar el html del iframe no era mi problema después de todo. (Necesitaba volver a cargar mi contentScript también)

Lo que hice finalmente fue crear un nuevo panel cada vez que se hace clic en el widget.

he añadido un nuevo archivo en el lib llamados 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; 

y en mi 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

Sobre la base de los consejos que recibí de Wladimir Palant y canuckistani, He sustituido contentURL con un iFrame

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

A continuación, en el guión de contenido fijo el iFram src con el nuevo 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

Por lo que no hay manera de cambiar contentScript junto con PageContent , Voy con otra solución: todas mis "páginas" son solo secciones en un archivo html, y todas las secciones están ocultas (css: {display: none;}) excepto una. Y en lugar de cambiar el contenido, solo muestro otra parte del mismo.

Drawback es: contentScript es el mismo para todas las "páginas". Pero todo funciona bien.