Kontroll Internett Med Chrome Extensions!

0
18

Som en web UI utvikler og designer, det er utallige ting å lære og bare så og så mange timer i dag. Det er emner jeg har med vilje unngått, som for eksempel mobile og offline-applikasjon utvikling, fordi på et tidspunkt, må du tegne en linje et sted i millioner av helt nye emner og få arbeidet gjort. Et av de områdene jeg har unngått i det siste er browser extension utvikling. Jeg forsto ikke hvordan de jobbet, hva utviklingsmiljøet var, eller hvordan tillatelser samhandlet med overordnede sider fordi, for å være ærlig, jeg trodde ikke jeg var interessert.

Så en dag, min veldig talentfull designer/utvikler venn Natalie Schoch ba meg om å få henne Chrome Extension over målstreken. Hun hadde front-end laget prototyper, men trengte litt hjelp med å plugge i datasettet og med interaktive JavaScript. Prosjektet er kalt Wordsmith og det er nå på Chrome Extension Store. Det er gratis og estetisk tiltalende måte å lære nye gloser mens du surfer på nettet. Utvidelsen overflater et nytt vokabular ord, sammen med definisjonen og synonymer på hver nye tab.

Uansett, nok til å koble nye ting vi har gjort og på for moro av å finne ut av Chrome Extensions!

En animasjon som viser hvordan Wordsmith extension fungerer når du åpner en ny fane i Chrome.

Først, hva er en Chrome-Utvidelse likevel? I henhold til Chrome utvikler dokumenter:

Utvidelser er event-baserte programmer som brukes til å endre eller forbedre Chrome surfe-opplevelse. De gjør det mulig for brukere å tilpasse Chrome funksjonalitet og virkemåte til individuelle behov eller preferanser. De er bygget på webteknologi som HTML, JavaScript og CSS.

(Vekt mine)

I utgangspunktet, en Chrome-Utvidelsen er en one-trick pony verktøy som er bygd på toppen av normal surfing erfaring for å overstyre en fokusert sett av interaksjoner.

Å få en bare-bein extension opp og kjører

Chrome docs er stort sett grei, men kan få altfor komplisert for en nybegynner. Det første du trenger å gjøre i din lokale prosjektet katalogen er en åpenbar.json-fil. Denne filen funksjoner som kommandosentral for forlengelse. Dette er hvor du vil fortelle Chrome hvilke filer det skal være betalende oppmerksomhet til, og hvilken type extension logikk du bruker.

{
“manifest_version”: 2, //, Bare bruk 2, det er den stabile versjonen du vil
“name”: “Wordsmith”, // navnet på din extension!
“description”: “Ny fane? Nye ord!”, // En beskrivelse av extension!
“author”: “Natalie Schoch og Lindsay Grizzard”, // ut Hvem du er
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}

La oss snakke om det chrome_url_overrides bit. Dette forteller Chrome, “Hei, at ting du normalt belastning (i dette tilfellet) i en ny fane, legg denne kule ting jeg har gjort i stedet.” Jeg anbefaler at du starter med en ny fane i Chrome extension fordi det er den raskeste måten for å se at du får denne lille extension ting til å fungere. Du kan også overstyre historie eller bokmerker, men jeg skal la deg utforske det på egen hånd.

Nå kan vi lage en ny fil som heter newtab.html:

<!DOCTYPE HTML>
<html>
<body>
<h1> Hei verden </h1>
</body>
</html>

Flott! Nå er alt du trenger å gjøre er å laste dette inn i Chrome extension utvikler systemet for å se dine vakre arbeid. For å få dette opp og kjører, laste opp prosjektet i Chrome utvikler modus med følgende trinn:

  1. Gå til chrome://extensions
  2. Slå på “Utvikler-Modus” i øverste høyre
  3. Klikk “Legg Pakket”
  4. Legg i mappen som inneholder manifest.json og newtab.html filer
  5. Åpne en ny fane!

Du burde se denne magiske:

Du har nettopp bygget en Chrome-Utvidelse. Gratulerer! På dette punktet, kan du gå på ditt eget eventyr og gjøre noe statisk design for en ny fane. Du kan skrive CSS som du normalt ville (satt opp SCSS kompilering, skript koder, innebygde hvis du er et monster, etc…), og opprette nye statisk ting.

Det viktigste å huske når du endrer manifest.json-fil eller JS-filer er at du må gå tilbake inn chrome://utvidelser og trykk på oppdater-ikonet for forlengelse. Det vil ikke oppdatere fra lokal utvikling automatisk og endringene gjenspeiles ikke uten dette trinnet. Dette forvirret pokker ut av meg.

Nå la oss snakke om JavaScript

Det er to typer script filer i Chrome-Utvidelser: innhold skript og bakgrunn skript.

