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

Idag tar vi med en Firefox-guide som vem 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 som tillhandahålls i Firefox som kan läggas till var som helst på verktygsfältet och kan anpassas enligt dina behov. Eftersom knappens position och beteende kan ändras utan att kräva någon extra kunskap, kan man göra det enkelt bygga en ny förlängning som fungerar 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;

C: \ Users \ <> \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ <> \ Förlängningar

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

Öppna nu Firefox-mappen och sedan Profiler -> -> mappen för tillägg

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 textredigeraren. Vi räknar med att du använder alla redaktörer med UTF-8-stöd, 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.

innehåll anpassad knapp krom / stil krom: //global/content/customizeToolbar.xul krom: //custombutton/content/button.css # Firefox överlägg 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 adressbok överlägg 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 en kod har infogats i filen stänger du den efter att du har sparat ändringarna. Redigera nu install.rdf fil måste du infoga följande kodrader i den. 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 skapare namn.

1.0 Firefox  Thunderbird  Sunbird 

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 2 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, det finns inget komplicerat här, vi kommer bara att tillämpa lite grundläggande styling över knappen design (definiera bilddimensioner och hover effekt på knappen). Om du är bekant med att designa en CSS-fil (Cascading Style Sheet) kommer att ändra värden och effekter vara a cinch, om du hör sitt namn för första gången, sätter du bara in följande stillinjer med kod in 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");} / * gemensam stil för alla anpassade knappar * / .anpassad knapp {-moz-image-region: rect (0px 24px 24px 0px);}. Custom Button: hover {-moz-image-region: rect (24px 24px 48px 0px);} [iconize = "small"] .custombutton {-moz-image-region: rect (0px 40px 16px 24px);} [iconize = "small"]. custom Button: hover {-moz-image-region: rect (24px 40px 40px 24px);}

Öppna nu button.xul fil i en textredigerare och infoga följande kodrader. 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.

1.0UTF-8text / csskrom: //custombutton/content/button.css Firefox Thunderbird mail Thunderbird komponerar Thunderbird adressbok Sunbird knappdetaljer 

Nu måste du infoga två bildfiler med namn knapp-1.jpg och icon.jpg med måtten 40 × 48 respektive 48 × 48 för att få bästa resultat. 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 - knapp-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 tilläggsikonen (den du ser i Firefox-tilläggsgalleriet)

knapp-1.jpg

icon.jpg

När du har skapat flyttar du till den femte filen - button.js. Den här JavaScript-filen har stor 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 avsedda särskilt 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: funktion () {const url = " https://www.addictivetips.com/" dokument .getElementById ("innehåll") .webNavigation .loadURI (url, 0, null, null, null)},}

Nu är du bra att gå, vi räknar med att du kontrollerar koden du har lagt in i de nämnda filerna och verifierar bilddimensionerna igen. För att installera det nyligen skapade tillägget, stäng alla körande instanser av Firefox och starta sedan det. Om allt gick bra skulle du antagligen 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, klicka på Anpassa.

Anpassa verktygsfältets dialogruta visas, varifrån du måste dra den nyskapade knappen över navigeringsverktygsfältet. När du har satt in den 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 är användardefinierad, så det är upp till dina kunskaper hur mycket du kan kalibrera dess funktioner. Nybörjare kan skapa genvägar, länka applikationer, utforma bokmärken medan användare i limbo mellan genomsnittlig och expertnivå kan säkert utnyttja den mer och lägga till nödvändig funktionalitet i huvudsakliga JavaScript fil.