Sådan oprettes en simpel Chrome-udvidelse i Vanilla JavaScript

I dag vil jeg vise dig, hvordan du opretter Chrome-udvidelse i vanilje JavaScript - dvs. almindelig JavaScript uden yderligere rammer som React, Angular eller Vue.

Det er ikke nødvendigt at opbygge en Chrome-udvidelse - i mit første programmeringsår frigav jeg to udvidelser, og jeg lavede både ved hjælp af HTML, CSS og almindelig JavaScript. I denne artikel vil jeg lede dig igennem, hvordan du kan det samme på få minutter.

Jeg viser dig, hvordan du opretter et simpelt Chrome-udvidelsespanel fra bunden. Hvis du dog har din egen idé til en udvidelse og bare vil vide, hvad du skal føje til dine eksisterende projektfiler for at få den til at fungere i Chrome, kan du springe ned til afsnittet om tilpasning af din egen manifest.json-fil og ikon.

Om Chrome-udvidelser

En Chrome-udvidelse er stort set bare en gruppe filer, der tilpasser din oplevelse i Google Chrome-browseren. Der er et par forskellige typer Chrome-udvidelser; nogle aktiveres, når en bestemt betingelse er opfyldt, som når du er på en butik til kasseside; nogle dukker kun op, når du klikker på et ikon; og nogle vises hver gang du åbner en ny fane. Begge udvidelser, som jeg offentliggjorde i år, er "ny fane" -udvidelser; den første er Compliment Dash, et betjeningspanel, der holder en to-do-liste og komplimenterer brugeren, og den anden er et værktøj til præster kaldet Liturgical.li. Hvis du ved, hvordan man koder et grundlæggende websted, kan du kode denne type udvidelse uden for store besvær.

Forudsætninger

Vi vil holde tingene enkle, så i denne tutorial bruger vi bare HTML, CSS og noget grundlæggende JavaScript, såvel som tilpasning af en manifest.json-fil, som jeg vil medtage nedenfor. Chrome-udvidelser varierer i kompleksitet, så det kan være så enkelt eller kompliceret at opbygge en Chrome-udvidelse, som du vil have det. Når du lærer det grundlæggende her, vil du være i stand til at skabe noget meget mere kompliceret ved hjælp af dit eget skillset.

Opsætning af dine filer

Til denne tutorial vil vi oprette et simpelt dashboard, der hilser brugeren ved navn. Lad os kalde vores udvidelse Simple Greeting Dashboard.

For at komme i gang skal du oprette tre filer: index.html, main.css og main.js. Læg disse i deres egen mappe. Udfyld derefter HTML-filen med grundlæggende HTML-dokumentopsætning, og tilslut den til CSS- og JS-filer:

Simpel hilsen Dashboard
================================= // ->
  
   Simple Greeting Dashboard 
  
   
   

Tilpasning af din manifest.json-fil

Disse filer vil ikke være nok til at få dit projekt til at fungere som en Chrome-udvidelse. Til dette har vi brug for en manifest.json-fil, som vi vil tilpasse med nogle grundlæggende oplysninger om vores udvidelse. Du kan downloade den fil på Googles udviklerportal eller bare kopiere / indsætte følgende linjer i en ny fil og gemme den som manifest.json i din mappe:

{
  "name": "Kom godt i gang eksempel",
  "version": "1.0",
  "description": "Byg en udvidelse!",
  "manifest_version": 2
}

Lad os nu opdatere eksempelfilen med lidt mere information om vores udvidelse. Vi vil kun ændre de første tre værdier i denne kode: navn, version og beskrivelse. Lad os udfylde vores navn og en en-linjebeskrivelse, og da dette er vores første version, lad os holde denne værdi på 1.0. Manifest_version-nummeret skal holdes det samme.

Dernæst vil vi tilføje et par linjer for at fortælle Chrome, hvad de skal gøre med denne udvidelse.

{
  "name": "Simple Greeting Dashboard",
  
  "version": "1.0",
  
  "beskrivelse": "Denne Chrome-udvidelse hilser brugeren, hver gang de åbner en ny fane",
  
  "manifest_version": 2
  "incognito": "split",
  
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  
  "tilladelser": [
     "ActiveTab"
   ],
"ikoner": {
    "128": "icon.png"
    }
}

Værdien "inkognito": "split" fortæller Chrome, hvad de skal gøre med denne udvidelse, når den er i inkognito-tilstand. "split" tillader udvidelsen at køre i sin egen proces, når browseren er inkognito; for andre indstillinger, se dokumentationen til Chrome-udviklere.

