2010-01-16 1 views
11

Действия браузера Chrome по умолчанию обеспечивают действительно приятный всплывающий эффект.Репликация эффекта действия браузера Google Chrome в расширении Firefox

мертвый ImageShack изображение ссылка удалена

  • парит над значок на панели инструментов обеспечивает аккуратный эффект парения.

  • Щелчок на значке на панели инструментов показывает приятную анимацию, которая открывает всплывающий html-файл.

  • Всплывающее окно выровнено с нажатой кнопкой.

  • При нажатии на значок на панели инструментов снова исчезает всплывающее окно.

Любые мысли о том, как аппроксимировать этот эффект с расширениями Firefox? Кто-нибудь успешно достиг чего-то подобного этому эффекту?

Спасибо.

+1

Я опубликовал модуль Jetpack, который привносит API-интерфейс 'chrome.browserAction' и внешний вид в Firefox, см. [Этот ответ] (http://stackoverflow.com/a/16787760/938089) для демонстрации. –

ответ

4

В случае, если кто-либо исследует это и пытается найти ответ, в конечном счете, используя панель в панели инструментов в файле browser.xul, я хорошо работал для меня.

+5

Я пытался найти ответ на этот вопрос. По сравнению с Chrome расширения Firefox кажутся большой болью. – cnanney

+1

Спасибо, Крис. Для тех из нас, кто начал работу с FF, вы можете показать какой-нибудь демо-код? Приветствия. – mikemaccana

+3

демо было бы неплохо –

7

Для всех, кто только начинает с первого расширения 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 \ 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" строки с чем-то уникальным, лучше всего с вашим именем расширения.