Om du undrar hur man gör ett Chrome-tillägg är Chromes extensiondocumentation utmärkt för grundläggande implementeringar. Men för att använda mer avanceradefunktioner kräver mycket Googling och Stack Overflow. Låt oss göra enintermediate Chrome-förlängning som interagerar med sidan: den hittar denförsta externa länken på sidan och öppnar den i en ny flik.

manifest.JSON

manifestet.json fil berättar Chrome viktig information om yourextension, liksom dess namn och vilka behörigheter den behöver.,

den mest grundläggande möjliga förlängningen är en katalog med enmanifest.json – fil.Låt oss skapa en katalog och sätta följande JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

det är det mest grundläggande möjligt manifest.json, med alla obligatoriska fält filledin. manifest_version ska alltid vara 2, eftersom version 1 inte stöds från och med januari 2014. Hittills gör vår förlängning absolut ingenting, men låt oss ladda den i Chrome ändå.,

ladda ditt tillägg i Chrome

för att ladda ditt tillägg i Chrome, Öppnachrome://extensions/ I din webbläsareoch klicka på ”Utvecklarläge” längst upp till höger. Klicka nu på ”Load unpackedextension…” och välj tilläggets katalog. Du bör nu se yourextension i listan.

När du ändrar eller lägger till kod i ditt tillägg, bara komma tillbaka till denna sida ochladda sidan. Chrome laddar om tillägget.

innehållsskript

ett innehållsskript är ”en JavaScript-fil som körs i samband med webbsidor.,”Det betyder att ett innehållsskript kan interagera med webbsidor som webbläsarenbesöker. Inte alla JavaScript-filer i ett Chrome-tillägg kan göra det här; vi kommer att sevarför senare.

låt oss lägga till ett innehållsskript som heter content.js:

// content.js alert("Hello from your Chrome extension!")

för att injicera skriptet måste vi berätta vår manifest.json – fil om den.,

Lägg till det här i dinmanifest.json fil: 

"content_scripts": , "js": } ]

detta talar om för Chrome att injiceracontent.js på varje sida vi besöker med hjälp avspeciellt<all_urls> URL-mönster. Om vi bara vill injicera skriptet på någrasidor kan vi använda matchmönster. Här är några exempel på värden för"matches":

ladda om Chrome-tillägget. Varje sida du besöker nu dyker upp en varning. Låt oss lägga den första webbadressen på sidan istället.,

logga URL

jQuery är inte nödvändigt, men det gör allt enklare. Först ladda ner aversion av jQuery från jQuery CDN och lägg den i din förlängnings mapp. Idownloaded den senaste minified versionen, jquery-2.1.3.min.js. För att ladda den, addit till manifest.json innan "content.js"., Hela manifest.json ska se ut så här:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

nu när vi har jQuery, låt oss använda den för att logga webbadressen till den första externa länkenpå sidan i content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

Observera att vi inte behöver använda jQuery för att kontrollera om dokumentet har laddats. Bydefault, Chrome injicerar innehållsskript efter att DOM är klar.

prova det – du bör se utdata i konsolen på varje sida du besöker.,

Webbläsaråtgärder

När ett tillägg lägger till en liten ikon bredvid adressfältet är det en webbläsaraktion. Din förlängning kan lyssna efter klick på den knappen och sedan dosomething.

sätt ikonen.PNG från Googles förlängningshandledning i din förlängningsmapp ochlägg till detta till manifest.json:

"browser_action": { "default_icon": "icon.png" }

för att kunna använda webbläsaråtgärden måste vi lägga till meddelandepassering.

meddelande som passerar

ett innehållsskript har åtkomst till den aktuella sidan, men är begränsat i API: erna itcan-åtkomst., Det kan till exempel inte lyssna på klick på webbläsaråtgärden. Vi måste lägga till en annan typ av skript i vår förlängning, ett bakgrundsskript, som har tillgång till varje Chrome API men kan inte komma åt den aktuella sidan. AsGoogle uttrycker det:

innehållsskript har vissa begränsningar. De kan inte använda chrome.* API: er, med undantag för extension, i18n, runtime och storage.,

så innehållsskriptet kommer att kunna dra en URL ur den aktuella sidan, menkommer att behöva lämna över den webbadressen till bakgrundsskriptet för att göra något användbartmed det. För att kommunicera använder vi det som skickas via Google calls-meddelandet, vilket gör det möjligt för skript att skicka och lyssna efter meddelanden. Det är det enda sättet förinnehåll skript och bakgrundsskript att interagera.,

Lägg till följande för att berättamanifest.json om bakgrundsskriptet: 

"background": { "scripts": }

nu lägger vi tillbackground.js:

detta skickar en godtycklig JSON nyttolast till den aktuella fliken. Nycklarna till jsonpayload kan vara vad som helst, men jag valde "message" för enkelhet. Nu behöver vilyssna för det meddelandet i content.js:

Observera att all vår tidigare kod har flyttats in i lyssnaren, så attdet körs bara när nyttolasten tas emot., Varje gång du klickar på ikonen browseraction, bör du se en URL bli inloggad på konsolen. Om det inte fungerar, försök att ladda om tillägget och sedan ladda om sidan.

öppna en ny flik

Vi kan använda API: etchrome.tabs för att öppna en ny flik: 

chrome.tabs.create({"url": "http://google.com"});

menchrome.tabs kan endast användas avbackground.js, så vi måste lägga till somemore meddelande passerar sedanbackground.js kan öppna fliken, men kan inte ta theurl., Här är idén:

  1. lyssna efter ett klick på webbläsaråtgärden ibackground.js. När det ’ sclicked, skicka en clicked_browser_action händelse till content.js.
  2. närcontent.js tar emot händelsen, griper den webbadressen till den första länken påsidan. Sedan skickar open_new_tab tillbaka till background.js med URL toopen.
  3. background.js lyssnar påopen_new_tab och öppnar en ny flik med givenURL när det tar emot meddelandet.,

Om du klickar på webbläsaråtgärden utlösesbackground.js, som skickar amessage tillcontent.js, som skickar en URL tillbaka tillbackground.js, som kommer att öppna en ny flik med den angivna webbadressen.

först måste vi berätta content.js för att skicka webbadressen till background.js., Ändracontent.js för att använda den här koden:

nu måste vi lägga till lite kod för att berättabackground.js för att lyssna på den händelsen:

Nu när du klickar på ikonen för webbläsaråtgärden öppnar den en ny flik med den förstayttre webbadressen på sidan.

packa upp den

den fullständigacontent.js ochbackground.js är ovan., Här är hela manifest.json:

och här är hela katalogstrukturen:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

mer om hur du gör ett Chrome-tillägg

För mer information, prova den officiella Chrome-tilläggsdokumentationen.