Question

我的插件会打开一个弹出式面板（popup.html）。

当用户将当前标签更改为其他标签时，弹出式面板将被隐藏，直到用户再次点击插件图标。（同时插件仍然“生活”在后台）。

当弹出面板打开时，第二次我需要它来RELOAD其contentURL（popup.html），但我确实找到了这样做的方法。

这可能看起来很简单但我对附加SDK的经验很少。

任何帮助将不胜感激。

这是我的代码：

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

重新加载iframe的html毕竟不是我的问题。（我还需要重新加载我的内容脚本）

所以我最后做的是每次点击小部件时创建一个新的面板。

我在lib中添加了一个名为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;

在我的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

至于无法将pageScript与pageContent一起切换，我采用其他解决方案：我的所有“页面”只是一个html文件中的部分，所有部分都被隐藏（css：{display: none;}）除了一个。而不是改变内容，我只是展示它的另一部分。

缺点是：所有“页面”的contentScript都是相同的。但是，evrything工作得很好。

Answer 3

根据我从Wladimir Palant和canuckistani获得的建议，我用iFrame替换了我的contentURL

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

然后在内容脚本上我用新的html设置了iFram src。

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']);" +
            "});"
         });

如何使用firefox addon sdk重新加载小部件弹出式面板？

3 个答案: