Hoy, traemos una guía de Firefox que cualquiera puede seguir para crear un botón personalizado en la barra de herramientas de navegación. Junto con los botones visibles en la barra de herramientas de navegación, hay una lista de otros botones que tienen diferentes funcionalidades provistas en Firefox que se pueden agregar en cualquier lugar de la barra de herramientas y se pueden personalizar según sus necesidades. Dado que la posición y el comportamiento del botón se pueden cambiar sin requerir ningún conocimiento adicional, se puede construir fácilmente una nueva extensión que se comporte según las instrucciones, se asiente en una posición definida y sea altamente personalizable. Esta publicación cubre cómo crear una extensión simple: un botón de la barra de herramientas que proporcionará una funcionalidad simple.
Para comenzar, primero debes averiguarlo extensiones carpeta (una que reside en la carpeta Perfiles de Firefox). Los usuarios de Windows 7 y Windows Vista encontrarán esta carpeta aquí;
C: Users << nombre de usuario >> AppData Roaming Mozilla Firefox Profiles << nombre de perfil >> extensiones
Sin embargo, si usa Windows XP, escriba %Datos de aplicación% en la consola de Windows Ejecutar y presione Enter.
Ahora abra la carpeta de Firefox y luego Perfiles ->
Una vez el extensiones se abre la carpeta, cree una nueva carpeta con el nombre de custom-toolbar-button@example.com en eso.
Abra la carpeta recién creada y cree un nuevo directorio a saber cromo, junto con dos archivos – chrome.manifest y install.rdf. Ahora editaremos estos archivos en el editor de texto, creemos que debe usar cualquier editor con soporte UTF-8, como el Bloc de notas integrado de Windows.
Primero, abre chrome.manifest e inserte las siguientes líneas de código init. El código que se proporciona a continuación también es funcional para las ventanas de correo, redacción y libreta de direcciones de Thunderbird, y para Sunbird. Sin embargo, si necesita usar el botón solo en Firefox, se pueden excluir las líneas de código para Thunderbird y Sunbird.
content custombutton chrome/ style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css # Firefox overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # Thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # Thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # Thunderbird address book overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul # Sunbird overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul
Una vez que se inserta el código en el archivo, ciérrelo después de guardar los cambios. Ahora editar install.rdf archivo, debe insertar las siguientes líneas de código en él. Puede cambiar la descripción general del botón, se puede agregar texto en las líneas 6, 7 y 8 del código (debe estar entre comillas dobles), puede ingresar el nombre del botón, el texto descriptivo y el nombre del creador.
<?xml version="1.0"?>
<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="https://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest"
em:name="AT"
em:description="AddictiveTips"
em:creator="Usman"
em:id="custom-toolbar-button@example.com"
em:version="1.0"
em:homepageURL="https://developer.mozilla.org/en/docs/Custom_Toolbar_Button"
em:iconURL="chrome://custombutton/content/icon.jpg" >
<em:targetApplication><!-- Firefox -->
<Description
em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Thunderbird -->
<Description
em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Sunbird -->
<Description
em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
em:minVersion="0.2.9"
em:maxVersion="99" />
</em:targetApplication>
<em:file>
<Description
about="urn:mozilla:extension:custombutton"
em:package="content/custombutton/" />
</em:file>
</Description>
</RDF>
Una vez que haya cambiado la descripción, guarde los cambios y cierre el archivo. Recuerde la carpeta recién creada (cromo), donde crearemos 3 archivos e insertaremos 2 imágenes. Primero cree 3 archivos con los siguientes nombres;
- button.css
- button.xul
- button.js
Ahora aplicaremos estilo al botón, no hay nada complejo aquí, solo aplicaremos un estilo básico sobre el diseño del botón (defina las dimensiones de la imagen y el efecto de desplazamiento sobre el botón). Si está familiarizado con el diseño de un archivo CSS (Hoja de estilo en cascada), cambiar valores y efectos será muy sencillo; sin embargo, si escucha su nombre por primera vez, simplemente inserte las siguientes líneas de código de estilo en button.css archivo, una vez hecho esto, guarde los cambios y ciérrelo.
#custom-button-1,
#wrapper-custom-button-1
{list-style-image: url("chrome://custombutton/content/button-1.jpg");}
/* common style for all custom buttons */
.custombutton {-moz-image-region: rect( 0px 24px 24px 0px);}
.custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);}
[iconsize="small"] .custombutton
{-moz-image-region: rect( 0px 40px 16px 24px);}
[iconsize="small"] .custombutton:hover
{-moz-image-region: rect(24px 40px 40px 24px);}
Ahora abre el button.xul archivo en un editor de texto e inserte las siguientes líneas de código. Recuerde que también proporcionamos código para Thunderbird y Sunbird, si ha estado siguiendo esta guía solo para Firefox, puede excluir las líneas relacionadas con Thunderbird y Sunbird.
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="https://www.addictivetips.com/internet-tips/how-to-create-and-add-firefox-navigation-toolbar-button-guide/chrome://custombutton/content/button.css"?> <!DOCTYPE overlay > <overlay id="custombutton-overlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- Firefox --> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird mail --> <toolbarpalette id="MailToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird compose --> <toolbarpalette id="MsgComposeToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird address book --> <toolbarpalette id="AddressBookToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Sunbird --> <toolbarpalette id="calendarToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- button details --> <toolbarbutton id="custom-button-1" label="Custom" tooltiptext="My custom toolbar button" oncommand="CustomButton[1]()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" /> </overlay>
Ahora necesita insertar dos archivos de imagen con nombres button-1.jpg y Icon.jpg con dimensiones 40 × 48 y 48 × 48 respectivamente para obtener los mejores resultados. Sin embargo, puede crear imágenes de cualquier tamaño que no superen los 48px de ancho y largo. A continuación puede ver las imágenes de los botones que estamos usando: button-1.jpg La imagen es para el botón de la barra de herramientas con los tamaños respectivos (grande y pequeño) y el efecto de desplazamiento se puede ver debajo de los tamaños de las imágenes predeterminadas. Icon.jpg la imagen se refiere a la imagen del icono de la extensión principal (la que verá en la galería de extensiones de Firefox)
button-1.jpg
Icon.jpg
Una vez creado, pase al quinto archivo – button.js. Este archivo JavaScript tiene mucha importancia, ya que definirá la funcionalidad principal del botón. Puede agregar una secuencia de comandos de muestra que solicita un mensaje para probar la funcionalidad o buscar una secuencia de comandos avanzada para hacer lo que quiera. También hay muchos scripts ideados especialmente para cumplir con los requisitos de uno, también puede consultar algunos scripts simples pero útiles aquí. Dado que esta guía es para usuarios de nivel elemental, crearemos un elemento de marcador simple que abrirá el sitio web especificado. Abre el button.js e inserte las siguientes líneas de código para crear un botón de marcador (para mostrar en la barra de herramientas de Firefox).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}
Ahora que está listo para comenzar, creemos que debe verificar el código que ha insertado en los archivos mencionados y verificar las dimensiones de la imagen nuevamente. Para instalar la extensión recién creada, cierre todas las instancias en ejecución de Firefox y luego inícielo. Si todo salió bien, probablemente verá un nuevo mensaje de instalación del complemento, lo que indica que la extensión se ha instalado correctamente.
Para que el botón recién creado aparezca en la barra de herramientas de navegación, en el menú Ver, en el submenú Barras de herramientas, haga clic en Personalizar.
Aparecerá el cuadro de diálogo Personalizar barra de herramientas, desde donde debe arrastrar el botón recién creado sobre la barra de herramientas de navegación. Una vez insertado, también puede cambiar su posición arrastrándolo a cualquier lugar que desee.
Ahora simplemente haga clic en el botón para verificar la funcionalidad insertada en el archivo JavaScript.
La funcionalidad del botón resultante está definida por el usuario, por lo que depende de sus habilidades cuánto puede calibrar sus funciones. Los usuarios novatos pueden crear accesos directos, vincular aplicaciones, diseñar marcadores, mientras que los usuarios en el limbo entre el nivel promedio y experto ciertamente pueden hacer más uso de él y agregar la funcionalidad requerida en el archivo JavaScript principal.
