Come creare e aggiungere pulsante nella barra degli strumenti di navigazione di Firefox [Guida]

Oggi stiamo presentando una guida per Firefoxchiunque può seguire per creare un pulsante personalizzato nella barra degli strumenti di navigazione. Insieme ai pulsanti visibili nella barra degli strumenti di navigazione, è presente un elenco di altri pulsanti con funzionalità diverse fornite in Firefox che possono essere aggiunti ovunque sulla barra degli strumenti e possono essere personalizzati in base alle proprie esigenze. Poiché la posizione e il comportamento del pulsante possono essere modificati senza richiedere alcuna conoscenza aggiuntiva, si può facilmente creare una nuova estensione che si comporta come indicato, si trova in una posizione definita, pur essendo altamente personalizzabile. Questo post illustra come creare una semplice estensione: un pulsante della barra degli strumenti che fornirà una semplice funzionalità.

Per iniziare, prima devi scoprirlo estensioni cartella (una che risiede nella cartella Profili di Firefox). Gli utenti di Windows 7 e Windows Vista troveranno questa cartella qui;

Tuttavia, se stai utilizzando Windows XP, digita % AppData% nella console di Windows Run e premi Invio.

Una volta che il estensioni cartella viene aperta, creare una nuova cartella con il nome di [email protected] dentro.

Aprire la cartella appena creata e creare una nuova directory, vale a dire cromo, insieme a due file - chrome.manifest e install.rdf. Ora modificheremo questi file nell'editor di testo, calcoliamo che utilizzerai qualsiasi editor con supporto utf-8, come - Blocco note integrato di Windows.

Innanzitutto, apri chrome.manifest file e inserire le seguenti righe di codice init. Il codice fornito di seguito è anche funzionale per le finestre di posta, comporre e rubrica di Thunderbird e per Sunbird. Tuttavia, se è necessario utilizzare il pulsante solo in Firefox, è possibile escludere righe di codice per Thunderbird e 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 volta inserito il codice nel file, chiuderlo dopo aver salvato le modifiche. Ora modifica install.rdf file, è necessario inserire le seguenti righe di codicedentro. Puoi modificare la descrizione generale del pulsante, il testo può essere aggiunto tra 6, 7 e ottava riga del codice (deve essere racchiuso tra virgolette), puoi inserire il nome del pulsante, il testo descrittivo e il nome dell'autore.

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

Dopo aver modificato la descrizione, salva le modifiche e chiudi il file. Ricorda la cartella appena creata (cromo), dove creeremo 3 file e inseriremo 2 immagini. Per prima cosa crea 3 file con i seguenti nomi;

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

Ora applicheremo lo stile al pulsante, lìnon è niente di complesso qui, applicheremo solo uno stile di base sul design del pulsante (definisci le dimensioni dell'immagine e l'effetto hover sul pulsante). Se hai familiarità con la progettazione di un file CSS (Cascading Style Sheet), la modifica di valori ed effetti sarà un gioco da ragazzi, tuttavia, se senti il ​​suo nome per la prima volta, inserisci le seguenti righe di stile nel codice button.css file, una volta fatto, salva le modifiche e chiudilo.

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

Ora apri il button.xul file in un editor di testo e inserire le seguenti righedi codice. Ricorda che stiamo fornendo codice anche per Thunderbird & Sunbird, se hai seguito questa guida solo per Firefox, puoi escludere le linee relative a Thunderbird & 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>

Ora devi inserire due file di immagini con nomi button-1.jpg e Icon.jpg con dimensioni 40 × 48 e 48 × 48 rispettivamente aottenere i migliori risultati. Tuttavia, puoi creare immagini di qualsiasi dimensione che non superino la larghezza e la lunghezza di 48 px. Di seguito puoi vedere le immagini dei pulsanti che stiamo usando - button-1.jpg l'immagine è per il pulsante della barra degli strumenti con le rispettive dimensioni (grande e piccola) e l'effetto al passaggio del mouse può essere visto sotto le dimensioni di entrambe le immagini predefinite. Icon.jpg immagine si riferisce all'icona dell'estensione principale (quella che vedrai nella galleria delle estensioni di Firefox)

button-1.jpg

Icon.jpg

Una volta creato, passa al 5 ° file - button.js. Questo file JavaScript ha molta importanza,in quanto definirà la funzionalità principale del pulsante. È possibile aggiungere uno script di esempio che richiede un messaggio per testare la funzionalità o andare allo script anticipato per fare ciò che si desidera. Inoltre ci sono molti script creati appositamente per soddisfare i requisiti di uno, puoi anche dare un'occhiata ad alcuni script semplici ma utili qui. Poiché questa guida è destinata agli utenti di livello elementare, creeremo un semplice elemento segnalibro che aprirà il sito Web specificato. Apri il button.js file e inserire le seguenti righe di codice per creare un pulsante segnalibro (da mostrare sulla barra degli strumenti di Firefox).

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

Ora sei a posto, ti contiamo di controllarecodice che hai inserito nei file citati e verifica nuovamente le dimensioni dell'immagine. Per installare l'estensione appena creata, chiudere tutte le istanze in esecuzione di Firefox e quindi avviarla. Se tutto è andato bene, probabilmente vedresti un nuovo prompt di installazione del componente aggiuntivo, a indicare che l'estensione è stata installata correttamente.

Per visualizzare il pulsante appena creato nella barra degli strumenti di navigazione, dal menu Visualizza, nel sottomenu Barre degli strumenti, fare clic su Personalizza.

Verrà visualizzata la finestra di dialogo Personalizza barra degli strumenti, da dovedevi trascinare il pulsante appena creato sulla barra degli strumenti di navigazione. Una volta inserito, puoi anche cambiarne la posizione trascinandolo dove preferisci.

Ora fai clic sul pulsante per verificare la funzionalità inserita nel file JavaScript.

La funzionalità del pulsante risultante èdefinito dall'utente, quindi dipende dalle tue capacità quanto puoi calibrare le sue funzioni. Gli utenti inesperti possono creare scorciatoie, collegare applicazioni, progettare segnalibri, mentre gli utenti in un limbo tra livello medio ed esperto possono sicuramente farne un uso maggiore e aggiungere le funzionalità richieste nel file JavaScript principale.