Bakgrunnen skript brukes for behandling av sentrale søknad oppgaver. De kan fungere som en kontroller for søknaden din, bor sovende til en hendelse branner og lossing etter at arrangementet er ferdig. Bruke bakgrunn skriptene når du ønsker å kontrollere kjernen logikken i programmet eller lytte for samhandling som er utenfor sidens DOM. Et eksempel ville være å klikke på Chrome-utvidelsen-ikonet øverst til høyre på verktøylinjen. Som ikke er en del av side-spesifikke DOM. Hvis du ønsker å manipulere ting utenfor sandboxed siden du er på, vil du trenger bakgrunn skript.

Ved å klikke på ikonet og det å ha et popup-load er et eksempel på en bakgrunn script kommando.

Som et notat, disse stole på Chrome-API og er litt mer avansert. I Wordsmith, jeg bestemte meg for å droppe bakgrunn skript helt som vi bare trengte DOM-UI. Jeg fant bakgrunn skript spesielt vanskelig og fikk mest hjelp fra Daniel Shiffman video tutorial. Faktisk, hele hans tutorial-serien er en flott introduksjon til extension utvikling.

Innhold skript utføre JavaScript-kode i sammenheng med en bestemt nettside og i isolasjon. Dette betyr at hvert skript kan få tilgang til den gjeldende DOM og manipulere den, men DOM og sin skript, kan ikke manipulere Chrome-utvidelsen i retur. Innhold skript har begrenset Chrome API-tilgang og eksisterer for å arbeide i enkeltstående, isolerte forekomster. Dette sikrer extension informasjon og stopper bibliotek konflikter.

Kult, men hva betyr alle som faktisk betyr? Det sier to ting. Du kan bruke innhold skript for å utføre vanlig browser JavaScript, som du ville gjort i en enkel web-applikasjon. Isolasjon definisjon betyr at utvidelsen JavaScript er i sitt eget univers, separat fra enhver webside er JavaScript. Dette holder ting som API hemmelige nøklene privat fra side skript. Det er også lar deg bruke hvilken som helst versjon av et JavaScript-bibliotek i din extension uten å bekymre deg for motstridende versjoner på en gitt nettside.

Den praktiske forskjellen i innhold ved hjelp av skript er hvordan de er lastet. I stedet for å knytte direkte til filen i HTML, kan du bruke den til å manifestere.json-fil for å indikere skript du ønsker å ringe.

{
“manifest_version”: 2,
“name”: “Wordsmith”,
“description”: “Ny fane? Nye ord!”
“author”: “Natalie Schoch og Lindsay Grizzard”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
“content_scripts”: [
{
“kamper”: [
“<all_urls>” //se alle match-mønster valg i chrome til google dokumenter
],
“js”: [“[ditt-vei-til]/jquery.min.js”,”[ditt-vei-til]/scripts.js”]
}
]
}

Dette nye innholdet script-kommandoen i manifest.json-filen forteller Chrome et par ting. Det forteller Chrome der du vil at filen for å kjøre med “kamper” – uttalelse. Vil du det skal belastningen på hver enkelt Chrome side? Er du foretar en utvidelse som bør bare påvirke visse sider? For å angi dette, legg den riktige URL-adressen samsvarer med mønsteret for å fortelle Chrome hva du skal betale oppmerksomhet til. Det forteller også manifest-filen der hvor å finne innholdet ditt-skript og i hvilken rekkefølge for å utføre dem.

Når du endrer manifest.json-fil eller JavaScript-filer er at du må gå tilbake inn chrome://utvidelser og trykk på oppdater-ikonet for forlengelse.

Legg til en konsoll.log() til den nye script-fil, laste extension, kan du navigere til en hvilken som helst NETTADRESSE, og du vil se din konsoll melding. Se konsoll logg forteller deg at du nå har tilgang til DOM og kan begynne å manipulere det. CHROME EXTENSIONS ER SÅ KULT. Du har makt til å spille rundt med front-end av internett uten å måtte kildekoden, eller en kompleks dev miljø. Nå la oss ha det litt gøy ved å gjøre alle divs på en side rødt!

$(‘div’).css(‘background-color’,’red’);

Nå, gå til en annen nettside. Alt er forferdelig og rød, men du har så mye makt! Du kan manipulere en nettside for å gjøre din budgivning. Gå ut og mugg utformingen av internett til noe bedre (eller verre) for deg selv eller andre!

Det er i utgangspunktet alt du trenger å vite for å komme i gang med Chrome-Utvidelser. Selv om dokumentasjonen kan være litt fremmed på første, begynner med en enkel statisk ny fane extension og gå derfra!

Glad manifest(.json)ing!

Sjekk ut Wordsmith er GitHub repo for å se hvordan vi bygget ut vår første Chrome-Utvidelsen og gjerne gaffel og la oss vite om feil!