Sådan oprettes en Chrome-udvidelse

I denne artikel vil jeg lære dig, hvordan du laver en egen Chrome-udvidelse. Jeg baserer det ud fra erfaringer, mens jeg opretter TalkToMe, en Chrome-udvidelse, der hjælper synshandicappede ved at læse webstedsindhold og navigere til andre websider.

Jeg skal dække det grundlæggende ved opsætning af din udvidelse, herunder:

  • Konfiguration af filerne til opsætning
  • Gør det klar til at blive lagt i Chrome-butikken
Jeg vil ikke dække, hvordan jeg styrer lydfunktioner, såsom håndtering af mikrofontilladelser. Dette er blevet beskrevet i denne artikel af min ven Palash og bruger også TalkToMe-udvidelsen som et eksempel.

Konfiguration af filerne til opsætning

Gå først til chrome: // extensions i din browser, eller klik blot på "More Tools" og "Extensions" i Chrome-menuen. Dette skal føre dig til siden Extension Management, hvor du kan slå Developer Mode til (den skal være i øverste højre hjørne).

Derefter skal du oprette en manifest.jsonfil i et nyt bibliotek til din udvidelse. Denne fil giver vigtige oplysninger, som din udvidelse skal fungere, såsom tilladelser og de scriptfiler, som du vil linke dit projekt til. Sådan skal indholdet af dit manifest se ud:

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

For at uploade dit bibliotek til siden Extension Management skal du klikke på knappen "Indlæs udpakket" og vælge dit bibliotek. Dette vil linke dine filer til det webbaserede brugergrænseflade.

En anden vigtig fil, som du bliver nødt til at konfigurere background.js, er baggrundsscriptet til dit projekt.

Et eksempel på baggrundsscript har denne type struktur:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

Den kører altid, mens din udvidelse er tændt og er nyttig til at lytte til forskellige begivenheder, såsom tastaturtryk eller til at navigere til forskellige sider.

Du kan endda have flere baggrundsskripter. Du skal bare registrere dem alle i din manifestfil først. For at gøre dette skal du bare strukturere manifest.jssådan, hvilket er, hvordan manifestfilen til vores udvidelse ser ud:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Nu skal du bruge en fil til ikke kun funktionen af ​​din udvidelse, men også brugergrænsefladen. For at gøre dette skal du oprette en fil, der hedder popup.html. Pop-up er et lille vindue, der vises, når der klikkes på dit udvidelsesikon. For eksempel er her pop op til Firefox-udvidelsen Cookie Manager.

Den popup.htmlfil kan være ganske enkel. Nedenfor er nogle kode til at lave en popup med en enkelt knap. Det er lige så let som at tilføje åbning og lukning af knapmærker i dokumentets krop og et par stilregler.

    button { height: 30px; width: 30px; outline: none; }  ;    

Selvfølgelig har popup.htmlkoden til vores udvidelse mange flere komponenter end dette. Du er velkommen til at tilføje flere knapper, stilark og alt andet, du finder passende til din udvidelseside.

Tid til at konfigurere popup-koden og ikonet. For ikonet skal du dog tilføje kode to steder, "standard_ikon" og "ikoner". Egenskaben “default_icon” bruges til værktøjslinjeikoner, og “ikoner” bruges til de billeder, der vises på siden Extension Management.

Gå tilbage til manifest.jsonog tilføj de følgende kodelinjer, og udskift billedstierne til standardikonet med dine egne billeder. Du kan også sætte de samme billeder ind for både "standard_ikon" og "ikoner". Og, behøver du ikke behøver at sætte i billeder af samme dimensioner som dem, der er angivet nedenfor. For eksempel, hvis du kun har billeder, der er 16 x 16 og 48 x 48, er du velkommen til at slette de to andre linjer, der angiver 32 og 128 pixels.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Så det er de filer, der er vigtige for at opbygge en kromudvidelse:

  • en manifestfil,
  • baggrundsscript og
  • en popup-fil

Nogle andre filer, som du måske vil konfigurere er:

  • options.html og
  • options.js

options.jsvil give dine brugere et bredere udvalg af muligheder, når det kommer til at bruge din udvidelse. Det tager sig af, hvordan din indstillingsside ser ud (den ligner meget popup.html), mens den options.jshåndterer funktionaliteten.

Disse filer er valgfri, men hvis du beslutter dig for at tilføje dem, skal du ikke glemme at konfigurere options.htmli manifestet og linke din options.jsfil ved at tilføje <; / script> lige før dit slutter HTML-tag.

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

For at se din udvidelse i aktion skal du gemme alle dine filer og klikke på "Genindlæs", mens du er på siden Extension Management. Du skal se dit ikon i værktøjslinjen. For at se siden med valgmuligheder kan du også klikke på "Detaljer" under din udvidelse og rulle ned til, hvor der står "Udvidelsesindstillinger".

Udgivelse af dit projekt til webbutikken

Så du har udviklet og testet din udvidelse. Nu skal du distribuere det!

For at begynde at uploade dit projekt skal du først konvertere det til en .zip-fil. Filen skal som et minimum indeholde manifest.jsonfilen. Sørg derefter for, at du har en udviklerkonto ved at besøge Chrome Webstore Developer Dashboard.

Klik på knappen "Tilføj nyt element", så det kan lade dig uploade din .zipfil der. Medmindre du vil registrere betalinger til din app, kan du springe trinnet over opsætning af et betalingssystem over. Du bliver dog nødt til at betale et engangsudviklergebyr på $ 5, når du lægger dit projekt i webbutikken.

Glem ikke at medtage en detaljeret beskrivelse og billeder af din udvidelse, så potentielle brugere ved præcis, hvad dit projekt gør!

Når alt dette er afsluttet, modtager du et app-id og et OAuth-token. App-id'et bruges til at fremsætte anmodninger til Google API'er, mens OAuth-token bruges til at foretage betalinger i Webshop.

Tillykke, du har nu offentliggjort din udvidelse! ?

Hvis du kunne lide dette indlæg, skal du tjekke denne næste artikel. Vi dykker dybere ned i, hvordan du konfigurerer lydfunktioner i din Chrome-udvidelse, ligesom vi gjorde for TalkToMe.