komma igång

tillägg är gjorda av olika, men sammanhängande komponenter. Komponenter kan innehålla bakgrundsskript, innehållsskript, en alternativsida, gränssnittselement och olika logiska filer. Tilläggskomponenter skapas med webbutvecklingsteknik: HTML, CSS och JavaScript. En förlängning ” S komponenter beror på dess funktionalitet och kanske inte kräver alla alternativ.,

denna handledning kommer att bygga ett tillägg som tillåter användaren att ändra bakgrundsfärgen på en sida på developer.chrome.com. det kommer att använda många kärnkomponenter för att ge en inledande demonstration av deras relationer.

för att starta, skapa en ny katalog för att hålla tillägget”S filer.

det färdiga tillägget kan laddas ner här.

skapa manifestet #

tillägg börjar med deras manifest. Skapa en fil som heter manifest.json och inkludera följande kod, eller ladda ner filen här.,

katalogen som innehåller manifestfilen kan läggas till som ett tillägg i utvecklarläge i sitt nuvarande tillstånd.

1. öppna sidan tilläggshantering genom att navigera till chrome://extensions.
   • sidan för hantering av tillägg kan också öppnas genom att klicka på Chrome-menyn och hålla muspekaren över fler verktyg och sedan välja Tillägg.
2. aktivera utvecklarläget genom att klicka på växeln bredvid utvecklarläget.
3. Klicka på knappen Ladda uppackad och välj tilläggskatalogen.

Ta-da!, Förlängningen har installerats. Eftersom inga ikoner inkluderades i manifestet skapas en generisk verktygsradikon för tillägget.

Lägg till instruktion #

även om tillägget har installerats har det ingen instruktion. Introducera ett bakgrundsskript genom att skapa en fil med titeln background.js, eller ladda ner den här och placera den i tilläggskatalogen.

bakgrundsskript och många andra viktiga komponenter måste registreras i manifestet., Registrera ett bakgrundsskript i manifestet berättar förlängningen vilken fil som ska refereras och hur den filen ska bete sig.

tillägget är nu medveten om att det innehåller ett icke-ihållande bakgrundsskript och kommer att skanna den registrerade filen för viktiga händelser som den behöver lyssna på.

det här tillägget behöver information från en ihållande variabel så snart den har installerats. Börja med att inkludera en lyssnande händelse för runtime.onInstalled I bakgrundsskriptet. I onInstalled lyssnaren anger tillägget ett värde med hjälp av storage API., Detta gör det möjligt för flera tilläggskomponenter att komma åt det värdet och uppdatera det.

de flesta API: er, inklusive storage API, måste registreras under fältet "permissions" I manifestet för att tillägget ska kunna använda dem.

gå tillbaka till sidan tilläggshantering och klicka på länken Ladda om. Ett nytt fält, inspektera vyer, blir tillgängligt med en blå länk, bakgrundssida.,

klicka på länken för att visa bakgrundsskriptet”s console log”,The color is green.”

introducera ett användargränssnitt #

tillägg kan ha många former av ett användargränssnitt, men det här kommer att använda en popup. Skapa och Lägg till en fil med titeln popup.html till katalogen, eller ladda ner den här. Denna förlängning använder en knapp för att ändra bakgrundsfärgen.

liksom bakgrundsskriptet måste den här filen betecknas som en popup i manifestet under page_action.,

beteckning för toolbar icons ingår också underpage_action I fältetdefault_icons. Ladda ner mappen bilder här, packa upp den och placera den i katalogen extension”s. Uppdatera manifestet så att tillägget vet hur man använder bilderna.

tillägg visar även bilder på sidan tilläggshantering, varning för behörigheter och favicon. Dessa bilder anges i manifestet under icons.,

om tillägget laddas om i detta skede kommer det att innehålla en gråskalig ikon, men kommer inte att innehålla några funktionsskillnader. Eftersompage_action deklareras i manifestet är det upp till tillägget att berätta för webbläsaren när användaren kan interagera medpopup.html.

Lägg till deklarerade regler i bakgrundsskriptet meddeclarativeContent API inomruntime.onInstalled lyssnarhändelsen.

tillägget behöver behörighet att komma åtdeclarativeContent API i dess manifest.,

webbläsaren kommer nu att visa en ikon för fullfärgssidor i webbläsarens verktygsfält när användare navigerar till en URL som innehåller"developer.chrome.com". När ikonen är fullfärg, användare kan klicka på den för att visa popup.HTML.

det sista steget för popup-gränssnittet lägger till färg på knappen. Skapa och Lägg till en fil som heter https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js med följande kod i tilläggskatalogen, eller hämtas här.

den här koden tar tag i knappen från popup.html och begär färgvärdet från lagring., Det gäller sedan färgen som bakgrunden på knappen. Inkludera en scripttagg till https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js I popup.html.

ladda om tillägget för att visa den gröna knappen.

layer logic #

tillägget vet nu att popup ska vara tillgängligt för användare på developer.chrome.com och visar en färgad knapp, men behöver logik för ytterligare användarinteraktion. Uppdatera https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js för att inkludera följande kod.,

den uppdaterade koden lägger till enonclick händelse på knappen, som utlöser ett programmatiskt injicerat innehållsskript. Detta gör bakgrundsfärgen på sidan till samma färg som knappen. Med hjälp av programmatisk injektion möjliggör användarinkallade innehåll skript, i stället för att automatiskt infoga oönskad kod i webbsidor.

manifestet behöveractiveTab – behörigheten för att tillåta tillägget tillfällig åtkomst tilltabs API. Detta gör det möjligt för tillägget att ringa tabs.executeScript.,

tillägget är nu fullt fungerande! Ladda om tillägget, uppdatera den här sidan, öppna popup och klicka på knappen för att göra den grön! Vissa användare kanske vill ändra bakgrunden till en annan färg.

ge användaralternativ #

tillägget tillåter för närvarande endast användare att ändra bakgrunden till grön. Inklusive en alternativsida ger användarna mer kontroll över tillägget ” s funktionalitet, ytterligare anpassa sin webbupplevelse.,

börja med att skapa en fil i katalogen som heter options.html och inkludera följande kod, eller ladda ner den här.

registrera sedan alternativsidan i manifestet,

ladda om tillägget och klicka på detaljer.

bläddra ner informationssidan och välj Tilläggsalternativ för att visa alternativsidan, även om den för närvarande visas tom.

sista steget är att lägga till alternativ logiken., Skapa en fil som heter options.js I tilläggskatalogen med följande kod, eller ladda ner den här.

Fyra färgalternativ tillhandahålls sedan genereras som knappar på alternativsidan med onclick event lyssnare. När användaren klickar på en knapp uppdaterar den färgvärdet i tillägget”s global storage. Eftersom alla förlängningen ” s filer dra färginformation från global lagring inga andra värden behöver uppdateras.

Grattis! Katalogen har nu en fullt fungerande, om än förenklad, Chrome förlängning.

vad är nästa?,

• Chrome förlängning översikt säkerhetskopierar lite, och fyller i en hel del detaljer om tillägg arkitektur i allmänhet, och vissa specifika begrepp utvecklare kommer att vilja vara bekant med.
• läs om de alternativ som finns tillgängliga för felsökningstillägg i felsökningshandledningen.
• Chrome-tillägg har tillgång till kraftfulla API: er utöver vad som är tillgängligt på den öppna webben. Chrome.* API dokumentation kommer att gå igenom varje API.
• utvecklarens guide har dussintals ytterligare länkar till dokument som är relevanta för avancerad förlängning.,

---