Hur man skapar och lägger till knapp i Firefox Navigation Toolbar [Guide]

Idag tar vi med en Firefox-guide somvem som helst kan följa för att skapa en anpassad knapp i navigeringsverktygsfältet. Tillsammans med synliga knappar i navigeringsverktygsfältet finns det en lista över andra knappar som har olika funktioner i Firefox som kan läggas till var som helst på verktygsfältet och kan anpassas efter dina behov. Eftersom knappens position och beteende kan ändras utan att kräva någon extra kunskap, kan man enkelt bygga en ny anknytning som uppför sig som riktad, sitter i definierad position, samtidigt som den är mycket anpassningsbar. Det här inlägget beskriver hur man skapar ett enkelt tillägg - en verktygsfältknapp som ger en enkel funktionalitet.

För att börja måste du först ta reda på det förlängningar mapp (en som finns i mappen Firefox profiler). Windows 7 och Windows Vista användare hittar den här mappen här;

Om du använder Windows XP skriver du emellertid %Applikationsdata% i Windows Run-konsol och tryck på Enter.

När förlängningar mappen öppnas, skapa en ny mapp med namnet på [email protected] i det.

Öppna den nyskapade mappen och skapa en ny katalog, nämligen krom, tillsammans med två filer - chrome.manifest och install.rdf. Nu kommer vi att redigera dessa filer i textredigerare, vi räknar med att du använder alla redaktörer med support för utf-8, som - Windows inbyggda anteckningar.

Först, öppen chrome.manifest arkivera och infoga följande kodrader init. Koden nedan är också funktionell för Thunderbird post-, kompositions- och adressbokfönster och Sunbird. Men om du bara behöver använda knappen i Firefox kan kodrader för Thunderbird och Sunbird uteslutas.

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 kod har lagts in i filen, stäng den efter att du har sparat ändringarna. Redigera nu install.rdf fil måste du infoga följande kodraderi det. Du kan ändra knappens allmänna beskrivning, text kan läggas till i 6, 7 och 8: e raden i koden (måste bifogas med dubbla citattecken), du kan ange knappens namn, beskrivande text och skaparens namn.

<?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 ändrat beskrivningen sparar du ändringarna och stänger filen. Kom ihåg den nyskapade mappen (krom), där vi skapar 3 filer och infogar två bilder. Skapa först 3 filer med följande namn;

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

Nu kommer vi att använda styling på knappen därär inte något komplex här, vi kommer bara att tillämpa lite grundläggande styling över knappdesignen (definiera bilddimensioner och svävaeffekt på knappen) Om du är bekant med att designa en CSS-fil (Cascading Style Sheet), kommer att ändra värden och effekter att vara en cinch, men om du hör namnet för första gången, sätt bara in följande stilrader med kod i button.css spara ändringar och stäng den när du är klar.

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

Öppna nu button.xul fil i en textredigerare och infoga följande raderav kod. Kom ihåg att vi också tillhandahåller kod för Thunderbird & Sunbird, om du bara har följt den här guiden för Firefox kan du utesluta rader relaterade till 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 måste du infoga två bildfiler med namn button-1.jpg och Icon.jpg med måtten 40 × 48 respektive 48 × 48 tillfå de bästa resultaten. Du kan emellertid skapa bilder av valfri storlek som inte överstiger 48 px bredd och längd. Nedan kan du se knappbilderna vi använder - button-1.jpg bilden är för verktygsfältknappen med respektive storlekar (stora och små) och hovereffekten kan ses under båda standardbildernas storlekar. Icon.jpg bild hänvisar till huvudbilden för förlängningsikonen (den du ser i Firefox-tilläggsgalleriet)

button-1.jpg

Icon.jpg

När du har skapat flyttar du till den femte filen - button.js. Den här JavaScript-filen har mycket betydelse,eftersom den kommer att definiera huvudfunktionen för knappen. Du kan lägga till ett exempelskript som uppmanar ett meddelande för att testa funktionaliteten eller gå till förhandsskript för att göra vad du vill. Det finns också många skript som är särskilt avsedda för att uppfylla kraven, du kan också kolla in några enkla men användbara skript här. Eftersom den här guiden är avsedd för användare på elementär nivå skapar vi ett enkelt bokmärkeobjekt som öppnar den angivna webbplatsen. Öppna button.js arkivera och infoga följande kodrader för att skapa en bokmärkknapp (för att visas i Firefox-verktygsfältet).

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

Nu är du bra att gå, vi räknar med att du ska kontrollerakod du har infogat i de nämnda filerna och verifiera bilddimensionerna igen. För att installera det nyligen skapade tillägget, stäng alla körande instanser av Firefox och starta sedan. Om allt gick bra, kommer du antagligen att se en ny tilläggsinstallationsprompt, vilket indikerar att tillägget har installerats.

För att få nyskapade knappar att visas i navigeringsverktygsfältet, från Visa-menyn, under verktygsfältets undermeny, klickar du på Anpassa.

Anpassa dialogrutan i verktygsfältet kommer att visas, varifråndu måste dra den nyligen skapade knappen över navigeringsverktygsfältet. När du är införd kan du också ändra dess position genom att dra den var du vill.

Klicka bara på knappen för att verifiera funktionen som är infogad i JavaScript-filen.

Den resulterande knappens funktionalitet äranvändardefinierad, så det är upp till dina kunskaper hur mycket du kan kalibrera dess funktioner. Nybörjare kan skapa genvägar, länka applikationer, designa bokmärken medan användare i limbo mellan genomsnittlig och expertnivå säkert kan utnyttja det mer och lägga till den nödvändiga funktionaliteten i JavaScript-filen.