Kako izraditi jednostavno Chrome proširenje u JavaScript-u Vanilla

Danas ću vam pokazati kako napraviti Chrome proširenje u JavaScript-u vanilije - to je obični JavaScript bez ikakvih dodatnih okvira poput React, Angular ili Vue.

Izgradnja Chromeovog proširenja ne mora biti teška - u prvoj godini programiranja objavio sam dva proširenja i oba sam napravio pomoću HTML-a, CSS-a i običnog JavaScripta. U ovom ću vam članku predstaviti upute za isto u samo nekoliko minuta.

Pokazat ću vam kako od početka napraviti jednostavnu Chromeovu nadzornu ploču. Ako, pak, imate svoju ideju za proširenje i samo želite znati što dodati postojećim projektnim datotekama da bi ona funkcionirala u Chromeu, preskočite prema dolje na odjeljak o prilagođavanju vlastite datoteke i ikone manifest.json.

O Chromeovim proširenjima

Chromeovo proširenje u osnovi je samo grupa datoteka koja prilagođava vaše iskustvo u pregledniku Google Chrome. Postoji nekoliko različitih vrsta proširenja za Chrome; neki se aktiviraju kada je ispunjen određeni uvjet, na primjer, kada ste na stranici za kupnju robe; neki se pojavljuju samo kad kliknete na ikonu; a neke se pojavljuju svaki put kada otvorite novu karticu. Oba su proširenja koja sam objavio ove godine proširenja za "novu karticu"; prvi je Compliment Dash, nadzorna ploča koja vodi popis obveza i komplimentira korisnika, a drugi je alat za pastore koji se zove Liturgical.li. Ako znate kako kodirati osnovnu web stranicu, tada možete šifrirati ovu vrstu proširenja bez previše poteškoća.

Preduvjeti

Sve ćemo pojednostaviti, tako da ćemo u ovom vodiču koristiti HTML, CSS i neke osnovne JavaScript, kao i prilagođavanje datoteke manifest.json koju ću u nastavku uvrstiti. Proširenja za Chrome razlikuju se po složenosti, tako da izrada Chromeovog proširenja može biti tako jednostavna ili komplicirana koliko želite. Nakon što ovdje naučite osnove, moći ćete stvoriti nešto mnogo složenije koristeći svoj vlastiti set vještina.

Postavljanje datoteka

Za ovaj će vodič stvoriti jednostavnu nadzornu ploču koja će korisnika pozdraviti po imenu. Nazovimo naše proširenje Jednostavna pozdrava nadzornoj ploči.

Za početak, trebali biste stvoriti tri datoteke: index.html, main.css i main.js. Stavite ih u svoju mapu. Zatim napunite HTML datoteku osnovnom postavkom HTML dokumenta i povežite je s CSS i JS datotekama:

Jednostavna pozdravna ploča
================================== // ->
  
   Jednostavna nadzorna ploča 
  
   
   

Prilagodba datoteke manifest.json

Te datoteke neće biti dovoljne za rad vašeg projekta kao Chromeovog proširenja. Za to nam treba datoteka manifest.json koju ćemo prilagoditi nekim osnovnim podacima o našem proširenju. Možete preuzeti tu datoteku na Googleovom portalu za razvojne programere ili jednostavno kopirati / zalijepiti sljedeće retke u novu datoteku i spremiti je kao manifest.json u svoju mapu:

{
  "name": "Primjer za početak",
  "inačica": "1.0",
  "description": "Izgradite proširenje!",
  "manifest_version": 2
}

Ažurirajmo oglednu datoteku s malo više informacija o našem proširenju. Željeli bismo promijeniti samo prve tri vrijednosti ovog koda: ime, verziju i opis. Ispunimo svoje ime i opis jednog retka, a budući da je ovo naša prva verzija, zadržimo tu vrijednost na 1,0. Broj manifesta_verzije mora biti isti.

Zatim ćemo dodati nekoliko redaka kako bismo rekli Chromeu što učiniti s ovim proširenjem.

{
  "name": "Jednostavna pozdravna nadzorna ploča",
  
  "inačica": "1.0",
  
  "description": "Ovo proširenje Chromea pozdravlja korisnika svaki put kada otvori novu karticu",
  
  "manifest_version": 2
  "inkognito": "podijeljen",
  
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
  
  "dozvole": [
     "ActiveTab"
   ],
"ikone": {
    "128": "icon.png"
    }
}

Vrijednost "anonimno": "podijeljeno" govori Chromeu što treba učiniti s ovim proširenjem kada je u anonimnom načinu. "split" će omogućiti da se ekstenzija pokrene u vlastitom procesu kada je preglednik anoniman; za ostale opcije pogledajte dokumentaciju za razvojne programere za Chrome.

