Hvis du spekulerer på, hvordan du opretter en Chrome-udvidelse, er Chromes udvidelsedokumentation fantastisk til grundlæggende implementeringer. Men for at bruge mere advancedfeatures kræver en masse Googling og Stack Overflo.. Lad os lave enintermediate Chrome-udvidelse, der interagerer med siden: den finderførste eksterne link på siden og åbner det i en ny fane.

manifest.json

manifestet.json-fil fortæller Chrome vigtige oplysninger om youre .tension, ligesom dens navn og hvilke tilladelser den har brug for.,

den mest grundlæggende mulige udvidelse er en mappe med en manifest.json fil.Lad os oprette en mappe og sætte følgende JSONinto manifest.json:

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

Der er den mest grundlæggende mulige manifest.json, med alle nødvendige felter filledin. manifest_version skal altid være 2, fordi version 1 ikke understøttes fra januar 2014. Indtil videre gør vores udvidelse absolut intet,men lad os alligevel indlæse den i Chrome.,

Indlæs din udvidelse i Chrome

for at indlæse din udvidelse i Chrome skal du åbnechrome://extensions/ i din bro .serog klik på “udviklertilstand” øverst til højre. Klik nu på” Load unpackede .tension… ” og vælg udvidelsens mappe. Du skal nu se youre .tension på listen.

Når du ændrer eller tilføjer kode i din udvidelse, skal du bare vende tilbage til denne side ogindlæs siden. Chrome genindlæser din udvidelse.

Content scripts

et content script er “en JavaScript-fil, der kører i forbindelse med webebsider.,”Det betyder, at et indhold script kan interagere med webebsider, at bro .servisits. Ikke alle JavaScript-filer i en Chrome-udvidelse kan gøre dette; vi serhvorfor senere.

Lad os tilføje et indhold script ved navn content.js:

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

for At injicere script, er vi nødt til at fortælle vores manifest.json fil om det.,

Tilføje dette til din manifest.json fil:

"content_scripts": , "js": } ]

Dette fortæller Chrome til at injicere content.js i hver side besøger vi bruger thespecial <all_urls> URL-mønster. Hvis vi ønsker at injicere scriptet på kun somepages, vi kan bruge match mønstre. Her er et par eksempler på værdier for"matches":

genindlæs din Chrome-udvidelse. Hver eneste side, du besøger nu popper op en advarsel. Lad os logge den første URL på siden i stedet.,

logning af URL

j juery er ikke nødvendigt, men det gør alt lettere. Første, hente aversion af jQuery fra jQuery CDN, og læg det i din extension ‘ s mappe. Ido .nloadet den nyeste minified version, jquery-2.1.3.min.js. For at indlæse det, addit 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": } ] }

Nu, at vi har jQuery, så lad os bruge det til at logge URL-adressen af den første eksterne linkon siden i content.js:

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

Bemærk, at vi ikke behøver at bruge jQuery til at kontrollere, om dokumentet er lagt. Veddefault injicerer Chrome indholdsskripter, når DOM er afsluttet.

prøv det – du skal se output i din konsol på hver side, du besøger.,

bro .serhandlinger

Når en udvidelse tilføjer et lille ikon ved siden af din adresselinje, er det en bro .serhandling. Din udvidelse kan lytte til klik på den knap og derefter dosomething.

sæt ikonet.png fra Google ‘ s udvidelse vejledning i din udvidelse folder andadd dette til manifest.json:

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

for at bruge den browser til handling, er vi nødt til at tilføje message passing.

meddelelse passerer

et indhold script har adgang til den aktuelle side, men er begrænset i API ‘ er itcan adgang., For eksempel kan den ikke lytte efter klik på bro .serhandlingen. Viskal tilføje en anden type script til vores udvidelse, et baggrundsskript,som har adgang til alle Chrome API, men ikke kan få adgang til den aktuelle side. AsGoogle udtrykker det:

indhold scripts har nogle begrænsninger. De kan ikke bruge chrome.* Api ‘ er, med undtagelse af extension i18n runtime og storage.,

så indholdet script vil være i stand til at trække en URL ud af den aktuelle side, butwillill nødt til at aflevere denne URL over til baggrunden script til at gøre noget nyttigt med det. For at kommunikere bruger vi det, Google kalder besked, der passerer, hvilket gør det muligt for scripts at sende og lytte efter meddelelser. Det er den eneste måde forcontent scripts og baggrund scripts til at interagere.,

tilføj følgende for at fortælle manifest.json om baggrundsskriptet:

"background": { "scripts": }

nu tilføjer vi background.js:

dette sender en vilkårlig JSON-nyttelast til den aktuelle fane. Nøglerne til JSONpayload kan være alt, men jeg valgte "message" for enkelhed. Nu har vi brug for atlisten for denne meddelelse i content.js:

Bemærk, at alle vores tidligere kode er blevet flyttet ind i lytteren, så det er kun køre, når nyttelasten er modtaget., Hver gang du klikker på bro .serhandlingsikonet, skal du se en URL blive logget på konsollen. Hvis det ikke erarbejde, prøv at genindlæse udvidelsen og derefter genindlæse siden.

Åbner en ny fane

Vi kan bruge chrome.tabs API til at åbne en ny fane:

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

Men chrome.tabs kan kun bruges med background.js så vi bliver nødt til at tilføje somemore message passing, da background.js kan åbne fanen, men kan ikke få fat i theURL., Her er ideen:

  1. lyt efter et klik på bro .serhandlingen i background.js. Når det klikkede, send en clicked_browser_action begivenhed til content.js.
  2. når content.js modtager begivenheden, griber den URL ‘ en til det første link påsiden. Derefter sender den open_new_tab tilbage til background.js med URL toopen.
  3. background.js lytter efter open_new_tab og åbner en ny fane med givenURL, når den modtager besked.,

at Klikke på browserens indsats vil udløse background.js, som vil sende budskab til content.js, som vil sende en URL tilbage til background.js, som willopen en ny fane med en bestemt URL-adresse.

først skal vi fortælle content.js for at sende URL ‘ en til background.js., Ændrecontent.js for at bruge denne kode:

Nu skal vi tilføje noget kode til at fortælle background.js for at lytte til denne begivenhed:

når du Nu klikke på browserens handling ikonet, åbnes en ny fane med firstexternal WEBADRESSEN på den side.

indpakning det

den fuldecontent.jsogbackground.js er over., Her er den fulde manifest.json:

Og her er den fulde bibliotek, struktur:

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

Mere om, hvordan man laver en udvidelse i Chrome

For mere information, kan du prøve den officielle udvidelse i Chrome, dokumentation.