Sådan implementeres en Chrome-udvidelse

Vi kan godt lide at surfe på nettet. Og vi kan alle lide, at tingene er lige ved hånden. Hvorfor ikke skabe noget, der henvender sig til disse to absolutte sandheder?

I denne artikel forklarer jeg byggestenene til en Chrome-udvidelse. Bagefter bliver du bare nødt til at tænke på en god idé som en undskyldning for at lave en.

Hvorfor Chrome?

Chrome er langt den mest populære webbrowser. Nogle skøn er så høje som 59% . Så hvis du vil nå ud til så mange mennesker som muligt, er det den bedste måde at gøre det på at udvikle en Chrome-udvidelse.

⚠️ For at kunne udgive en Chrome-udvidelse skal du have en udviklerkonto, der medfører et engangsregistreringsgebyr på $ 5.

Hver Chrome-udvidelse skal have disse komponenter: manifestfilen , popup.html og popup.js og et baggrundsscript . Lad os se på dem.

Hvad udgør en Chrome-udvidelse?

Manifestfilen

Hvad er en manifestfil? Det er en tekstfil i JSON-format (JavaScript Object Notation), der indeholder visse detaljer om den udvidelse, du vil udvikle.

Google bruger denne fil til at erhverve detaljer om din udvidelse, når du vil offentliggøre den. Der er obligatoriske , anbefalede og valgfri felter.

Påkrævet

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "default_locale": "en" }
  • manifest_version- Version af manifestfilformatet. Fra og med Chrome 18 er version 1 udfaset
  • name- Kan indeholde op til 45 tegn. Bruges til at vise navnet på din udvidelse de følgende steder: Installationsdialog, UI til udvidelsesadministration, Chrome Webshop
  • version- Version af din Chrome-udvidelse. Kan være op til fire cifre adskilt af prikker (f.eks. 1.0.0.0)
  • default_locale- Denne mappe findes inde i _localsmappen, og den indeholder standardstrengens bogstaver. Den _localsmappe bruges til internationalisering (så din udvidelse til at understøtte flere sprog). Det er et obligatorisk felt, hvis der findes en _localsmappe, ellers skal den ikke være til stede

Hvis du vil understøtte flere sprog, kan du læse mere her.

Anbefalede

 "description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" },
  • description - Du kan bruge op til 132 tegn til at beskrive udvidelsen
  • short_name - Begrænset til 12 tegn, det bruges i tilfælde, hvor der ikke er plads nok til at vise det fulde navn på udvidelsen (App Launcher og siden Ny fane)
  • icons- Ikonerne, der repræsenterer udvidelsen. Inkluder altid et 128X128-ikon, fordi det bruges af Chrome Webshop og under installationen af ​​din udvidelse

Valgfri felter er store og små bogstaver, så vi går ikke ind på dem i denne artikel.

Efter at have dækket de data, der er nødvendige for manifestfilen, kan vi nu gå videre til, hvor vi rent faktisk vil skrive kode til vores udvidelse, pop op og baggrund .

Pop-up og baggrund

Pop-up henviser til hovedsiden, som brugerne ser, når de bruger din udvidelse. Den består af to filer: Popup.html og en JavaScript-fil, Popup.js .

Popup.html er layoutfilen til, hvordan din udvidelse vil se ud. Afhængigt af hvad din udvidelse vil gøre, ændres markeringen af ​​denne fil.

Et baggrundsscript er det eneste, der kan interagere med begivenheder, der opstår og bruger Chrome API. For at bruge baggrundsskripter skal du tilføje følgende til din manifest.json-fil:

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "background":{ "scripts": ["yourScript.js"], "persistent": false } }

Nøglen scriptshar en værdi af en række scriptnavne.

persistenter en nøgle med en boolsk værdi, der angiver brugen af ​​din udvidelse med chrome.webRequest API til at blokere eller ændre netværksanmodninger. Chrome.webRequest API fungerer ikke med ikke-vedvarende baggrundssider.

Sådan åbnes din udvidelse

Hver Chrome-udvidelse tilføjer et lille ikon til værktøjslinjen øverst i din browser. Når brugeren klikker på ikonet, kan du vælge, hvordan din udvidelse skal åbnes i browseren:

  1. Det kan tilsidesætte en ny fane for ikke at forstyrre den aktuelle brugers aktivitet

2. Du kan åbne et lille vindue i brugerens aktuelle fane for at holde brugeren i samme fane

Hvert valg har sine konsekvenser, og det er op til dig at beslutte, hvad der er den bedste mulighed for dig.

Nedenfor er den nødvendige kode for at trække hver af mulighederne ud. De bruger begge den samme popup.html-fil, der er beskrevet nedenfor:

  Chrome Extension Example   

Hello From Extension

Samler det hele

Tilsidesæt ny fane

//In manifest.json { "name": "ChromeExampleNewTab", "version": "1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "popup.html" }, "browser_action": {}, "permissions":[ "tabs" ], "background":{ "scripts": ["background.js"], "persistent": false } } //In background.js chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. }); });

Åbn i den aktuelle fane

//In manifest.js { "name": "ChromeExample", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }

Bemærk, hvordan vi har tilsidesat browser_actionnøglen i begge eksempler.

Vi er nødt til at gøre dette, da vi ikke ønsker, at browseren skal åbne en ny fane regelmæssigt.

Også, da hvis vi vil åbne en ny fane med vores udvidelse, skal vi tilføje en tilladelsesnøgle til manifestet og angive fanens værdi. Dette fortæller browseren, at vi har brug for brugerens tilladelse til at overskrive standardadfærden for at åbne en ny fane.

Der er meget mere til Chrome-udvidelser (messaging, kontekstmenuer og opbevaring for at nævne nogle få). Jeg har forhåbentlig givet dig noget indblik i Chrome-udvidelser. Måske lige nok til at fange dig til at lave en af ​​dine egne!

Og mens du er ved det, skal du tjekke en, jeg har lavet her.