創建mozilla擴展以顯示彈出窗口和iframe

Question

正在嘗試開發mozilla擴展。我只需要在彈出框中顯示一個iframe，但不知道如何去做。

我的要求是

1. 添加頂部導航工具欄上的一個擴展按鈕
2. 顯示一個iframe上的彈出，而在擴展按鈕點擊。

我沒有找到類似於此的任何教程。請幫幫我。

謝謝...

Hariprasad

Answer 1

在基於XUL的擴展，你可以做這樣的：

在您的XUL文件：

<toolbarpalette id="BrowserToolbarPalette"> 
    <toolbarbutton id="mainToolbarIcon" 
      image='chrome://yourExt/content/images/icon.png' 
      type="panel" 
      class="toolbarbutton-1 chromeclass-toolbar-additional"> 
     <panel id="toolbarPanel" 
      type="arrow" 
      noautofocus="true" 
      consumeoutsideclicks="true" 
      noautohide="false" 
      onpopupshowing="handleOnLoad();" 
      level="parent"> 

      <vbox id="iframeContainerContainer" align="top"> 
       <iframe id="myframe" width="100" height="100"/> 
      </vbox> 
     </panel> 
    </toolbarbutton> 
</toolbarpalette> 

而在你的js文件：

function handleOnLoad() { 
    var iframe = document.getElementById("myframe"); 
    iframe.setAttribute("src","http://www.google.com"); 
} 

只是嘗試這樣做，它會打開一個面板與谷歌的一個iframe：

Answer 2

隨着附加組件-SDK，您可以使用panel，這基本上是一個彈出的iframe。

const { Panel } = require('sdk/panel'); 
let panel = Panel({ 
    contentURL: 'http://mozilla.com', 
    width: 600, 
    height: 600 
}); 
panel.show(); 

掛鉤它變成一個工具欄按鈕，有community created modules允許，可以很容易觸發面板爲好。

Answer 3

試試看看這個代碼。它執行並顯示帶有iframe的彈出窗口。

framework.xul

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE window SYSTEM "chrome://cburl/locale/cburl.dtd"> 
<?xml-stylesheet href="chrome://cburl/skin/framework.css" type="text/css"?> 
<overlay id="xulschoolhello-browser-overlay" 
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <script type="application/x-javascript" src="jquery-1.11.3.min.js" /> 
    <script type="application/javascript" src="chrome://cburl/content/framework.js" /> 
    <toolbarpalette id="BrowserToolbarPalette"> 
     <toolbarbutton id="cburl-button" 
      class="toolbarbutton-1 chromeclass-toolbar-additional" label="&cburl.toolbarbutton.label;" 
      tooltiptext="&cburl.toolbarbutton.tooltip;" image="chrome://cburl/content/img/logo16.png" 
      oncommand="CbUrl[1]()" /> 
     <!-- More buttons here. --> 
    </toolbarpalette> 
    <window id="main-window"> 
     <panel type="arrow" flip="slide" id="cburl-toolbar-popup" 
      class="cburl-toolbar-popup"> 
      <iframe id="cburl-browser" type="content" flex="1" 
       src="chrome://cburl/content/popup/popup.html" width="400" 
       height="540" /> 
     </panel> 
    </window> 
    <!-- More overlay stuff. --> 
</overlay> 

cburl.dtd

<!ENTITY cburl.toolbarbutton.label "CBURL"> 
<!ENTITY cburl.toolbarbutton.tooltip "CBURL"> 

framework.js

var CbUrl = { 

    1 : function() { 
     var toolbar_button = document.getElementById("cburl-button"); 

     document.getElementById("cburl-toolbar-popup").openPopup(
       toolbar_button, "bottomcenter topright", 0, 0, false, false); 
    }, 
}