Kao što vjerojatno možete vidjeti, „chrome_url_overrides“ govori Chromeu da otvori index.html kad god se otvori nova kartica. Vrijednost "dozvola" korisniku će pružiti skočni prozor koji će mu dati do znanja da će ovo proširenje nadjačati njihovu novu karticu kada ga pokuša instalirati.

Na kraju, Chromeu poručujemo što će se prikazati kao favicon: datoteka zvana icon.png, koja će biti 128 x 128 piksela.

Stvaranje ikone

Budući da još nemamo datoteku ikona, stvorit ćemo ikonu za Simple Greeting Dash. Slobodno upotrijebite onaj koji sam napravio u nastavku. Ako želite napraviti svoj vlastiti, lako to možete učiniti pomoću Photoshopa ili besplatne usluge kao što je Canva. Samo budite sigurni da su dimenzije 128 x 128 piksela i da ih spremate kao icon.png u istu mapu kao i vaše HTML, CSS, JS i JSON datoteke.

Moja ikona 128x128 za Jednostavni pozdravni crtica

Prijenos datoteka (ako kodirate vlastitu stranicu)

Gore navedene informacije su sve što stvarno trebate znati kako biste stvorili vlastito novo proširenje Chrome kartice. Nakon što prilagodite datoteku manifest.json, možete dizajnirati sve nove stranice na karticama u HTML-u, CSS-u i JavaScript-u i uploadati ih kao što je prikazano u nastavku. Ali ako želite vidjeti kako ću napraviti ovu jednostavnu nadzornu ploču, preskočite prema "Stvaranje izbornika postavki".

Nakon što dizajnirate novu stranicu na kartici, proširenje za Chrome je završeno i spremno za prijenos u Chrome. Da biste ga sami prenijeli, idite na chrome: // extensions / u svom pregledniku i prebacite se na Developer Mode u gornjem desnom kutu.

Osvježite stranicu i kliknite na "Učitaj nepakirano".

Zatim odaberite mapu u koju spremate HTML, CSS, JS i manifest.json datoteke, kao i svoj icon.png i prenesite ih. Proširenje bi trebalo raditi svaki put kada otvorite novu karticu!

Nakon što završite sa svojim proširenjem i sami ga testirate, možete dobiti račun programera i njega u Chromeovoj trgovini proširenja. Ovaj vodič za objavljivanje vašeg proširenja trebao bi vam pomoći.

Ako trenutno ne stvarate vlastito proširenje i samo želite vidjeti što je moguće s Chromeovim proširenjima, pročitajte dalje kako biste napravili vrlo jednostavnu nadzornu ploču za čestitke.

Stvaranje izbornika postavki

Što se tiče mojeg proširenja, prvo što želim učiniti je stvoriti unos gdje moj korisnik može dodati svoje ime. Budući da ne želim da ovaj ulaz bude vidljiv cijelo vrijeme, stavit ću ga u div pod nazivom postavke, koji ću učiniti vidljivim samo kad se klikne gumb Postavke.

   
      
      
   

Trenutno naše postavke izgledaju ovako:

Tako lijepo!

… Pa ću im dati neke osnovne stilove u CSS-u. Dat ću tipku i unijeti i obloge i obris, a zatim staviti malo prostora između postavki i obrasca.

.settings {
   prikaz: fleksibilnost;
   fleks-smjer: red;
   poravnati-sadržaj: središte;
}
ulaz {
   obloga: 5px;
   veličina fonta: 12px;
   širina: 150px;
   visina: 20px;
}
dugme {
   visina: 30px;
   širina: 70px;
   pozadina: nijedna; / * Ovim se uklanja zadana pozadina * /
   boja: # 313131;
   obrub: 1px krutina # 313131;
   obrub granice: 50px; / * Ovo daje našem gumbu zaobljene rubove * /
   veličina fonta: 12px;
   pokazivač: pokazivač;
}
obrazac {
   padding-top: 20px;
}

Sada naše postavke izgledaju malo bolje:

No, učinimo ih skrivenim kad korisnik nije kliknuo Postavke. To ću učiniti dodavanjem sljedećeg u .set postavke, zbog čega će unos imena nestati sa strane ekrana:

transformirati: prevestiX (-100%);
prijelaz: transformirati 1s;

Sada ćemo stvoriti klasu koja se zove postavke-otvorite da ćemo uključiti i isključiti JavaScript ako korisnik klikne gumb Postavke. Kada se otvorima dodaju postavke, neće se primijeniti nikakve transformacije; bit će vidljiv u svom normalnom položaju

.settings-open.settings {
   preobrazba: nijedna;
}

