Question

我正在尝试开发一个mozilla扩展。我只需要在弹出窗口中显示iframe，但不知道如何执行此操作。

我的要求是

在顶部导航工具栏上添加扩展程序按钮
点击扩展程序按钮时，在弹出窗口中显示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");
}

试过这个，然后打开一个带有google iframe的面板：

enter image description here

Answer 2

使用Addon-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

origin/master

<强> cburl.dtd

<?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>

<强> framework.js

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

创建mozilla扩展以在其中显示弹出窗口和iframe

3 个答案: