Como criar e adicionar botão na barra de ferramentas de navegação do Firefox [Guia]

Hoje, estamos trazendo um guia do Firefox quequalquer pessoa pode seguir para criar um botão personalizado na barra de ferramentas de navegação. Juntamente com os botões visíveis na barra de ferramentas de navegação, há uma lista de outros botões com diferentes funcionalidades fornecidas no Firefox, que podem ser adicionados em qualquer lugar da barra de ferramentas e podem ser personalizados de acordo com suas necessidades. Como a posição e o comportamento do botão podem ser alterados sem exigir nenhum conhecimento extra, é possível criar facilmente uma nova extensão que se comporte conforme as instruções, fique em posição definida e seja altamente personalizável. Esta postagem aborda como criar uma extensão simples - um botão da barra de ferramentas que fornecerá uma funcionalidade simples.

Para começar, primeiro você precisa descobrir extensões pasta (que reside na pasta Perfis do Firefox). Os usuários do Windows 7 e Windows Vista encontrarão esta pasta aqui;

No entanto, se você estiver usando o Windows XP, digite %Dados do aplicativo% no console do Windows Run e pressione Enter.

Uma vez o extensões pasta for aberta, crie uma nova pasta com o nome de [email protected] iniciar.

Abra a pasta recém-criada e crie um novo diretório, a saber cromada, junto com dois arquivos - chrome.manifest e install.rdf. Agora estaremos editando esses arquivos no editor de texto, e você deve usar qualquer editor com suporte ao utf-8, como - Bloco de notas embutido no Windows.

Primeiro, abra chrome.manifest arquivo e insira as seguintes linhas de código init. O código fornecido abaixo também é funcional para as janelas de correio, composição e catálogo de endereços do Thunderbird e para o Sunbird. No entanto, se você precisar usar o botão apenas no Firefox, as linhas de código do Thunderbird e Sunbird poderão ser excluídas.

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

Depois de inserir o código no arquivo, feche-o após salvar as alterações. Agora edite install.rdf arquivo, você precisa inserir as seguintes linhas de códigoiniciar. Você pode alterar a descrição geral do botão, o texto pode ser adicionado nas linhas 6, 7 e 8 do código (deve estar entre aspas duplas), inserir o nome do botão, o texto descritivo e o nome do criador.

<?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>

Depois de alterar a descrição, salve as alterações e feche o arquivo. Lembre-se da pasta recém-criada (cromada), onde criaremos 3 arquivos e inseriremos 2 imagens. Primeiro crie 3 arquivos com os seguintes nomes;

• button.css
• button.xul
• button.js

Agora vamos aplicar o estilo ao botão, lánão é nada complexo aqui, aplicaremos apenas um estilo básico sobre o design do botão (defina as dimensões da imagem e passe o mouse sobre o botão). Se você estiver familiarizado com o design de um arquivo CSS (Cascading Style Sheet), a alteração de valores e efeitos será muito fácil; no entanto, se você estiver ouvindo seu nome pela primeira vez, basta inserir as seguintes linhas de código de estilo em button.css Quando terminar, salve as alterações e feche-o.

#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);}

Agora abra o button.xul em um editor de texto e insira as seguintes linhasde código. Lembre-se de que também fornecemos código para o Thunderbird e o Sunbird. Se você seguir este guia apenas para o Firefox, poderá excluir linhas relacionadas ao Thunderbird e ao 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>

Agora você precisa inserir dois arquivos de imagem com nomes button-1.jpg e Icon.jpg com dimensões 40 × 48 e 48 × 48 respectivamente paraobtenha os melhores resultados. No entanto, você pode criar imagens de qualquer tamanho que não excedam 48px de largura e comprimento. Abaixo, você pode ver as imagens dos botões que estamos usando - button-1.jpg image é para o botão da barra de ferramentas com os respectivos tamanhos (grande e pequeno) e o efeito de foco pode ser visto abaixo dos tamanhos das duas imagens padrão. Icon.jpg image refere-se à imagem principal do ícone de extensão (a que você verá na galeria de extensões do Firefox)

button-1.jpg

Icon.jpg

Depois de criado, vá para o quinto arquivo - button.js. Esse arquivo JavaScript tem muita importância,pois definirá a principal funcionalidade do botão. Você pode adicionar um script de amostra que solicite uma mensagem para testar a funcionalidade ou procurar um script avançado para fazer o que quiser. Além disso, existem muitos scripts criados especialmente para atender aos requisitos, você também pode conferir alguns scripts simples, mas úteis aqui. Como este guia é para usuários de nível básico, criaremos um item de marcador simples que abrirá o site especificado. Abra o button.js arquive e insira as seguintes linhas de código para criar um botão de marcador (para mostrar na barra de ferramentas do Firefox).

CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}

Agora que você está pronto, achamos que você deve verificar ascódigo que você inseriu nos arquivos mencionados e verifique as dimensões da imagem novamente. Para instalar a extensão recém-criada, feche todas as instâncias em execução do Firefox e inicie-a. Se tudo der certo, você provavelmente verá um novo prompt de instalação do complemento, indicando que a extensão foi instalada com sucesso.

Para fazer com que o botão recém-criado apareça na barra de ferramentas de navegação, no menu Exibir, no submenu Barras de ferramentas, clique em Personalizar.

A caixa de diálogo Personalizar barra de ferramentas será exibida, de ondevocê precisa arrastar o botão recém-criado sobre a barra de ferramentas de navegação. Depois de inserido, você também pode alterar sua posição arrastando-o para onde quiser.

Agora basta clicar no botão para verificar a funcionalidade inserida no arquivo JavaScript.

A funcionalidade do botão resultante édefinido pelo usuário, depende de suas habilidades o quanto você pode calibrar suas funções. Usuários iniciantes podem criar atalhos, vincular aplicativos, criar marcadores de páginas, enquanto os usuários no limbo entre nível médio e especialista podem certamente fazer mais uso dele e adicionar a funcionalidade necessária no arquivo JavaScript principal.