Google Chrome Actions Réplication du navigateur de popup effet dans une extension Firefox
-
21-09-2019 - |
Question
Actions du navigateur Chrome offrent un effet pop-up vraiment agréable par défaut.
un lien mort d'image ImageShack enlevé
-
Passez la souris sur l'icône de la barre d'outils donne un effet de vol stationnaire propre.
-
En cliquant sur l'icône de la barre d'outils affiche une belle animation qui ouvre le fichier html pop-up.
-
Le dialogue est aligné avec le bouton est enfoncé.
-
En cliquant sur l'icône de la barre d'outils disparaît à nouveau la fenêtre contextuelle.
Toute réflexion sur la façon d'approcher cet effet avec des extensions Firefox? Quelqu'un at-il réalisé avec succès quelque chose de semblable à cet effet?
Merci.
La solution 2
Dans le cas où tout le monde étudie actuellement ce et essayer de trouver la réponse, en utilisant finalement un panneau dans le toolbarpalette dans le fichier browser.xul a bien fonctionné pour moi.
Autres conseils
Pour tout le monde qui vient de commencer votre première extension Firefox comme je l'ai fait ici est un exemple de code:
yourextname \ contenu chrome \ \ 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 \ peau \ toolbar.css
Cela va ajouter l'icône du bouton de la barre d'outils:
#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
REMARQUE: Assurez-vous de remplacer toutes les chaînes « yourextname » avec quelque chose d'unique, mieux avec votre nom d'extension
.