Kontrollera Internet Med Chrome-Tillägg!

0
34

Som en web UI utvecklare och designer, det finns otaliga saker att lära sig och bara så många timmar i dag. Det är ämnen som jag har medvetet undvikit, som mobil och offline applikationsutveckling för, vid någon tidpunkt, måste du rita en linje någonstans i miljontals skinande nya ämnen och få lite arbete gjort. Ett av de områden som jag har undvikit i det förflutna är webbläsaren förlängning utveckling. Jag förstår inte hur de fungerade, vad som utvecklingsmiljön var, eller hur behörigheter samverkade med tvingande sidor för ärligt talat, jag trodde inte att jag var intresserad av.

Så en dag min mycket begåvade designer/utvecklare vän Natalie Schoch bad mig att få henne Chrome Extension över mållinjen. Hon hade front-end prototyper, men behövde hjälp med att koppla in data och med interaktiva JavaScript. Projektet kallas Ordvrängare och det är ute nu på Chrome Extension Store. Det är gratis och estetiskt tilltalande sätt att lära sig nya ord som du surfar på webben. Förlängning ytor en ny vokabulär ord, tillsammans med definitioner och synonymer i varje ny tab.

Hur som helst, nog för att koppla in den nya sak vi gjort och om det är kul att räkna ut Chrome-Tillägg!

En animation som visar hur en Ordvrängare tillägget fungerar när du öppnar en ny flik i Chrome.

Först, vad är en Chrome Extension ändå? Enligt Chrome utvecklare dokument:

Extensions är händelsestyrt program som används för att modifiera och förbättra Chrome webbupplevelse. De gör det möjligt för användare att skräddarsy funktioner i Chrome och beteende till individuella behov eller önskemål. De bygger på webbteknik så som HTML, JavaScript, och CSS.

(Min vikt)

I grund och botten, en Chrome Extension är en one-trick pony verktyg byggt på toppen av normal surfning erfarenhet för att åsidosätta ett fokuserat samspel.

Att få en hake med förlängning upp och kör

Chrome docs är oftast enkelt, men kan bli alltför komplicerat för en nybörjare. Det första du måste göra i din lokala projekt katalog är ett manifest.json-fil. Denna fil fungerar som command center för din anknytning. Det är där du kommer att berätta för Chrome vilka filer som det ska vara uppmärksamma på och vilken typ av förlängning logik som du använder.

{
“manifest_version”: 2, // använder Bara 2, det är den stabila versionen som du vill
“name”: “Honom”, // namnet på din förlängning!
“description”: “Ny flik? Nya ord!”, // En beskrivning av din förlängning!
“author”: “Natalie Schoch och Lindsay Grizzard”, // Som du är
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}

Låt oss tala om det chrome_url_overrides lite. Detta är talande Chrome, “Hej, det du normalt skulle belastning (i detta fall) i en ny flik, last detta cool sak jag gjort i stället.” Jag rekommenderar att du börjar med en ny flik i Chrome extension eftersom det är det snabbaste sättet att se till att du får denna lilla förlängning sak att arbeta. Du kan också åsidosätta historik eller bokmärken, men jag ska låta dig utforska det på egen hand.

Nu kan vi skapa en ny fil som heter newtab.html:

<!DOCTYPE HTML>
<html>
<body>
<h1> Hej världen </h1>
</body>
</html>

Bra! Allt du behöver göra är att ladda detta i Chrome förlängning utvecklare system för att se ditt vackra arbete. För att få upp och igång, ladda ditt projekt i Chrome developer mode med följande steg:

  1. Besöker du chrome://extensions
  2. Slå på “Developer Mode” i det övre högra
  3. Klicka På “Ladda Packas Upp”
  4. Ladda den katalog som innehåller ditt manifest.json och newtab.html filer
  5. Öppna en ny flik!

Du bör se denna magi:

Du bara byggt en Chrome Extension. Grattis! Vid denna punkt, kan du gå på egna äventyr och göra någon statisk design för en ny flik. Du kan skriva CSS som du normalt skulle ställa upp SCSS sammanställa, script-taggar, inline om du är ett monster, etc…), och skapa nya statiska saker.

Det viktigaste att komma ihåg när du ändrar manifestet.json-fil eller JS-filer är att du måste gå tillbaka till chrome://extensions och träffa ladda ikonen för din anknytning. Det kommer inte att uppdatera från din lokala utvecklingen automatiskt och dina ändringar kommer inte att påverka utan att detta steg. Denna förvirrade fan av mig.

Nu ska vi prata om JavaScript