Som du sandsynligvis kan se, fortæller "chrome_url_overrides" Chrome til at åbne index.html, når en ny fane åbnes. Værdien af ​​"tilladelser" giver brugeren en pop-up og fortæller dem, at denne udvidelse vil tilsidesætte deres nye fane, når de prøver at installere den.

Endelig fortæller vi Chrome, hvad der skal vises som vores favorit: en fil kaldet icon.png, som vil være 128 x 128 pixels.

Oprettelse af et ikon

Da vi ikke har ikonfilen endnu, opretter vi derefter et ikon til Simple Greeting Dash. Brug gjerne den, jeg lavede nedenfor. Hvis du gerne vil lave dine egne, kan du nemt gøre det ved hjælp af Photoshop eller en gratis service som Canva. Bare sørg for, at dimensionerne er 128 x 128 pixels, og at du gemmer det som icon.png i den samme mappe som dine HTML-, CSS-, JS- og JSON-filer.

Mit 128x128 ikon til Simple Greeting Dash

Upload af dine filer (hvis du koder din egen side)

Ovenstående information er alt hvad du virkelig har brug for at vide for at oprette din egen nye fane Chrome-udvidelse. Når du har tilpasset din manifest.json-fil, kan du designe hvilken type ny faneblad du ønsker i HTML, CSS og JavaScript og uploade den som vist nedenfor. Men hvis du gerne vil se, hvordan jeg laver dette enkle dashboard, skal du springe ned til "Oprette en indstillingsmenu."

Når du er færdig med at style din nye faneside, er din Chrome-udvidelse færdig og klar til at uploade til Chrome. Hvis du vil uploade det selv, skal du gå til chrome: // extensions / i din browser og skifte til Developer Mode øverst til højre.

Opdater siden, og klik på "Indlæs udpakket."

Vælg derefter den mappe, hvor du gemmer dine HTML-, CSS-, JS- og manifest.json-filer samt din icon.png, og upload. Udvidelsen skal fungere hver gang du åbner en ny fane!

Når du er færdig med din udvidelse og har testet den ud selv, kan du få en udviklerkonto og den til Chrome-udvidelsesbutikken. Denne guide til offentliggørelse af din udvidelse skulle hjælpe.

Hvis du ikke opretter din egen udvidelse lige nu og bare ønsker at se, hvad der er muligt med Chrome-udvidelser, skal du læse videre for at se, hvordan du opretter et meget simpelt hilsen på dashboard.

Oprettelse af en indstillingsmenu

Til min udvidelse er den første ting, jeg vil gøre, at oprette et input, hvor min bruger kan tilføje deres navn. Da jeg ikke ønsker, at dette input skal være synligt hele tiden, vil jeg placere det i en div kaldet indstillinger, som jeg kun vil synliggøre, når der klikkes på knappen Indstillinger.

   
      
       Tilføj 
   

Lige nu ser vores indstillinger sådan ud:

Så smuk!

... så jeg vil give dem nogle grundlæggende stilarter i CSS. Jeg giver knappen og indtaster både lidt polstring og en kontur, og derefter lægger lidt mellemrum mellem indstillingerne og formen.

.indstillinger {
   display: flex;
   flex-retning: række;
   align-content: center;
}
input {
   polstring: 5px;
   skriftstørrelse: 12px;
   bredde: 150px;
   højde: 20px;
}
knap {
   højde: 30px;
   bredde: 70px;
   baggrund: ingen; / * Dette fjerner standardbaggrunden * /
   farve: # 313131;
   kant: 1px solid # 313131;
   grænseradius: 50px; / * Dette giver vores knap afrundede kanter * /
   skriftstørrelse: 12px;
   markør: markør;
}
form {
   polstring: 20px;
}

Nu ser vores indstillinger lidt bedre ud:

Men lad os gøre dem skjult, når brugeren ikke har klikket på Indstillinger. Det gør jeg ved at tilføje følgende til .indstillinger, hvilket får navnindgangen til at forsvinde fra siden af ​​skærmen:

transform: translateX (-100%);
overgang: transform 1s;

Lad os nu oprette en klasse kaldet indstillinger-åben, som vi tænder og slukker i JavaScript, når brugeren klikker på knappen Indstillinger. Når indstillinger-åben føjes til indstillingerne, vil det ikke blive anvendt nogen transformationer på det; det vil bare være synligt i sin normale position.

.settings-open.settings {
   transform: ingen;
}

