2012-02-01 61 views
5

我的插件打开一个弹出式面板(popup.html)。如何使用firefox addon sdk重新加载小部件弹出窗口?

当用户将当前选项卡更改为不同的选项卡时,隐藏弹出式面板,直到用户再次单击插件图标。 (与此同时,插件仍然在后台“生活”)。

当第二次打开弹出窗口时,我需要它来重新载入它的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}); 
    } 
    }); 
}; 
+0

您可能想解释为什么要重新加载面板而不是发送消息来更新其状态。 – 2012-02-01 17:47:34

+0

确切地说 - ti对于对事件做出反应并重新加载内容的面板实现内容脚本是最简单的。 – canuckistani 2012-02-01 20:29:20

+0

我没有想到这个方向。这听起来很有趣,我会试试看。如果它能工作,我会稍后更新。 – Roey 2012-02-02 10:33:28

回答

4

重新载入iframe的html并不是我的问题。 (我还需要重新加载我的contentScript)

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

我添加了一个新的文件到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}); 
     } 
    }); 
}; 
+0

如果你使用的是面板,你可以只有一个JavaScript文件来发送和回复消息。然后只需使用事件来确定选项卡何时更改并将消息发送到面板。会这样做吗? – 2014-08-20 13:12:05

+0

同样的狗屎在这里。移动页面工作正常,但不可能以同样的方式更改contentScript。我觉得这应该被标记为一个错误。感谢解决方案! – msangel 2015-10-21 00:57:50

-1
基于我从弗拉基米尔Palant和canuckistani得到的建议

,我代替我的contentURL与一个iFrame

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

从那时起,我设置的内容脚本iFram src与新的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']);" + 
      "});" 
     }); 
0

至于有没有与pageContent一起交换contentScript方式,我去与其他解决方案:我所有的“页面”只是一个HTML文件中的部分,并且所有部分都隐藏(css:{display: none;}),除了一个。 而不是改变内容,我只是展示了它的另一部分。

缺点是:contentScript对所有“页面”都是一样的。但evrything工作正常。

相关问题