Controle op het Internet Met Chrome-Extensies!

0
21

Als een web UI developer en designer, er zijn talloze dingen om te leren en maar zoveel uren in de dag. Er zijn een aantal onderwerpen heb ik bewust vermeden, zoals mobiele-en off-line applicatie ontwikkeling, omdat op een bepaald punt, je hebt om een lijn te trekken ergens in de miljoenen glanzende nieuwe onderwerpen en wat werk gedaan. Een van de gebieden die ik heb vermeden in het verleden is een browser extensie ontwikkeling. Ik begreep niet hoe ze werkten, wat de ontwikkeling van milieu was, of hoe de machtigingen interactie met het overschrijven van pagina ‘ s want, eerlijk gezegd, ik denk niet dat ik geïnteresseerd was.

Dan op een dag, mijn zeer getalenteerde designer/developer vriend Natalie Schoch vroeg me om haar te krijgen Chrome-Extensie over de finish. Ze had de front-end bedacht, maar wat hulp nodig het aansluiten van de gegevens en met interactieve JavaScript. Het project heet Wordsmith en het is nu op de Chrome-Extensie Store. Het is een gratis en esthetisch verantwoorde manier om te leren van nieuwe woordenschat als u surfen op het web. De uitbreiding oppervlakken een nieuwe woordenschat woord, samen met de definitie en de synoniemen in elk nieuw tabblad.

Hoe dan ook, genoeg aansluiten van de nieuwe dingen die we gemaakt en op het plezier van het uitzoeken van Chrome Extensies!

Een animatie laat zien hoe de Wordsmith extensie werkt bij het openen van een nieuw tabblad in Chrome.

Ten eerste, wat is een Chrome-Extensie? Volgens de ontwikkelaars van Chrome documenten:

Extensies zijn event-based ‘programma’ s gebruikt voor het wijzigen of verbeteren van de Chrome browser. Ze maken het gebruikers mogelijk om op maat Chrome functionaliteit en het gedrag van individuele behoeften of voorkeuren. Ze zijn gebaseerd op webtechnologie zoals HTML, JavaScript en CSS.

(Nadruk van mij)

Kortom, een Chrome-Extensie is een one-trick pony tool gebouwd op de top van de normale browse-ervaring te overschrijven met een reeks interacties.

Het krijgen van een kale extensie

De Chrome-documenten zijn meestal eenvoudig, maar kunnen overdreven ingewikkeld voor een beginner. Het eerste wat je nodig hebt om in uw lokale project-directory is een manifest.json-bestand. Dit bestand functies zoals het command center voor uw toestel. Dit is waar je zal vertellen Chrome welke bestanden moet worden aandacht te besteden aan en wat voor soort van extensie logica die u gebruikt.

{
“manifest_version”: 2, // Gewoon gebruik maken van 2, het is de gepubliceerde versie die u wilt
“naam”: “Woordkunstenaar”, // De naam van uw toestel!
“description”: “een Nieuw tabblad? Nieuw woord!”, // De beschrijving van de extensie!
“author”: “Natalie Schoch en Lindsay Grizzard”, // Wie je bent
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}

Laten we praten over dat chrome_url_overrides beetje. Dit is het vertellen van Chrome, ‘ Hey, dat wat je normaal zou de belasting (in dit geval) in een nieuw tabblad, laden deze cool ding heb ik gemaakt voor in de plaats.” Ik adviseer te beginnen met een nieuw tabblad Chrome-extensie, want het is de snelste manier om te zien dat u deze kleine uitbreiding ding werkt. U kan ook overschrijven geschiedenis of bladwijzers, maar ik zal u laten ontdekken dat op uw eigen.

Nu kunnen we maken een nieuw bestand met de naam newtab.html:

<!DOCTYPE HTML>
<html>
<body>
<h1> Hey world </h1>
</body>
</html>

Geweldig! Nu alles wat je hoeft te doen is belasting in de Chrome-extensie developer systeem te zien met je mooie werk. Om dit te krijgen up and running, de belasting van uw project in Chrome developer modus met de volgende stappen:

  1. Ga naar chrome://extensions
  2. Draai op de “Developer Mode” in de rechterbovenhoek
  3. Klik Op “Load Uitgepakt”
  4. Laden van de map met uw manifest.json en newtab.html bestanden
  5. Een nieuw tabblad openen!

Moet je zien magic:

Die u net gebouwd een Chrome-Extensie. Congrats! Op dit punt, kunt u op uw eigen avontuur en maak een statisch ontwerp voor een nieuw tabblad. U kunt schrijven CSS zoals je normaal zou doen (SCSS samenstellen, script-tags, inline-als je een monster, enz…), en het creëren van nieuwe statische dingen.

De meest belangrijke ding om te onthouden bij het wijzigen van het manifest.json-bestand of JS-bestanden is dat je moet terug naar chrome://extensions en druk op de reload-pictogram voor uw toestel. Het zal niet voor het bijwerken van uw lokale ontwikkeling automatisch en worden de wijzigingen niet worden doorgevoerd zonder deze stap. Dit verward met het vinden van mij.

Laten we nu praten over JavaScript