Det finns två typer av script-filer i Chrome-Tillägg: innehåll skript och bakgrund skript.

Bakgrund skript används för hantering av centrala ansökan uppgifter. De kan agera som en styrenhet för din ansökan, som bor vilande till dess att en händelse bränder och avlastning efter den händelsen är klar. Använd bakgrunden skript när du vill styra den grundläggande logiken i din ansökan eller lyssna för interaktioner som är utanför sidans DOM. Ett exempel skulle vara att klicka på Chrome-extension ikonen i övre högra hörnet av verktygsfältet. Det är inte en del av sidan-specifika DOM. Om du vill manipulera saker utanför den isolerade sidan du är på, du kommer att behöva bakgrund skript.

Klicka på ikonen med en popup-last är ett exempel på en bakgrund script kommandot.

Som en not, dessa är beroende av Chrome API och är lite mer avancerad. I Wordsmith, jag bestämde mig för att avstå bakgrund skript helt som vi bara behövde DOM-specifika UI. Jag hittade bakgrund skript särskilt svårt och fick mest hjälp från Daniel Shiffman video tutorial. I själva verket, hela hans tutorial serien är en härlig introduktion till förlängning utveckling.

Innehåll skript köra JavaScript i samband med en specifik webbsida och i isolering. Detta innebär att varje skript kan få tillgång till den aktuella DOM och manipulera det, men DOM och skript, kan inte manipulera Chrome extension i retur. Innehåll skript har begränsad Chrome API-åtkomst och finns att jobba i en enda, enstaka fall. Detta säkrar förlängning information och stoppar bibliotek konflikter.

Cool, men vad gör det egentligen? Det säger två saker. Du kan använda innehåll som skript för att utföra vanliga webbläsare JavaScript, som du skulle i en enkel webbapplikation. Isolering definition innebär att din anknytning JavaScript i det egna universum, separat från en webbsida JavaScript. Detta håller saker som API hemliga nycklar privat från sidan skript. Det kan också låta dig använda någon version av ett JavaScript-bibliotek i din förlängning utan att behöva oroa motstridiga versioner på en viss webbsida.

Den praktiska skillnaden i att använda innehåll som skript är hur de är laddade. Istället för att länka direkt till filen i HTML, använd manifestet.json-filen för att ange de manus som du vill ringa.

{
“manifest_version”: 2,
“name”: “Honom”,
“description”: “Ny flik? Nya ord!”
“author”: “Natalie Schoch och Lindsay Grizzard”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
“content_scripts”: [
{
“matcher”: [
“<all_urls>” //se alla matcha mönster alternativ i chrome docs
],
“js”: [“[din-väg-till]/jquery.min.js”,”[din-väg-till]/scripts.js”]
}
]
}

Detta nya innehåll script kommandot i manifestet.json-filen talar om för Chrome ett par saker. Det berättar Chrome där du vill att filen för att köra med “matchningar” – uttalande. Vill du ha det till belastningen på varje enskild Chrome-sida? Gör du ett tillägg som bör endast påverka vissa sidor? Ange detta, lägga till rätt WEBBADRESS matcha mönster att berätta Chrome vad du ska vara uppmärksam på. Den berättar också att de manifest-filen där för att hitta ditt innehåll-skript och i vilken ordning för att utföra dem.

Vid byte av manifestet.json-fil eller JavaScript-filer är att du måste gå tillbaka till chrome://extensions och träffa ladda ikonen för din anknytning.

Lägg till en konsol.log() till din ny skript-fil, ladda din förlängning, navigerar till en WEBBADRESS, och du kommer att se din konsol meddelande. Se konsolen logga berättar för dig att du nu har tillgång till DOM och kan börja manipulera det. TILLÄGG FÖR CHROME ÄR SÅ COOL. Du har möjlighet att spela runt med den främre delen av internet utan att behöva källkoden eller en komplex dev miljö. Nu ska vi ha lite kul genom att göra alla divar på en sida röd!

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

Nu, gå till en annan webbplats. Allt är fult och rött, men du har så mycket makt! Du kan manipulera en webbsida för att göra din budgivning. Gå ut och forma den konstruktion av internet till något bättre (eller sämre) till dig själv eller andra!

Det är i princip allt du behöver veta för att komma igång med Chrome Extensions. Även om dokumentationen kan vara lite främmande i början, börja med en enkel statisk ny flik förlängning och iterera från det!

Glad manifest – (.json)ing!

Kolla in Ordvrängare är GitHub repo för att se hur vi byggt ut vår första Chrome-Extension, känn dig fri att gaffel och låt oss veta om buggar!