在 Firefox 扩展中复制 Google Chrome 浏览器操作弹出效果答案

【问题标题】：Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension在 Firefox 扩展中复制 Google Chrome 浏览器操作弹出效果
【发布时间】：2011-01-05 18:01:03
【问题描述】：

默认情况下，Chrome 浏览器操作提供了非常好的弹出效果。

已删除已删除的 ImageShack 图片链接

将鼠标悬停在工具栏图标上可提供简洁的悬停效果。
单击工具栏图标会显示一个漂亮的动画，打开弹出的 html 文件。
弹出窗口与按下的按钮对齐。
再次单击工具栏图标会淡出弹出窗口。

关于如何使用 Firefox 扩展来近似这种效果有什么想法吗？有没有人成功实现过类似的效果？

谢谢。

【问题讨论】：

我发布了一个 Jetpack 模块，它为 Firefox 带来了 chrome.browserAction API 和外观，请参阅 this answer 进行演示。

标签： google-chrome xul firefox-addon google-chrome-extension

【解决方案1】：

对于像我在这里一样刚开始使用您的第一个 Firefox 扩展的每个人，这里有一个示例代码：

yourextname\chrome\content\browser.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://yourextname/skin/toolbar.css" type="text/css"?>

<overlay id="yourextname_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <popupset>
        <menupopup id="yourextname_menu_popup">
            <menuitem label="Website" oncommand="gBrowser.selectedTab = gBrowser.addTab('http://www.your-website.com/');" />
            <menuseparator />
            <menuitem label="Options" oncommand="window.open('chrome://yourextname/content/options.xul', 'Options', 'dialog,chrome,modal,titlebar,toolbar,centerscreen=yes');" />
        </menupopup>

        <panel id="yourextname_popup" noautohide="false" noautofocus="true">
            <label control="vvvname" value="Name:"/><textbox id="vvvname"/>
        </panel>
    </popupset>

    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="yourextname_toolbar_button" class="toolbarbutton-1" context="yourextname_menu_popup" oncommand="document.getElementById('yourextname_popup').openPopup(document.getElementById('yourextname_toolbar_button'), 'after_start', 0, 0, false, false);" label="button name" tooltiptext="tooltip" />
    </toolbarpalette>
</overlay>

yourextname\skin\toolbar.css
这会将图标添加到工具栏按钮：

#yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_024.png);
}

toolbar[iconsize="small"] #yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_016.png);
}

yourextname\chrome.manifest

content yourextname chrome/content/
overlay chrome://browser/content/browser.xul chrome://yourextname/content/overlay.xul

skin    yourextname classic/1.0 skin/
style   chrome://global/content/customizeToolbar.xul chrome://yourextname/skin/toolbar.css

注意：确保将所有“yourextname”字符串替换为唯一的字符串，最好使用您的扩展名。

【讨论】：

【解决方案2】：

如果有人对此进行研究并试图找出答案，最终使用 browser.xul 文件中工具栏面板中的面板对我来说效果很好。

【讨论】：

我试图找到这个问题的答案。与 Chrome 相比，Firefox 扩展似乎是一个很大的痛苦。
谢谢克里斯。对于我们这些刚开始使用 FF 的人，你能展示一些演示代码吗？干杯。