Cómo crear y agregar un botón en la barra de herramientas de navegación de Firefox [Guía]

Hoy traemos una guía de Firefox quecualquiera 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 con diferentes funcionalidades proporcionadas 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, uno puede construir fácilmente una nueva extensión que se comporte como se indica, se sienta en una posición definida y sea altamente personalizable. Esta publicación cubre cómo crear una extensión simple: un botón de barra de herramientas que proporcionará una funcionalidad simple.

Para comenzar, primero debes averiguar extensiones carpeta (una que reside en la carpeta de Perfiles de Firefox). Los usuarios de Windows 7 y Windows Vista encontrarán esta carpeta aquí;

Sin embargo, si está utilizando Windows XP, escriba %Datos de aplicación% en la consola de Windows Run y ​​presiona Enter.

Una vez el extensiones se abre la carpeta, cree una nueva carpeta con el nombre de [email protected] 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 vamos a editar estos archivos en el editor de texto, le recomendamos que use cualquier editor con soporte utf-8, como - Bloc de notas incorporado de Windows.

Primero, abra chrome.manifest archivo e inserte las siguientes líneas de código init. El código proporcionado 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 edita install.rdf archivo, debe insertar las siguientes líneas de códigoen eso. Puede cambiar la descripción general del botón, el texto se puede agregar 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="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest"
em:name="AT"
em:description="AddictiveTips"
em:creator="Usman"
em:id="[email protected]"
em:version="1.0"
em:homepageURL="http://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, allíno es 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 los valores y los efectos será muy sencillo, sin embargo, si está escuchando su nombre por primera vez, simplemente inserte las siguientes líneas de código de estilo en button.css archivo, una vez hecho, 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 abra el button.xul archivo en un editor de texto e inserte las siguientes líneasde código Recuerde que también proporcionamos código para Thunderbird y Sunbird, si ha seguido esta guía solo para Firefox, puede excluir líneas relacionadas con Thunderbird y Sunbird.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://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 aobtén los mejores resultados. Sin embargo, puede crear imágenes de cualquier tamaño que no exceda 48px de ancho y largo. A continuación puede ver las imágenes de los botones que estamos utilizando: 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 dos tamaños predeterminados de las imágenes. Icon.jpg imagen se refiere a la imagen del icono de extensión principal (la que verá en la galería de extensiones de Firefox)

button-1.jpg

Icon.jpg

Una vez creado, muévase al quinto archivo: button.js. Este archivo JavaScript tiene mucha importancia,ya que definirá la funcionalidad principal del botón. Puede agregar un script de muestra que solicite un mensaje para probar la funcionalidad o buscar un script avanzado para hacer lo que desee. También hay muchos scripts diseñados 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 básico, crearemos un elemento de marcador simple que abrirá el sitio web especificado. Abre el button.js archivo 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ás listo para ir, te recomendamos que revises elcódigo que ha insertado en los archivos mencionados y verifique nuevamente las dimensiones de la imagen. Para instalar la extensión recién creada, cierre todas las instancias en ejecución de Firefox y luego iníciela. Si todo salió bien, probablemente verás un nuevo mensaje de instalación de complemento, 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 dondetienes que 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 donde desee.

Ahora solo haga clic en el botón para verificar la funcionalidad insertada en el archivo JavaScript.

La funcionalidad del botón resultante esdefinido 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 medio y experto ciertamente pueden usarlo más y agregar la funcionalidad requerida en el archivo JavaScript principal.