Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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}); 
    }
  });
};
like image 614
Roey Avatar asked Oct 24 '22 10:10

Roey


1 Answers

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}); 
      }
    });
};
like image 150
Roey Avatar answered Oct 27 '22 11:10

Roey