Hvis du lurer på hvordan å gjøre en Chrome-Utvidelse, Chrome extensiondocumentation er flott for grunnleggende implementeringer. Men, å bruke mer advancedfeatures krever mye Googling og Stack Overflow. La oss gjøre anintermediate Chrome-utvidelse som samhandler med siden: det vil finne thefirst ekstern lenke på siden, og åpne den i en ny fane.

manifest.json

manifest.json-filen forteller Chrome viktig informasjon om yourextension, som navnet, og hvilke tillatelser er det behov for.,

Den mest grunnleggende mulig utvidelse er en katalog med en manifest.json – filen.La oss opprette en katalog og sette følgende JSONinto manifest.json:

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

det er den mest grunnleggende mulig manifest.json, med alle obligatoriske felter er utfylt. manifest_version skal alltid være 2, fordi versjon 1 isunsupported som av januar 2014. Så langt våre extension gjør absolutt ingenting,men la oss legge det i Chrome uansett.,

Legg forlengelse i Chrome

for Å laste utvidelse i Chrome, åpne opp chrome://extensions/ i browserand klikk «Utvikler-modus» øverst til høyre. Nå klikk «Legg unpackedextension…», og velg filtypen er katalogen. Du bør nå se yourextension i listen.

Når du vil endre eller legge til kode i forlengelse, bare komme tilbake til denne siden andreload siden. Chrome vil laste extension.

Innhold skript

Et innhold skriptet er «en JavaScript-fil som kan kjøres i sammenheng med web-sider.,»Dette betyr at et innhold skriptet kan samhandle med web-sider at browservisits. Ikke alle JavaScript-fil i en Chrome-utvidelsen kan gjøre dette, og vi vil seewhy senere.

La oss legge til et innhold script som heter content.js:

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

for Å injisere den script, trenger vi å fortelle våre manifest.json fil om det.,

Legg til dette til din manifest.json file:

"content_scripts": , "js": } ]

Dette forteller Chrome for å injisere content.js til hver side vi besøker ved hjelp av thespecial <all_urls> URL mønster. Hvis vi ønsker å injisere skriptet på bare somepages, kan vi bruke matche mønstre. Her er noen eksempler på verdier for"matches":

last inn på nytt Chrome-utvidelsen. Hver enkelt side du besøker nå dukker opp et varsel. La’slog den første URL-adressen på side i stedet.,

Logging URL

jQuery er ikke nødvendig, men det gjør alt lettere. Først, last ned aversjon av jQuery fra jQuery CDN og sette det i forlengelse mappen. Idownloaded den nyeste minified versjon, jquery-2.1.3.min.js. For å laste det, tillegg av baller til manifest.json før "content.js"., Hele manifest.json skal looklike dette:

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

Nå som vi har jQuery, la oss bruke den til å logge URL-en av de første eksterne linkon siden i content.js:

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

Merk at vi ikke trenger å bruke jQuery for å sjekke om dokumentet er lastet inn. Bydefault, Chrome injiserer innhold skript etter at DOM er fullført.

Prøv det ut – du skal se resultatet i konsollen på hver side du besøker.,

Nettleser Handlinger

Når en forlengelse legger til et lite ikon ved siden av adresselinjen, som er en browseraction. Forlengelse kan lytte klikk på denne knappen, og deretter dosomething.

Sette ikonet.png fra Google ‘ s extension opplæringen i forlengelse mappen andadd dette til manifest.json:

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

for å bruke nettleseren handling, må vi legge meldingen passerer.

Melding passerer

Et innhold skriptet har tilgang til den aktuelle siden, men er begrenset i Api-ene itcan tilgang., For eksempel, det kan ikke lytte for klikk på nettleseren handling. Weneed å legge til en annen type skript til vår extension, en bakgrunn script,som har tilgang til alle Chrome-API, men kan ikke få tilgang til den gjeldende siden. AsGoogle setter det:

Innhold skript har noen begrensninger. De kan ikke bruke chrome.* Api-er, med unntak av extension, i18n, runtime, og storage.,

Slik at innholdet skriptet vil være i stand til å trekke ut en URL-adresse for gjeldende side, butwill trenger å levere denne NETTADRESSEN over til bakgrunnen script for å gjøre noe usefulwith det. For å kommunisere, vil vi bruke hva Google kaller meldingen pasninger,noe som kan skript for å sende og lytte til meldinger. Det er den eneste måten forcontent skript og bakgrunn skript til å samhandle.,

Legg til følgende å fortelle manifest.json om bakgrunnen manus:

"background": { "scripts": }

Nå skal vi legge til background.js:

Dette sender et vilkårlig JSON nyttelast til den aktuelle kategorien. Tastene på JSONpayload kan være noe, men jeg valgte "message" for enkelhets skyld. Nå trenger vi tolisten for at meldingen i content.js:

legg Merke til at alle av våre tidligere kode har blitt flyttet til den som lytter, så thatit er bare kjøre når nyttelasten er mottatt., Hver gang du klikker browseraction ikonet, bør du se en URL-adresse blir logget til konsollen. Hvis det er notworking, prøv omlasting forlengelse og deretter oppgradere siden.

Åpne en ny fane

Vi kan bruke chrome.tabs API for å åpne en ny fane:

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

, Men chrome.tabs kan kun brukes av background.js, så vi må legge til somemore melding bestått siden background.js kan åpne fanen, men kan ikke ta theURL., Her er ideen:

  1. Lytt for en, klikker du på nettleseren handling i background.js. Når det’sclicked, send en clicked_browser_action event til content.js.
  2. Ved content.js mottar hendelse, det griper inn URL av den første linken på thepage. Deretter sender open_new_tab tilbake til background.js med URL toopen.
  3. background.js lytter til open_new_tab og åpner en ny tab med givenURL når den mottar meldingen.,

ved å Klikke på nettleseren tiltak vil utløse background.js, som vil sende amessage til content.js, som skal sende en URL-adresse tilbake til background.js, som willopen en ny fane med den angitte URL.

Først må vi fortelle content.js for å sende URL-adressen til background.js., Endrecontent.js for å bruke denne koden:

Nå trenger vi å legge til litt kode for å fortelle background.js for å lytte til eventen:

når du Nå klikker du på nettleseren action-ikonet, åpnes en ny fane med firstexternal URL på siden.

Pakke den opp

full content.js og background.js er over., Her er den fullstendige manifest.json:

Og her er det full katalog struktur:

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

Mer om hvordan å gjøre en Chrome-utvidelse

For mer informasjon, kan du prøve den offisielle Chrome extension dokumentasjon.