Replica delle azioni del browser di Google Chrome popup Effetto in un'estensione per Firefox

Le azioni browser di Chrome forniscono un effetto popup veramente carino per impostazione predefinita.Replica delle azioni del browser di Google Chrome popup Effetto in un'estensione per Firefox

morto immagine link ImageShack rimosso

passa il mouse sopra l'icona della barra degli strumenti fornisce un effetto hover ordinata.
Facendo clic sull'icona della barra degli strumenti viene visualizzata una bella animazione che apre il file html popup.
Il popup è allineato con il pulsante premuto.
Facendo clic sull'icona della barra degli strumenti di nuovo si dissolve il popup.

Qualche idea su come approssimare questo effetto con le estensioni di Firefox? Qualcuno ha raggiunto con successo qualcosa di simile a questo effetto?

Grazie.

fonte

2010-01-16 CPrimer

Ho pubblicato un modulo Jetpack che include l'API 'chrome.browserAction' e l'aspetto per Firefox, vedere [questa risposta] (http://stackoverflow.com/a/16787760/938089) per una demo. –

Nel caso in cui qualcuno stia ricercando questo e cercando di trovare la risposta, in ultima analisi, l'utilizzo di un pannello nella barra degli strumenti nel file browser.xul ha funzionato bene per me.

fonte

2010-01-27 20:50:04 CPrimer

Stavo cercando di trovare una risposta a questa domanda. Rispetto a Chrome, le estensioni di Firefox sembrano un grande dolore. – cnanney

Grazie Chris. Per quelli di noi che iniziano con FF, puoi mostrare qualche codice demo? Saluti. La demo – mikemaccana

sarebbe bella –

Per tutti coloro che sono appena agli inizi con la prima estensione di Firefox come ho fatto qui è un codice di esempio:

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
Ciò aggiungerà l'icona al pulsante della barra degli strumenti:

#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

NOTA: assicurarsi di sostituire tutte le "yourextname" stringhe con qualcosa di unico, meglio con il nome di estensione.

fonte

2011-05-25 09:34:53

Replica delle azioni del browser di Google Chrome popup Effetto in un'estensione per Firefox

risposta

Problemi correlati