Chrome Web Extension - Ingen tidligere kodingserfaring nødvendig: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:21

Chrome -utvidelser er små programmer som er bygd for å forbedre brukeropplevelsen. For mer informasjon om kromutvidelser, gå til

For å lage en Chrome Web Extension kreves koding, så det er veldig nyttig å gå gjennom HTML, JavaScript og CSS på nettstedet nedenfor:

www.w3schools.com/default.asp (w3 skoler er et godt nettsted for koding av ressurser)

Vet du ikke hvordan du koder? Ikke bekymre deg, denne opplæringen vil hjelpe deg med å veilede deg.

Det beste med Chrome -utvidelser er at de kan tilpasses. Det er ikke bare en bestemt ting som kan gjøres, så vær kreativ.

Rekvisita

Rekvisitaene som trengs er nedenfor:

• En datamaskin med et tekstredigeringsprogram (jeg bruker Notisblokk)
• Google Chrome

Og det er alt!

Trinn 1: Lag katalogen

Opprett først en mappe for å inneholde alle filene, og gi den navnet "forlengelse". Navnet kan endres senere hvis ønskelig.

Trinn 2: Lag Manifest -filen og kode den

Manifestfilen er en veldig viktig del av utvidelsen. Det forteller utvidelsen nøyaktig hva du skal gjøre og være. Manifestfiler er formatert i JSON. Det første trinnet er å åpne et tekstredigeringsprogram og lagre en ny fil som 'manifest.json'.

Skriv deretter inn skriptet nedenfor:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Husk kommaene etter verdiene!

Etter at dette er skrevet, lagrer du manifestfilen og går til chrome: // extensions (Chrome bør brukes som nettleser for dette). Når du er på chrome: // extensions, slår du på utviklermodus. Etter det trykker du på knappen "Last inn pakket" og velger mappen "utvidelse".

trommelrulle takk …

Jippi! Det er en forlengelse, bortsett fra … det er kjedelig. Det gjør bokstavelig talt ingenting akkurat nå, men snart blir det superkult.

Trinn 3: Lag ikonene og oppdater manifestet

Et nettsted som fungerer godt for å tegne ikoner er https://www.piskelapp.com/. Det finnes også andre tegneprogrammer som kan brukes. Ikonene skal være firkantede. Dette prosjektet bruker 16x16, 32x32, 48x48 og 128x128 ikoner. Når ikonet er laget, lager du en mappe som heter 'bilder' i utvidelsesmappen og legger ikonet i den mappen. Det kan være lurt å navngi et bilde i henhold til størrelsen. For eksempel 'icon32.png'. Den nye koden er nedenfor:

{

"name": "First Extension", "version": "1.0", "description": "Jeg kan kode en utvidelse", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

For referanse om manifestkoden, gå til

Trinn 4: Legg til en popup

Denne utvidelsen vil ha en popup. Popup -vinduet er en HTML -fil (Hypertext Markup Language), så det er godt å lære det grunnleggende om HTML, CSS og JavaScript først.

Lagre først et dokument som en 'popup.html' -fil i utvidelsesmappen.

Rediger deretter manifestfilen for å vise 'popup.html' når den klikkes. Den nye koden er nedenfor:

{

"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

Ikke glem komma!

Hvis følgende HTML -kode legges til i popup.html, vil den vise "Hei verden" når den klikkes.

Hei Verden

Trinn 5: Få det til å se bra ut og gjør det interaktivt

Hvis en grunnleggende HTML -linje skrives inn, får den et minimum. Hvis CSS (Cascading Style Sheets) er lagt til, vil det se kulere ut, og hvis JavaScript er lagt til, kan det være mer interaktivt. Denne opplæringen vil ikke gå i detaljer som forklarer HTML, JavaScript og CSS, men det er mange ressurser på nettet. Nedenfor er koden for det enkle "Hello World" -programmet, deretter det mer fargerike programmet, henholdsvis:

Hei Verden

Hei Verden

#hei {bakgrunnsfarge: #000000; farge: #ff0000; grense: 8px utgang #86a3b2; kant-radius: 50px; transform: roter (57deg); polstring: 10px; user-select: ingen; markør: hårkors; overgang: transform 2s; } #hello: sveve {transform: rotate (-417deg); }

Dette andre eksemplet kan være veldig forvirrende for en nybegynner. Men dette var for å vise deg hvor viktig CSS er for et program/en utvidelse. Nå ville det være et godt tidspunkt å ta en pause og lære litt HTML5 -koding og bruke developer.chrome.com som referanse. Det kan ta litt tid, men en flott utvidelse kan gjøres.

Trinn 6: Publiser den til Chrome Nettmarked

Hvis noen har laget en virkelig flott utvidelse og de vil dele den med verden, kan de publisere den. Det er tross alt poenget med en utvidelse. Denne opplæringen prøvde bare å forklare manifestfilen og hvordan du kan bruke den, og den hadde bare et 'Hello World' -program.

Det første du må gjøre for å gjøre en utvidelse offentlig er å gjøre utvidelsesmappen til en zip -fil. Den andre tingen å gjøre er å gå til https://chrome.google.com/webstore/category/extensions og logge på en Google -konto. Deretter klikker du på utstyrsknappen for innstillinger og klikker deretter på 'utvikler dashbord'. Trykk på knappen "Ny vare" for å laste opp zip -filen. Når du er der, er det nødvendig å redigere butikkoppføringen, personvernet og prisene. En utvidelse kan enkelt publiseres hvis den sendes til vurdering.

Nå som utvidelsen er ferdig, fortsett å kode!