Er zijn twee soorten script bestanden in Chrome Extensies: inhoud, scripts en achtergrond scripts.

Achtergrond scripts worden gebruikt voor de afhandeling van central application taken. Ze kunnen fungeren als een controller voor uw toepassing, verblijf slapende totdat er een gebeurtenis plaatsvindt en lossen na de gebeurtenis is voltooid. Op de achtergrond scripts als u wilt bepalen de kern van de logica van de toepassing of het luisteren naar interacties die buiten de pagina ‘ s DOM. Een voorbeeld zou kunnen zijn op uw Chrome-extensie-pictogram in de rechterbovenhoek van de werkbalk. Dat is geen onderdeel van de pagina-specifieke DOM. Als u wilt manipuleren van dingen buiten de sandbox pagina die u op de achtergrond scripts.

Klik op het pictogram en het hebben van een pop-up te laden is een voorbeeld van een achtergrond script opdracht.

Als een opmerking, deze vertrouwen op het Chrome-API en zijn een beetje meer geavanceerde. In Wordsmith, heb ik besloten om af te zien van background scripts helemaal als we alleen nodig DOM-specifieke UI. Ik vond achtergrond scripts vooral lastig en kreeg de meeste hulp van Daniel Shiffman de video tutorial. In feite, zijn hele tutorial serie is een mooie introductie om extensie ontwikkeling.

Inhoud scripts uitvoeren van JavaScript in de context van een specifieke webpagina en in een isolement. Dit betekent dat elk script toegang tot de huidige DOM en te manipuleren, maar de DOM en de scripts niet manipuleren van de Chrome-extensie voor terug. Inhoud scripts beperkt Chrome API-toegang en bestaan aan het werk in enkelvoudige, geïsoleerde gevallen. Dit stelt de extensie informatie en stopt de bibliotheek conflicten.

Cool, maar wat doet dat eigenlijk? Het zegt twee dingen. U kunt gebruik maken van de inhoud van scripts uit te voeren gewone browser JavaScript, zoals je zou doen in een eenvoudige web-applicatie. De isolatie definitie betekent dat uw extensie JavaScript is in zijn eigen universum, los van alle webpagina ‘ s met JavaScript. Dit houdt de dingen graag API geheime sleutels eigen pagina scripts. Ook kunt u gebruik maken van een versie van een JavaScript-bibliotheek in uw toestel zonder zorgen te maken over de conflicterende versies op een bepaalde webpagina.

Het praktische verschil in het gebruik van de inhoud van scripts is hoe ze zijn geplaatst. In plaats van een koppeling naar het bestand in HTML, het gebruik van het manifest.json-bestand aan te geven in de scripts die u wilt bellen.

{
“manifest_version”: 2,
“naam”: “Woordkunstenaar”,
“description”: “een Nieuw tabblad? Nieuw woord!”
“author”: “Natalie Schoch en Lindsay Grizzard”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
“content_scripts”: [
{
“wedstrijden”: [
“<all_urls>” //bekijk alle match patroon opties in de chrome-documenten
],
“js”: [“[uw-pad -]/jquery.min.js”,”[uw-pad -]/scripts.js”]
}
]
}

Deze nieuwe content-script-commando in het manifest.json-bestand, vertelt Chrome een paar dingen. Het vertelt Chrome-waar wilt u dat bestand uit te voeren met de “wedstrijden” verklaring. Wilt u het laden op elke Chrome-pagina? Bent u het maken van een uitbreiding, die alleen van invloed zijn op bepaalde pagina ‘ s? Om dit te specificeren, voeg je de juiste URL overeenkomen met het patroon te vertellen Chrome wat om op te letten. Het vertelt ook het manifest-bestand waar uw inhoud, scripts en in welke volgorde om ze uit te voeren.

Bij het wijzigen van het manifest.json-bestand of JavaScript-bestanden is dat je moet terug naar chrome://extensions en druk op de reload-pictogram voor uw toestel.

Het toevoegen van een console.log() om uw nieuw script bestand opnieuw laden van uw toestel, navigeert u naar een URL, en je zult zien dat je console bericht. Het zien van de console log vertelt u dat u hebt nu toegang tot de DOM en kan beginnen te manipuleren. CHROME EXTENSIES ZIJN ZO COOL. U hebt de macht om te spelen met de front-end van het internet zonder dat de broncode of een complex dev omgeving. Laten we nu eens wat plezier door het maken van alle divs op een pagina rood!

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

Nu, ga naar een andere website. Alles is klein en rood, maar je hebt zo veel energie! Je kunt het bewerken alle webpagina ‘ te doen van een bod. Ga heen en vorm het ontwerp van het internet in iets beter (of slechter) voor jezelf of voor anderen!

Dat is eigenlijk alles wat je moet weten om te beginnen met Chrome-Extensies. Hoewel de documentatie kan een beetje vreemd op het eerste, het beginnen met een eenvoudige statische nieuw tabblad uitbreiding en doorlopen!

Gelukkig manifest(.json)ing!

Check out Wordsmith ‘ s GitHub repo te zien hoe we bouwden onze eerste Chrome-Extensie en voel je vrij om een vork en laat het ons weten bugs!