Lad os få klasseskiftet til at arbejde i JavaScript. Jeg vil lave en funktion kaldet openSettings (), der aktiverer eller deaktiverer klasseindstillingerne. For at gøre dette får jeg først elementet med dets ID for "indstillinger" og derefter bruge classList.toggle til at tilføje klassen med indstillinger-åben.

funktion openSettings () {
   document.getElementById ( "settings") classList.toggle ( "indstillinger-åbne.");
}

Nu tilføjer jeg en begivenhedslytter, der udløser funktionen, hver gang der klikkes på knappen Indstillinger.

document.getElementById ("indstillinger-knap"). addEventListener ('klik', openSettings)

Dette får dine indstillinger til at vises eller forsvinde, når du klikker på knappen Indstillinger.

Oprettelse af en personlig hilsen

Lad os derefter oprette hilsen-beskeden. Vi opretter en tom h2 i HTML og udfylder den derefter ved hjælp af innerHTML i JavaScript. Jeg vil give h2'en et ID, så jeg kan få adgang til det senere og lægge det i en div, der kaldes hilsen til at centrere den.

   

Nu i JavaScript vil jeg oprette en grundlæggende hilsen ved hjælp af brugerens navn. Først laver jeg variabel for at holde navnet, som jeg holder tomt for nu, og tilføje til senere.

var brugernavn;

Selv hvis brugernavn ikke var tomt, hvis jeg bare satte brugernavn i en hilsen i min HTML, ville Chrome ikke bruge det samme navn, hvis jeg åbner det i en anden session. For at sikre, at Chrome husker, hvem jeg er, bliver jeg nødt til at arbejde med lokal opbevaring. Så jeg laver en funktion kaldet saveName ().

funktion saveName () {
    localStorage.setItem ('modtaget navn', brugernavn);
}

Funktionen localStorage.setItem () tager to argumenter: det første er et nøgleord, jeg vil bruge til at få adgang til oplysningerne senere, og det andet er de oplysninger, den skal huske; i dette tilfælde brugernavnet. Jeg får disse gemte oplysninger gennem localStorage.getItem, som jeg vil bruge til at opdatere variablen userName.

var userName = localStorage.getItem ('modtaget navn');

Før vi linker dette til en begivenhedslytter i formen, vil jeg fortælle Chrome, hvad jeg skal kalde mig, hvis jeg ikke har fortalt det om mit navn endnu. Jeg gør dette ved hjælp af en if-sætning.

if (brugernavn == null) {
   userName = "ven";
}

Og lad os endelig tilslutte vores brugernavn-variabel til vores form. Jeg vil gøre dette inde i en funktion, så jeg kan kalde den funktion, når navnet opdateres. Lad os kalde funktionen ændring Navn ().

funktionsændringName () {
   userName = document.getElementById ("navn-input") .værdi;
   saveName ();
}

Jeg vil gerne kalde denne funktion, hver gang nogen sender et navn ved hjælp af formularen. Jeg gør dette med en begivenhedslytter, hvor jeg kalder funktionskiftet Navn () og også forhindrer, at sidens standard opdateres, når en formular indsendes.

document.getElementById ("navn-form"). addEventListener ('indsende', funktion (e) {
   e.preventDefault ()
   ændre navn();
});

Endelig, lad os oprette vores hilsen. Jeg sætter dette også i en funktion, så jeg kan kalde det både når siden opdateres, og når der skiftes navn (). Her er funktionen:

funktion getGreeting () {
   document.getElementById ("hilsen"). innerHTML = `Hej, $ {brugernavn}. Nyd din dag! ';
}
getGreeting ()

Nu ringer jeg getGreeting () i min ændringsnavn () -funktion og kalder det en dag!

Til sidst, stil din side

Nu er det tid til at tilføje sidste hånd. Jeg vil centrere mit header ved hjælp af flexbox, gøre det større og tilføje en gradientbaggrund til kroppen i CSS. Og for at få knappen og h2 til at springe imod gradienten, gør jeg dem hvide.

.hilsen-container {
   display: flex;
   justify-content: center;
   align-content: center;
}
. hilsen {
   font-family: sans-serif;
   skriftstørrelse: 60px;
   farve: #fff;
}
krop {
   baggrund-farve: # c670ca;
   baggrund-billede: lineær gradient (45deg, # c670ca 0%, # 25a5c8 52%, # 20e275 90%);
}
html {
   højde: 100%;
}

Og det er det! Din side ser sådan ud:

Din helt egen Chrome-udvidelse!

Det er måske ikke meget, men det er et godt fundament for dig at oprette og style dine egne Chrome-dashboards. Fortæl os venligst, hvis du har spørgsmål, og du er velkommen til at kontakte mig på Twitter på @saralaughed.