Cum Pentru a crea și a adăuga butonul în bara de instrumente de navigare Firefox [Ghid]

Astăzi, aducem un ghid Firefox careoricine poate urma pentru a crea un buton personalizat în bara de instrumente de navigare. Alături de butoanele vizibile din bara de instrumente de navigare, există o listă de alte butoane cu funcționalități diferite furnizate în Firefox, care pot fi adăugate oriunde pe bara de instrumente și pot fi personalizate în funcție de nevoile dvs. Deoarece poziția și comportamentul butonului pot fi modificate fără a necesita cunoștințe suplimentare, se poate construi cu ușurință o nouă extensie care se comportă așa cum este indicat, se află într-o poziție definită, fiind în același timp personalizabilă. Această postare acoperă modul de a crea o extensie simplă - un buton al barei de instrumente care va oferi o funcționalitate simplă.

Pentru început, mai întâi trebuie să aflați extensiile folder (unul care se află în folderul Profiluri Firefox). Utilizatorii Windows 7 și Windows Vista vor găsi acest folder aici;

Cu toate acestea, dacă utilizați Windows XP, tastați %Datele aplicatiei% în consola Windows Run și apăsați Enter.

Odata ce extensiile folderul este deschis, creează un nou folder cu numele [email protected] init.

Deschideți folderul nou creat și creați un director nou și anume crom, împreună cu două fișiere - chrome.manifest și install.rdf. Acum vom edita aceste fișiere în editorul de texte, vă socotim să utilizați orice editor cu suport utf-8, cum ar fi - Notepad integrat Windows.

În primul rând, deschis chrome.manifest fișier și introduceți următoarele linii de cod init. Codul furnizat mai jos este funcțional și pentru ferestrele de corespondență Thunderbird, pentru compunere și pentru agenda de adrese și pentru Sunbird. Cu toate acestea, dacă trebuie să utilizați butonul doar în Firefox, liniile de cod pentru Thunderbird și Sunbird pot fi excluse.

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

După ce codul este introdus în fișier, închideți-l după ce ați salvat modificările. Acum editați install.rdf fișier, trebuie să introduceți următoarele linii de codîn ea. Puteți modifica descrierea generală a butonului, textul poate fi adăugat în 6, 7 și 8 linii ale codului (trebuie să fie anexate cu ghilimele duble), puteți introduce numele butonului, textul descriptiv și numele creatorului.

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

După ce ați modificat descrierea, salvați modificările și închideți fișierul. Amintiți-vă folderul nou creat (crom), unde vom crea 3 fișiere și vom introduce 2 imagini. Mai întâi creați 3 fișiere având următoarele nume;

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

Acum vom aplica styling pe buton, acolonu este nimic complex aici, vom aplica doar niște modele de bază asupra designului butonului (definiți dimensiunile imaginii și efectul pasiv asupra butonului). Dacă sunteți familiarizat cu proiectarea unui fișier CSS (Cascading Style Sheet), schimbarea valorilor și efectelor va fi un sunet, însă, dacă auziți numele său pentru prima dată, trebuie doar să introduceți următoarele linii de stil în cod button.css odată terminat, salvați modificările și închideți-l.

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

Acum deschide button.xul fișier într-un editor de text și introduceți următoarele liniide cod. Amintiți-vă că furnizăm cod și pentru Thunderbird și Sunbird, dacă urmați acest ghid doar pentru Firefox, puteți exclude liniile legate de Thunderbird și 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>

Acum trebuie să inserați două fișiere imagine cu nume button-1.jpg și Icon.jpg cu dimensiunile 40 × 48, respectiv 48 × 48 laobțineți cele mai bune rezultate. Cu toate acestea, puteți crea imagini de orice dimensiune care să nu depășească 48px lățime și lungime. Mai jos puteți vedea imaginile cu butoanele pe care le folosim - button-1.jpg imaginea este pentru butonul pentru bara de instrumente cu dimensiunile respective (mari și mici), iar efectul de încărcare poate fi văzut sub dimensiunile ambelor imagini implicite. Icon.jpg imaginea se referă la imaginea principală cu pictograma extensiei (cea pe care o veți vedea în galeria de extensii Firefox)

button-1.jpg

Icon.jpg

Odată creat, treceți la al cincilea fișier - button.js. Acest fișier JavaScript are foarte multă importanță,deoarece va defini funcționalitatea principală a butonului. Puteți adăuga un script de probă care solicită un mesaj să testeze funcționalitatea sau să solicitați script-ul în avans pentru a face tot ce doriți. De asemenea, există multe scripturi concepute în special pentru a îndeplini cerințele unuia complet, puteți consulta aici și scripturi simple, dar utile. Întrucât acest ghid este destinat utilizatorilor de nivel elementar, vom crea un element simplu de marcare care va deschide site-ul specificat. Deschide button.js fișier și introduceți următoarele linii de cod pentru a crea un buton de marcaj (pentru a fi afișat pe bara de instrumente Firefox).

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

Acum sunteți bine să mergeți, vă socotim să verificațicod pe care l-ați introdus în fișierele menționate și verificați din nou dimensiunile imaginii. Pentru a instala extensia recent creată, închideți toate instanțele care rulează Firefox și apoi lansați-o. Dacă totul a decurs bine, probabil că veți vedea o solicitare de instalare suplimentară, care indică faptul că extensia a fost instalată cu succes.

Pentru a face să apară butonul nou creat în bara de instrumente de navigare, din meniul Vizualizare, sub-meniul Bare de instrumente, faceți clic pe Personalizare.

Dialogul Bara de instrumente personalizate va apărea, de undetrebuie să trageți butonul nou creat peste bara de instrumente de navigare. Odată introdus, puteți, de asemenea, să-i schimbați poziția trăgând-o oriunde doriți.

Acum trebuie doar să faceți clic pe buton pentru a verifica funcționalitatea introdusă în fișierul JavaScript.

Funcționalitatea butonului rezultat estedefinite de utilizator, astfel încât să depindeți de abilitățile dvs. cât de mult puteți calibra funcțiile sale. Utilizatorii novici pot crea comenzi rapide, aplicații de legătură, marcaje de proiectare, în timp ce utilizatorii în limbo între nivel mediu și expert pot, cu siguranță, să-l folosească mai mult și să adauge funcționalitatea necesară în fișierul JavaScript principal.