Replicar el efecto emergente de acciones del navegador de Google Chrome en una extensión de Firefox

Las acciones del navegador Chrome proporcionan un efecto emergente muy agradable de forma predeterminada.Replicar el efecto emergente de acciones del navegador de Google Chrome en una extensión de Firefox

muertos enlace de imagen ImageShack eliminado

pasar el cursor sobre el icono de la barra de herramientas proporciona un efecto de vuelo estacionario ordenada.
Al hacer clic en el icono de la barra de herramientas, se muestra una bonita animación que abre el archivo html emergente.
La ventana emergente se alinea con el botón que se presiona.
Al hacer clic en el ícono de la barra de herramientas se desvanece la ventana emergente.

¿Alguna idea sobre cómo aproximar este efecto con las extensiones de Firefox? Alguien ha logrado con éxito algo similar a este efecto?

Gracias.

Fuente

2010-01-16 CPrimer

He publicado un módulo Jetpack que trae la API 'chrome.browserAction' y la apariencia a Firefox, ver [esta respuesta] (http://stackoverflow.com/a/16787760/938089) para una demostración. –

En caso de que alguien esté investigando esto y tratando de encontrar la respuesta, en última instancia usar un panel dentro de la barra de herramientas en el archivo browser.xul funcionó bien para mí.

Fuente

2010-01-27 20:50:04 CPrimer

Estaba tratando de encontrar una respuesta a esta pregunta. Comparado con Chrome, las extensiones de Firefox parecen un gran dolor. – cnanney

Gracias Chris. Para aquellos de nosotros que comenzamos con FF, ¿puedes mostrar un código de demostración? Aclamaciones. – mikemaccana

demostración sería agradable –

Para todo el mundo que está empezando con su primera extensión para Firefox como lo hice aquí es un código de ejemplo:

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
Esto agregará un icono al botón de la barra de herramientas:

#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: Asegúrese de que reemplaza todas las "cadenas" yourextname con algo único, el mejor con su nombre de extensión.

Fuente

2011-05-25 09:34:53

Replicar el efecto emergente de acciones del navegador de Google Chrome en una extensión de Firefox

Respuesta

Cuestiones relacionadas