Chrome Web Extension - Ingen tidigare kodningserfarenhet behövs: 6 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:38

Chrome -tillägg är små program byggda för att förbättra användarnas surfupplevelse. Mer information om Chrome -tillägg finns på

För att skapa en Chrome Web Extension krävs kodning, så det är mycket användbart att granska HTML, JavaScript och CSS på nedanstående webbplats:

www.w3schools.com/default.asp (w3 skolor är en bra webbplats för kodningsresurser)

Vet du inte hur du kodar? Oroa dig inte, denna handledning hjälper dig att vägleda.

Det bästa med Chrome -tillägg är att de kan anpassas. Det är inte bara en specifik sak som kan göras, så var kreativ.

Tillbehör

De förnödenheter som behövs finns nedan:

• En dator med en textredigerare (jag använder Anteckningar)
• Google Chrome

Och det är allt!

Steg 1: Skapa katalogen

Skapa först en mapp för alla filer och ge den namnet "tillägg". Namnet kan ändras senare om så önskas.

Steg 2: Skapa manifestfilen och koda den

Manifestfilen är en mycket viktig del av tillägget. Det berättar förlängningen exakt vad man ska göra och vara. Manifestfiler formateras i JSON. Det första steget är att öppna en textredigerare och spara en ny fil som 'manifest.json'.

Skriv sedan nedanstående skript:

{

"name": "First Extension", "version": "1.0", "description": "Jag kan koda ett tillägg", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Kom ihåg kommatecken efter värdena!

När detta har skrivits, spara manifestfilen och gå till chrome: // extensions (Chrome bör användas som webbläsare för detta). Väl på chrome: // extensions, slå på utvecklarläget. Därefter trycker du på knappen "Ladda uppackad" och väljer mappen "tillägg".

trumvirvel, tack…

Jippie! Det är en förlängning, förutom … det är tråkigt. Det gör bokstavligen ingenting just nu, men snart kommer det att bli superkul.

Steg 3: Skapa ikonerna och uppdatera manifestet

En webbplats som fungerar bra för att rita ikoner är https://www.piskelapp.com/. Det finns också andra ritprogram tillgängliga för användning. Ikonerna ska vara fyrkantiga. Detta projekt använder ikonerna 16x16, 32x32, 48x48 och 128x128. När ikonen är skapad skapar du en mapp som heter "bilder" i tilläggsmappen och lägger ikonen i den mappen. Det kan vara en bra idé att namnge en bild efter dess storlek. Till exempel 'icon32.png'. Den nya koden finns nedan:

{

"name": "First Extension", "version": "1.0", "description": "Jag kan koda ett tillägg", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}}}

För referens om manifestkoden, gå till

Steg 4: Lägg till en popup

Tillägget kommer att ha en popup. Popupen är en HTML -fil (Hypertext Markup Language), så det är bra att lära sig grunderna i HTML, CSS och JavaScript först.

Spara först ett dokument som "popup.html" -fil i tilläggsmappen.

Redigera därefter manifestfilen för att visa 'popup.html' när den klickas. Den nya koden finns nedan:

{

"name": "First Extension", "version": "1.0", "description": "Jag kan koda ett tillägg", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}," default_popup ":" popup.html "}}

Glöm inte komma!

Om följande HTML -kod läggs till i popup.html kommer den att visa "Hej världen" när du klickar på den.

Hej världen

Steg 5: Få det att se bra ut och gör det interaktivt

Om en grundläggande HTML -rad skrivs in blir den minsta möjliga. Om CSS (Cascading Style Sheets) läggs till kommer det att se coolare ut, och om JavaScript läggs till kan det vara mer interaktivt. Denna handledning går inte in på detaljer som förklarar HTML, JavaScript och CSS, men det finns gott om resurser online. Nedan finns koden för det enkla programmet "Hello World", sedan det mer färgstarka programmet:

Hej världen

Hej världen

#hej {bakgrund-färg: #000000; färg: #ff0000; gräns: 8px början #86a3b2; gränsradie: 50px; transform: rotera (57deg); vaddering: 10px; användarval: ingen; markör: hårkors; övergång: transform 2s; } #hej: sväng {transform: rotera (-417deg); }

Detta andra exempel kan vara mycket förvirrande, för en nybörjare. Men detta var för att visa dig hur viktigt CSS är för ett program/tillägg. Nu skulle det vara en bra tid att ta en paus och lära sig lite HTML5 -kodning och använda developer.chrome.com för lite referens. Det kan ta lite tid, men en bra förlängning kan göras.

Steg 6: Publicera den i Chrome Web Store

Om någon har gjort en riktigt bra förlängning och de vill dela den med världen, kan de publicera den. Det är trots allt poängen med en förlängning. Denna handledning försökte bara förklara manifestfilen och hur du kan använda den, och den hade bara ett "Hello World" -program.

Det första du ska göra för att göra ett tillägg offentligt är att göra tilläggsmappen till en zip -fil. Det andra du ska göra är att gå till https://chrome.google.com/webstore/category/extensions och logga in på ett Google -konto. Klicka sedan på inställningsknappen och klicka sedan på 'utvecklarinstrumentpanel'. Tryck på knappen "Nytt objekt" för att ladda upp zip -filen. Väl där är det nödvändigt att redigera butiksuppgifter, sekretess och priser. Ett tillägg kan enkelt publiceras om det lämnas in för granskning.

Nu när tillägget är klart, fortsätt att koda!