在Firefox擴展中複製Google Chrome瀏覽器操作popup效果

默認情況下，Chrome瀏覽器操作提供了非常好的彈出效果。在Firefox擴展中複製Google Chrome瀏覽器操作popup效果

死ImageShack的圖像鏈接刪除

懸停在工具欄圖標提供一個整潔的懸停效果。
單擊工具欄圖標會顯示一個很好的動畫，它會打開彈出式HTML文件。
彈出窗口與按下的按鈕對齊。
單擊工具欄圖標再次淡出彈出窗口。

有關如何使用Firefox擴展近似這種效果的任何想法？有沒有人成功實現了類似這種效果？

謝謝。

2010-01-16 CPrimer

我已經發表了Jetpack的模塊，它帶來的'chrome.browserAction' API和外觀到Firefox，見[這個答案]（http://stackoverflow.com/a/16787760/938089）的演示。 – 2013-05-28 08:57:39

如果有人正在研究這一點，並試圖找出答案，最終使用在browser.xul文件toolbarpalette在面板內的工作很適合我。

來源

2010-01-27 20:50:04 CPrimer

我試圖找到這個問題的答案。與Chrome相比，Firefox的擴展看起來很痛苦。 – cnanney 2010-12-11 06:11:31

謝謝克里斯。對於我們開始使用FF的人員，您能否展示一些演示代碼？乾杯。 – mikemaccana 2011-01-28 16:45:41

演示會很好 – 2011-02-14 15:17:19

大家誰是剛剛開始你的第一個Firefox擴展，像我一樣在這裏是一個示例代碼：

yourextname \鉻\內容\ 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 \皮膚\ 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」字符串。

來源

2011-05-25 09:34:53

在Firefox擴展中複製Google Chrome瀏覽器操作popup效果

回答

相關問題