I dag bringer vi en Firefox-guide derenhver kan følge for at oprette en brugerdefineret knap i navigationsværktøjslinjen. Sammen med synlige knapper i navigationsværktøjslinjen er der en liste over andre knapper, der har forskellige funktionaliteter leveret i Firefox, som kan tilføjes hvor som helst på værktøjslinjen og kan tilpasses efter dine behov. Da knapens position og opførsel kan ændres uden at kræve nogen ekstra viden, kan man nemt bygge en ny udvidelse, der opfører sig som instrueret, sidder i en defineret position, samtidig med at den kan tilpasses meget. Dette indlæg dækker hvordan man opretter en enkel udvidelse - en værktøjslinjeknap, der giver en enkel funktionalitet.
For at begynde skal du først finde ud af det udvidelser mappe (en der findes i mappen Firefox profiler). Windows 7- og Windows Vista-brugere finder denne mappe her;
C: Brugere << brugernavn >> AppDataRoamingMozillaFirefoxProfiles << profilnavn >> udvidelser
Hvis du imidlertid bruger Windows XP, skal du skrive % AppData% i Windows Run-konsol og tryk på Enter.
Åbn nu Firefox-mappen og derefter Profiler -> <Profilnavn> -> udvidelsesmappe
En gang udvidelser mappen åbnes, opret en ny mappe ved navn på [email protected] i det.
Åbn den nyligt oprettede mappe, og opret en ny mappe, nemlig krom, sammen med to filer - chrome.manifest og install.rdf. Nu redigerer vi disse filer i teksteditor, vi regner med at du bruger enhver editor med utf-8 support, som - Windows indbygget Notepad.
Åbn først chrome.manifest arkiver og indsæt følgende kodelinjer. Koden, der er angivet nedenfor, er også funktionel for Thunderbird-mail-, komponere- og adressebogsvinduer og for Sunbird. Hvis du kun skal bruge knappen kun i Firefox, kan kodelinjer for Thunderbird og Sunbird udelukkes.
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 kode er indsat i filen, skal du lukke den, når du har gemt ændringerne. Rediger nu install.rdf fil, skal du indsætte følgende kodelinjeri det. Du kan ændre knapens generelle beskrivelse, tekst kan tilføjes i 6, 7 og 8. linjer i koden (skal være vedhæftet med dobbelt citatmærker), du kan indtaste knappens navn, beskrivende tekst og skabernavn.
<?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 ændret beskrivelsen, skal du gemme ændringerne og lukke filen. Husk den nyligt oprettede mappe (krom), hvor vi opretter 3 filer og indsætter 2 billeder. Opret først 3 filer med følgende navne;
- button.css
- button.xul
- button.js
Nu vil vi anvende styling på knappen derer ikke noget komplekst her, vi vil bare anvende nogle grundlæggende styling over knapdesignet (definer billeddimensioner og hovereffekt på knappen). Hvis du er fortrolig med at designe en CSS-fil (Cascading Style Sheet), vil ændring af værdier og effekter være en cinch, men hvis du hører dens navn for allerførste gang, skal du blot indsætte de følgende typelinjer med kode i button.css arkiver, når det er gjort, gem ændringer og luk det.
#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);}Åbn nu button.xul arkiveres i en teksteditor og indsæt følgende linjeraf kode. Husk, at vi også leverer kode til Thunderbird & Sunbird, hvis du kun har fulgt denne vejledning til Firefox, kan du ekskludere linjer, der er relateret 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>
Nu skal du indsætte to billedfiler med navne button-1.jpg og Icon.jpg med dimensioner 40 × 48 og 48 × 48 tilfå de bedste resultater. Du kan dog oprette billeder af en hvilken som helst størrelse, der ikke overstiger 48x bredde og længde. Nedenfor kan du se de knapbilleder, vi bruger - button-1.jpg billedet er til værktøjslinjeknap med respektive størrelser (store og små), og hovereffekten kan ses under begge standardbillederes størrelser. Icon.jpg billede henviser til ikonbillede til hovedudvidelse (det, du vil se i Firefox-udvidelsesgalleri)
button-1.jpg
Icon.jpg
Når du er oprettet, skal du flytte til den 5. fil - button.js. Denne JavaScript-fil er meget vigtig,da det vil definere hovedfunktionaliteten af knappen. Du kan tilføje et eksempelscript, der beder en meddelelse om at teste funktionaliteten eller gå til forskudsscript for at gøre hvad du vil. Der er også mange scripts, der er fremmet for at udfylde kravene, du kan også tjekke nogle enkle, men nyttige scripts her. Da denne vejledning er til brugere på elementær niveau, opretter vi et simpelt bogmærkeemne, der åbner det specificerede websted. Åbn button.js arkiver og indsæt følgende kodelinjer for at oprette en bogmærke-knap (vises på Firefox-værktøjslinje).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}Nu er du god til at gå, vi regner med, at du tjekkerkode, du har indsat i de nævnte filer, og bekræft billeddimensionerne igen. For at installere den nyligt oprettede udvidelse skal du lukke alle de kørende forekomster af Firefox og derefter starte den. Hvis alt gik godt, vil du sandsynligvis se en ny installationsinstallationsprompt, der indikerer, at udvidelsen er installeret.
For at få den nyoprettede knap til at vises på navigationsværktøjslinjen i menuen Vis under Undermenuen Værktøjslinjer skal du klikke på Tilpas.
Tilpas værktøjslinjedialogen vises, hvorfraskal du trække den nyligt oprettede knap over navigationsværktøjslinjen. Når den først er indsat, kan du også ændre dens position ved at trække den hvor som helst du ønsker.
Klik bare på knappen for at bekræfte funktionaliteten, der er indsat i JavaScript-fil.
Den resulterende knaps funktionalitet erbrugerdefineret, så det er op til dine evner, hvor meget du kan kalibrere dens funktioner. Begyndere kan oprette genveje, linke applikationer, designe bogmærker, mens brugere i limbo mellem gennemsnit og ekspertniveau helt sikkert kan gøre mere brug af det og tilføje den krævede funktionalitet i den vigtigste JavaScript-fil.
Kommentarer