Danas donosimo Firefox vodič koji to govoribilo tko može pratiti da stvori prilagođeni gumb na alatnoj traci za navigaciju. Uz vidljive gumbe na alatnoj traci za navigaciju, nalazi se popis ostalih gumba koji imaju različite funkcije koje nudi Firefox i koje se mogu dodati bilo gdje na alatnoj traci i koje se mogu prilagoditi prema vašim potrebama. Budući da se položaj i ponašanje gumba mogu mijenjati bez potrebe za dodatnim znanjem, lako se može izraditi novo proširenje koje se ponaša prema uputama, sjedi u definiranom položaju, a pritom je vrlo prilagodljivo. Ovaj post opisuje kako stvoriti jednostavno proširenje - gumb na alatnoj traci koji će pružiti jednostavnu funkcionalnost.
Za početak prvo morate saznati ekstenzije mapa (ona koja se nalazi u mapi Profili Firefox). Korisnici sustava Windows 7 i Windows Vista ovdje će pronaći tu mapu;
C: Korisnici << korisničko ime >> AppDataRoamingMozillaFirefoxProfiles << naziv profila >> proširenja
Međutim, ako koristite Windows XP, upišite %Podaci aplikacije% u konzoli Windows Run i pritisnite Enter.
Sada otvorite Firefox mapu, a zatim Profili -> <Ime profila> -> proširenja
Jednom ekstenzije mapa se otvori, kreirajte novu mapu po imenu [email protected] u tome.
Otvorite novostvorenu mapu i kreirajte novi direktorij krom, zajedno s dvije datoteke - chrome.manifest i install.rdf. Sada ćemo uređivati te datoteke u uređivaču teksta, smatramo da koristite bilo koji uređivač s podrškom utf-8, kao što je - Windows ugrađena bilježnica.
Prvo otvorite chrome.manifest datoteku i umetnite sljedeće retke koda init. Dolje navedeni kôd funkcionalan je i za prozore Thunderbirda, sastavljanje i adrese adresara te za Sunbird. Međutim, ako trebate koristiti gumb samo u Firefoxu, retci koda za Thunderbird i Sunbird se mogu isključiti.
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
Kad se kôd umetne u datoteku, zatvorite ga nakon što spremite promjene. Sada uredite install.rdf datoteka, morate umetnuti sljedeće retke kodau tome. Možete promijeniti opći opis gumba, tekst se može dodati u 6, 7 i 8 redaka koda (mora biti priložen dvostrukim navodnicima), možete unijeti naziv gumba, opisni tekst i ime stvaratelja.
<?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>
Nakon što promijenite opis, spremite promjene i zatvorite datoteku. Sjetite se novostvorene mape (krom), gdje ćemo stvoriti 3 datoteke i umetnuti 2 slike. Prvo stvorite 3 datoteke sa sljedećim imenima;
- button.css
- button.xul
- button.js
Sada ćemo primijeniti styling na gumbovdje nije ništa složeno, primijenit ćemo neke osnovne stilove preko dizajna gumba (definirati dimenzije slike i lebdjeti efekt na gumbu). Ako ste upoznati s dizajnom CSS datoteke (Cascading Style Sheet), promjena vrijednosti i efekti bit će cinch, no ako prvi put čujete njegovo ime, jednostavno umetnite sljedeće stilske linije koda u button.css Nakon što završite datoteku, spremite promjene i zatvorite je.
#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);}Sada otvorite button.xul umetnite je u uređivač teksta i umetnite sljedeće retkekoda. Imajte na umu da pružamo kôd i za Thunderbird & Sunbird. Ako slijedite ovaj vodič samo za Firefox, možete isključiti retke povezane sa 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>
Sada morate umetnuti dvije slikovne datoteke s imenima button-1.jpg i Icon.jpg s dimenzijama 40 × 48 i 48 × 48 odnosno dopostići najbolje rezultate. Međutim, možete stvoriti slike bilo koje veličine koja ne prelazi 48px širine i dužine. Ispod možete vidjeti slike gumba koje koristimo - button-1.jpg slika je za gumb na alatnoj traci odgovarajuće veličine (veliki i mali), a efekt pokazivača može se vidjeti ispod obje zadane veličine. Icon.jpg slika se odnosi na glavnu ikonu proširenja (onu koju ćete vidjeti u galeriji proširenja Firefox)
button-1.jpg
Icon.jpg
Nakon kreiranja pređite na petu datoteku - button.js. Ova JavaScript datoteka ima veliku važnost,jer će definirati glavnu funkcionalnost gumba. Možete dodati primjerak skripte koja traži poruku za testiranje funkcionalnosti ili ići za unaprijed skriptu da biste radili sve što želite. Također su mnoge skripte osmišljene posebno za ispunjavanje nečijeg zahtjeva, ovdje možete provjeriti i neke jednostavne, ali korisne skripte. Budući da je ovaj vodič za korisnike na osnovnoj razini, stvorit ćemo jednostavnu stavku oznaka koja će otvoriti navedenu web stranicu. Otvori button.js datoteku i umetnite sljedeće retke koda da biste stvorili gumb oznake (za prikaz na alatnoj traci Firefoxa).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}Sada je dobro da krenemo. Pretpostavljamo da to provjeritekôd koji ste umetnuli u spomenute datoteke i ponovno provjerite dimenzije slike. Da biste instalirali novostvoreno proširenje, zatvorite sve pokrenute instance Firefoxa i pokrenite ga. Ako je sve prošlo dobro, vjerojatno biste vidjeli novi prompt za instalaciju dodatka, što ukazuje da je proširenje uspješno instalirano.
Da bi se novostvoreni gumb prikazao na alatnoj traci za navigaciju, u izborniku Prikaz, u podizborniku Alatne trake, kliknite Prilagodi.
Odakle se pojavit će dijalog Prilagoditi alatnu trakunovostvoreni gumb morate povući preko navigacijske alatne trake. Nakon što ga umetnete, također možete promijeniti njegov položaj povlačenjem bilo gdje.
Sada samo kliknite gumb za provjeru funkcionalnosti umetnute u JavaScript datoteku.
Funkcionalnost gumba je sljedećakorisnički definirano, tako da je na vašim sposobnostima koliko možete kalibrirati njegove funkcije. Novi korisnici mogu stvoriti prečace, povezati aplikacije, dizajnirati oznake, a korisnici u ustima između prosječne i stručne razine sigurno ga mogu više iskoristiti i dodati potrebnu funkcionalnost u glavnu JavaScript datoteku.
komentari