Chrome webudvidelse - Ingen forudgående kodningserfaring påkrævet: 6 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Chrome -udvidelser er små programmer, der er bygget til at forbedre brugernes browseroplevelse. For mere information om kromudvidelser, gå til

For at lave en Chrome Web Extension kræves kodning, så det er meget nyttigt at gennemgå HTML, JavaScript og CSS på nedenstående websted:

www.w3schools.com/default.asp (w3 skoler er et godt websted til kodning af ressourcer)

Ved du ikke, hvordan du koder? Bare rolig, denne vejledning hjælper dig med at guide vejen.

Det bedste ved Chrome -udvidelser er, at de kan tilpasses. Det er ikke kun en bestemt ting, der kan gøres, så vær kreativ.

Forbrugsvarer

De nødvendige forsyninger er nedenfor:

• En computer med et tekstredigeringsprogram (jeg bruger Notesblok)
• Google Chrome

Og det er alt!

Trin 1: Opret biblioteket

Opret først en mappe til at gemme alle filerne, og navngiv den 'udvidelse'. Navnet kan ændres senere, hvis det ønskes.

Trin 2: Opret manifestfil og kode den

Manifestfilen er en meget vigtig del af udvidelsen. Det fortæller udvidelsen præcis, hvad de skal gøre og være. Manifestfiler formateres i JSON. Det første trin er at åbne en teksteditor og gemme en ny fil som 'manifest.json'.

Skriv derefter nedenstående script:

{

"name": "First Extension", "version": "1.0", "description": "Jeg kan kode en udvidelse", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Husk kommaerne efter værdierne!

Når dette er skrevet, skal du gemme manifestfilen og gå til chrome: // extensions (Chrome skal bruges som browser til dette). Når du er på chrome: // extensions, skal du aktivere udviklertilstand. Tryk derefter på knappen 'Indlæs udpakket', og vælg mappen 'udvidelse'.

tromlerulle tak …

Yay! Det er en forlængelse, undtagen … det er kedeligt. Det gør bogstaveligt talt intet lige nu, men snart bliver det super fedt.

Trin 3: Opret ikonerne, og opdater manifestet

Et websted, der fungerer godt til at tegne ikoner, er https://www.piskelapp.com/. Der findes også andre tegneprogrammer til brug. Ikonerne skal være firkantede. Dette projekt bruger 16x16, 32x32, 48x48 og 128x128 ikoner. Når ikonet er lavet, skal du oprette en mappe kaldet 'billeder' i udvidelsesmappen og sætte ikonet i den mappe. Det kan være en god idé at navngive et billede efter dets størrelse. For eksempel 'icon32.png'. Den nye kode er herunder:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

For reference til manifestkoden, gå til

Trin 4: Tilføj en popup

Denne udvidelse vil have en popup. Pop -up'en er en HTML -fil (Hypertext Markup Language), så det er godt at lære det grundlæggende i HTML, CSS og JavaScript først.

Gem først et dokument som en 'popup.html' -fil i udvidelsesmappen.

Rediger derefter manifestfilen for at vise 'popup.html', når der klikkes på den. Den nye kode er herunder:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Glem ikke kommaet!

Hvis nu følgende HTML -kode tilføjes til popup.html, viser den 'Hello World', når der klikkes på den.

Hej Verden

Trin 5: Få det til at se godt ud, og gør det interaktivt

Hvis der skrives en grundlæggende HTML -linje, får den det laveste minimum gjort. Hvis CSS (Cascading Style Sheets) tilføjes, ser det køligere ud, og hvis JavaScript tilføjes, kan det være mere interaktivt. Denne vejledning går ikke i detaljer og forklarer HTML, JavaScript og CSS, men der er masser af ressourcer online. Nedenfor er koden til det enkle 'Hello World' -program, derefter det mere farverige program, henholdsvis:

Hej Verden

Hej Verden

#hej {baggrundsfarve: #000000; farve: #ff0000; grænse: 8px begyndelse #86a3b2; grænse-radius: 50px; transformer: roter (57 grader); polstring: 10px; user-select: ingen; markør: trådkors; overgang: transform 2s; } #hej: svæver {transform: roter (-417deg); }

Dette andet eksempel kan være meget forvirrende for en nybegynder. Men dette var for at vise dig, hvor vigtig CSS er for et program/en udvidelse. Nu ville det være et godt tidspunkt at tage en pause og lære noget HTML5 -kodning og bruge developer.chrome.com som reference. Det kan tage noget tid, men der kan laves en god udvidelse.

Trin 6: Offentliggør det til Chrome Webshop

Hvis nogen har lavet en rigtig god udvidelse, og de vil dele den med verden, så kan de udgive den. Det er jo pointen med en forlængelse. Denne vejledning forsøgte kun at forklare manifestfilen, og hvordan du kan bruge den, og den havde lige et 'Hello World' -program.

Den første ting at gøre for at gøre en udvidelse offentlig er at gøre udvidelsesmappen til en zip -fil. Den anden ting at gøre er at gå til https://chrome.google.com/webstore/category/extensions og logge ind på en Google -konto. Klik derefter på gearknappen til indstillinger og klik derefter på 'udvikler dashboard'. Tryk på knappen 'Ny vare' for at uploade zip -filen. Når du er der, er det nødvendigt at redigere butiksfortegnelsen, fortroligheden og priserne. En udvidelse kan let offentliggøres, hvis den sendes til gennemgang.

Nu hvor udvidelsen er færdig, skal du fortsætte med at kode!