创建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); 
    }, 
}