Neka započne klasa raditi u JavaScript-u. Napravit ću funkciju koja se zove openSettings () koja će preklopiti postavke klase-otvoriti ili isključiti. Da biste to učinili, prvo ću dobiti element prema njegovom ID-u "postavke", a zatim upotrijebite classList.toggle da biste dodali klasu postavki otvorenih.

funkcija openSettings () {
   document.getElementById ( "Postavke") classList.toggle ( "Postavke-open").
}

Sad ću dodati slušatelja događaja koji će pokrenuti funkciju kad god se klikne gumb Postavke.

document.getElementById ("gumb s postavkama"). addEventListener ("klik", otvaranje postavke)

Tako će se vaše postavke pojaviti ili nestati svaki put kada kliknete gumb Postavke.

Stvaranje personaliziranog pozdrava

Zatim stvorimo pozdravnu poruku. Napravit ćemo prazan h2 u HTML-u, a zatim ga ispuniti unutarHTML u JavaScript-u. Dat ću h2 ID-u kako bih mu kasnije mogao pristupiti i staviti ga u div pod nazivom Pozdravi-spremnik da ga centriram.

   

U JavaScript-u ću stvoriti osnovni pozdrav koristeći korisničko ime. Prvo ću napraviti varijablu da bih zadržao ime koje ću zasad zadržati prazno i ​​dodati kasnije.

var userName;

Čak i ako korisnikName nije bio prazan, ako sam korisniku dao samo pozdrav u HTML-u, Chrome ne bi koristio isto ime ako ga otvorim u drugoj sesiji. Da bi Chrome upamtio tko sam, morat ću raditi s lokalnom pohranom. Napravit ću funkciju koja se zove saveName ().

funkcija saveName () {
    localStorage.setItem ('imeName', korisničko ime);
}

Funkcija localStorage.setItem () uzima dva argumenta: prvi je ključna riječ koju ću koristiti za pristup informacijama kasnije, a drugi su podaci koje je potrebno upamtiti; u ovom slučaju userName. Nabavit ću ove spremljene podatke putem localStorage.getItem, koji ću koristiti za ažuriranje varijable userName.

var userName = localStorage.getItem ('primljenoName');

Prije nego što u obrascu povežemo slušatelja događaja, želim reći Chromeu kako da me nazove ako mu još nisam rekao svoje ime. Učinit ću to koristeći izvod if.

ako je (userName == null) {
   userName = "prijatelj";
}

A sada, priključimo našu varijablu userName u naš obrazac. Želim to učiniti unutar funkcije, tako da mogu pozvati tu funkciju kad god se naziv ažurira. Nazovimo funkciju changeName ().

promjena funkcijeName () {
   userName = document.getElementById ("ime-ulaz"). vrijednost;
   saveName ();
}

Želim nazvati ovu funkciju svaki put kada netko pošalje ime pomoću obrasca. Učinit ću to sa slušateljem događaja, u kojem ću nazvati funkciju changeName () i spriječiti da se zadana stranica osvježi prilikom slanja obrasca.

document.getElementById ("oblik obrasca"). addEventListener ("predaj", funkcija (e) {
   e.preventDefault ()
   changeName ();
});

Na kraju, stvorimo naš pozdrav. To ću staviti i u funkciju tako da je mogu nazvati i kada se stranica osvježi, i kad god se dogodi changeName (). Evo funkcije:

funkcija getGreeting () {
   document.getElementById ("pozdrav"). innerHTML = `Pozdrav, $ {userName}. Uživajte u svom danu! `;
}
getGreeting ()

Sad ću nazvati getGreeting () u svojoj funkciji changeName () i nazvati je na dan!

Napokon, oblikujte svoju stranicu

Sada je vrijeme za dodavanje završnih detalja. Usmjerit ću zaglavlje pomoću flexbox-a, povećati ga i dodati CSS pozadini gradijenta tijelu. A da bi se gumb i h2 poprskao prema nagibu, učinit ću ih bijelim.

.greeting-kontejner {
   prikaz: fleksibilnost;
   opravdati-sadržaj: centar;
   poravnati-sadržaj: središte;
}
. pozdrav {
   obitelj fontova: sans-serif;
   veličina fonta: 60px;
   boja: #fff;
}
tijelo {
   boja pozadine: # c670ca;
   pozadinska slika: linearni gradijent (45deg, # c670ca 0%, # 25a5c8 52%, # 20e275 90%);
}
html {
   visina: 100%;
}

I to je to! Vaša će stranica izgledati ovako:

Vaš vlastiti Chrome nastavak!

Možda nije puno, ali odličan vam je temelj za stvaranje i oblikovanje vlastitih Chrome nadzornih ploča. Javite nam ako imate bilo kakvih pitanja i slobodno mi se obratite na Twitteru na @saralaughed.