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

Question

我正在尝试开发 Mozilla 扩展。我只需要在弹出窗口中显示一个 iframe，但不知道该怎么做。

我的要求是

1. 在顶部导航工具栏上添加扩展按钮
2. 单击扩展按钮时，在弹出窗口中显示 iframe。

我没有找到任何类似的教程。请帮我。

谢谢...

哈里普拉萨德

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

使用 Addon-SDK，您可以使用面板，它本质上是一个弹出 iframe。

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

将其连接到工具栏按钮中，社区创建的模块也可以轻松触发面板。

Answer 3

试试这个代码。它执行并显示带有 iframe 的弹出窗口。

框架.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">

框架.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);
    },
}