How to reload a widget popup panel with firefox addon sdk?

问题

My addon opens a popup panel (popup.html).

When the user changes the current tab to different tab, the popup panel is hidden until the user clicks again on the addon icon. (Meanwhile the addon still "lives" in the background).

When the popup panel is opened the second time I need it to RELOAD its contentURL (popup.html) but I did find the way to do it.

That might look simple but I have only little experience with the Add-on SDK.

Any help will be appreciated.

This is my code:

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}); 
    }
  });
};

回答1:

Reload the html of the iframe did not my problem after all. (I needed to reload my contentScript as well)

So What I did finally was to create a new panel each time the widget is clicked.

I added a new file to the lib called 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;

And in my 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}); 
      }
    });
};

回答2:

As far as there is no way of switching contentScript together with pageContent, I go with other solution: all my "pages" are just sections in one html file, and all sections are hidden(css: {display: none;}) except one. And instead of change content, I just show another part of it.

Drawback is: contentScript is the same for all "pages". But evrything works fine.

回答3:

Based on the advice I got from Wladimir Palant and canuckistani , I replaced my contentURL with an iFrame

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

Then on the content script I set the iFram src with the new 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']);" +
            "});"
         });

来源：https://stackoverflow.com/questions/9098828/how-to-reload-a-widget-popup-panel-with-firefox-addon-sdk

标签

firefox-addon

firefox-addon-sdk