Hvordan lage og legge til knapp i Firefox Navigasjonsverktøylinje [Guide]

I dag tar vi med en Firefox-guide somhvem som helst kan følge for å lage en tilpasset knapp på navigasjonsverktøylinjen. Sammen med synlige knapper i navigasjonsverktøylinjen, er det en liste over andre knapper som har forskjellige funksjoner i Firefox, som kan legges til hvor som helst på verktøylinjen og kan tilpasses etter dine behov. Siden knappens posisjon og oppførsel kan endres uten å kreve noe ekstra kunnskap, kan man enkelt bygge en ny utvidelse som oppfører seg som anvist, sitter i definert posisjon, samtidig som den kan tilpasses godt. Dette innlegget dekker hvordan du oppretter en enkel utvidelse - en verktøylinjeknapp som gir en enkel funksjonalitet.

For å begynne, må du først finne ut det utvidelser mappen (en som er bosatt i mappen Firefox profiler). Windows 7 og Windows Vista brukere finner denne mappen her;

Hvis du imidlertid bruker Windows XP, skriver du inn % AppData% i Windows Run-konsoll og trykk Enter.

Først når utvidelser mappen åpnes, opprett en ny mappe ved navn [email protected] i det.

Åpne den nyopprettede mappen, og lag en ny katalog, nemlig krom, sammen med to filer - chrome.manifest og install.rdf. Nå skal vi redigere disse filene i tekstredigeringsprogram, vi regner deg med å bruke en hvilken som helst redigerer med utf-8-støtte, som - Windows innebygd Notisblokk.

Først, åpen chrome.manifest fil og sett inn følgende kodelinjer. Koden nedenfor er også funksjonell for Thunderbird e-post-, skrive- og adressebokvinduer og for Sunbird. Hvis du bare trenger å bruke knappen bare i Firefox, kan kodelinjer for Thunderbird og Sunbird ekskluderes.

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

Når koden er satt inn i filen, lukker du den etter at du har lagret endringene. Nå rediger install.rdf fil, må du sette inn følgende kodelinjeri det. Du kan endre knappens generelle beskrivelse, tekst kan legges til i 6, 7 og 8ste linjer i koden (må være vedlagt i dobbelt anførselstegn), du kan angi knappens navn, beskrivende tekst og skaperenavn.

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

Når du har endret beskrivelsen, lagrer du endringene og lukker filen. Husk den nyopprettede mappen (krom), hvor vi vil lage 3 filer og sette inn 2 bilder. Lag først 3 filer som har følgende navn;

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

Nå vil vi bruke styling på knappen, derer ikke noe komplisert her, vi vil bare bruke litt grunnleggende styling over knappdesignet (definer bildedimensjoner og sveveeffekt på knappen). Hvis du er kjent med å designe en CSS-fil (Cascading Style Sheet), vil endring av verdier og effekter være en liten rolle, men hvis du hører navnet for aller første gang, er det bare å sette inn følgende stillinjer med kode i button.css lagre endringene og lukk den når du er ferdig.

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

Nå åpner button.xul fil i en tekstredigerer og sett inn følgende linjerav kode. Husk at vi også tilbyr kode for Thunderbird & Sunbird, hvis du bare har fulgt denne guiden for Firefox, kan du ekskludere linjer relatert til 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>

Nå må du sette inn to bildefiler med navn button-1.jpg og Icon.jpg med dimensjoner 40 × 48 og 48 × 48 tilfå de beste resultatene. Du kan imidlertid lage bilder i alle størrelser som ikke overskrider 48 px bredde og lengde. Under kan du se knappebildene vi bruker - button-1.jpg bildet er for verktøylinjeknapp med respektive størrelser (store og små), og sveveeffekten kan sees under begge standardbildene. Icon.jpg bilde refererer til hovedutvidelsesikonbildet (det du vil se i Firefox utvidelsesgalleri)

button-1.jpg

Icon.jpg

Når du er opprettet, flytter du til den femte filen - button.js. Denne JavaScript-filen har mye betydning,da den vil definere hovedfunksjonaliteten til knappen. Du kan legge til et eksempelskript som ber en melding for å teste funksjonaliteten eller gå til forhåndsskript for å gjøre hva du vil. Det er også mange skript som er spesielt fremmet for å oppfylle kravene, du kan også sjekke ut noen enkle, men nyttige skript her. Siden denne guiden er for brukere på grunnleggende nivå, lager vi et enkelt bokmerkeelement som åpner det spesifiserte nettstedet. Åpne button.js fil og sett inn følgende kodelinjer for å opprette en bokmerknapp (som skal vises på Firefox-verktøylinjen).

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

Nå er du god til å gå, vi regner deg med å sjekke-koden du har satt inn i de nevnte filene, og bekreft bildedimensjonene igjen. Hvis du vil installere den nyopprettede utvidelsen, lukker du alle kjørende forekomster av Firefox og deretter starter den. Hvis alt gikk bra, vil du sannsynligvis se en ny installasjonsprompt for tillegg, som indikerer at utvidelsen er installert.

For å få nyopprettet knapp til å vises på navigasjonsverktøylinjen, fra Vis-menyen, under Verktøylinjer-undermenyen, klikker du på Tilpass.

Tilpass verktøylinjedialogen vises, hvorfradu må dra den nyopprettede knappen over navigasjonsverktøylinjen. Når den er satt inn, kan du også endre posisjonen ved å dra den hvor som helst du vil.

Nå er det bare å klikke på knappen for å bekrefte funksjonaliteten som er satt inn i JavaScript-filen.

Den resulterende knappens funksjonalitet erbrukerdefinert, så det er opp til dine ferdigheter hvor mye du kan kalibrere funksjonene. Nybegynnere kan lage snarveier, koble applikasjoner, designe bokmerker mens brukere i limbo mellom gjennomsnittlig og ekspertnivå absolutt kan gjøre mer bruk av det og legge til ønsket funksjonalitet i JavaScript-filen.