Ako vytvoriť rozšírenia prehliadača Chrome od nuly

Ak chcete pridať alebo zmeniť niektoré funkcie v prehliadači Google Chrome musíte použiť rozšírenie. Aj keď si môžete stiahnuť internetový obchod Chrome, ale niekedy potrebujete špecifické funkcie, ktoré nenájdete v žiadnej existujúcej rozšíreniu.

Dobrou správou je, že môžete vytvoriť vlastné rozšírenie, ktoré pridáte alebo upravíte požadované funkcie alebo vytvoríte nový doplnok alebo aplikáciu pre prehliadač Google Chrome, ktorú môžete neskôr distribuovať ostatným používateľom pomocou Internetového obchodu Chrome.

V nasledujúcom texte vám ukážem najjednoduchší spôsob vytvorenia rozšírenia. Ak máte nejaké znalosti vývoja webu (HTML, CSS a JS), budete cítiť ako doma. Ak nie, najprv si prehliadnite tieto kanály naučiť sa základy vývoja webu, potom pokračujte ďalej.

predpoklady

Pred začatím tohto tutoriálu musíte splniť nasledujúce požiadavky.

1. Musíte byť oboznámení HTML, CSS a JavaScript. [Skontrolujte zdroje]
2. Musíte mať editor kódu napísať rozšírenie. [Porovnať redakcie]
3. (Voliteľné) Ak chcete rozšírenie distribuovať ostatným používateľom, musíte mať účet vývojára v Internetovom obchode Chrome. [Vytvoriť účet]

Poznámka: Spoločnosť Google vás vyzýva, aby ste zaplatili malý poplatok za vytvorenie účtu vývojára v Internetovom obchode Chrome.

Vytvorte rozšírenie

V tomto výučbe budem zdieľať proces vytvárania rozšírenie úloh pre Google Chrome. Bude to nástroj (ako je znázornený nižšie) na demonštráciu základných komponentov a schopností poskytovaných rozšíreniam.

1. Získajte šablónu

Google Chrome, rovnako ako každá iná platforma, si vyžaduje jeho rozšírenia s nastavenou štruktúrou, čo sa môže zdať zložité pre začiatočníkov. To je dôvod, prečo je dobré získať šablónu kotúčovej dosky pre rozšírenie, ktoré poskytne všetky potrebné potreby.

Extensionizr je najlepší generátor boilerplate pre rozšírenia Chrome. Umožňuje vybrať si jeden z uvedených typov rozšírení - akciu prehliadača (akcia pre všetky stránky alebo prehliadač), Akcia stránky (akcia pre aktuálnu stránku), alebo skryté rozšírenie (akcia na pozadí, ktorá je zvyčajne skrytá v prednom rozhraní).

Okrem toho ponúka rôzne možnosti dolaďovania zahrnúť / vylúčiť potrebné doplnky, povolenia, atď. Musíte vybrať “Akcia prehliadača” ako typ rozšírenia a “Žiadne pozadie” ako pozadie pre tento tutoriál.

Po dokončení výberu možností pre vytvorenie rozšírenia vzorky stlačte kláves “Stiahnuť to!” v rozšírení. konečne, extrahujte archív (.zip) do adresára a otvorte editor kódu, aby ste začali písať príponu.

2. Kód rozšírenia

Po stiahnutí a extrahovaní šablóny sa zobrazí štruktúra adresárov, ako je uvedené na nasledujúcej snímke obrazovky. Šablóna je prehľadne usporiadaná a musíte vedieť, že najdôležitejší súbor je “manifest.json“.

Pozrime sa aj na ďalšie súbory a priečinky v tomto adresári:

1. _locales: Používa sa na ukladajte informácie o jazyku pre viacjazyčnú aplikáciu.
2. css: Funguje na ukladanie front-end tretích knižníc ako Bootstrap 4.
3. ikony: Je navrhnutý tak, aby mal ikony pre vaše rozšírenie v rôznych veľkostiach.
4. JS: Je užitočné zachrániť tretie strany back-end knižnice ako jQuery 3.
5. src: Ukladá skutočný kód, ktorý si napíšete pre svoje rozšírenie.

manifest.json

Obsahuje základné metadáta o vašej aplikácii, ktorý definuje podrobnosti aplikácie prehliadaču. Môžete upraviť nastavenie názvu, popisu, webovej stránky, ikony atď. Spolu s konkrétnymi údajmi akcie a povolenia prehliadača.

Napríklad v nižšie uvedenom kóde si všimnete, že som zmenil meno, popis a homepage_url spolu s predvoleným_titlom pod aktivitou browser_action. Okrem toho som pridaný “skladovanie” pod povolením pretože potrebujeme uchovávať údaje v našom rozšírení.

 "name": "Todoizr - zjednodušená úloha", "verzia": "0.0.1", "manifest_version": 2, "description" https://go.aksingh.net/todoizr "," ikony ": " 16 ":" ikony / icon16.png "," 48 ":" ikony / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title " browser_action / browser_action.html "," oprávnenia ": [" úložisko "] 

src \ browser_action

Tento adresár bude obsahovať kód pre akciu prehliadača. V našom prípade budeme kód popup window zobrazené na kliknutí na ikonu rozšírenia v prehliadači. Naše rozšírenie umožní používateľom pridávať a zobrazovať položky v rozbaľovacej ponuke.

Poznámka: Vždy môžete skopírovať kód pomocou klonovania tohto úložiska.

Počiatočný kód zo šablóny

Hoci tento adresár mal iba súbor HTML, ktorý má celý kód, rozhodol som sa ho rozdeliť na tri samostatné súbory pre lepšiu prehľadnosť. To znamená, že HTML súbor s názvom “browser_action.html” teraz má nasledujúci kód:

Navyše, štýl súbor s názvom “browser_action.css” má nižšie uvedený obsah pri názve súboru JavaScript “browser_action.js” je teraz prázdne.

 #mainPopup padding: 10px; výška: 200px; šírka: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 veľkosť písma: 2m;  

Navrhnite rozhranie popupu

Po naštartovaní pôvodného projektu najprv navrhnite rozhranie popup. mám nastavte rozhranie s minimalistickým prístupom, zobrazenie názvu na vrchu, za ktorým nasleduje formulár na pridávanie položiek a nižšie uvedená oblasť na zobrazenie pridanej položky. Je inšpirovaná zjednodušeným dizajnom “Štýl formulára 5“.

V nižšie uvedenom kóde som pridal dve divízie - jedno pre zobrazenie formulára na pridanie položky úlohy a druhé pre zobrazenie zoznamu už pridaných položiek. To znamená, že nový kód pre “browser_action.html” je nasledujúci:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

A súbor štýlov “browser_action.css” teraz má nasledujúci kód:

 @import url ("./form_style_5.css"); #mainPopup výška: 200px; šírka: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Úloha položky formulára * / .form-style-5 margin: auto; polstrovanie: 0px 20px;  .form-style-5: first-child na pozadí: žiadne;  .form-style-5 h1 farba: # 308ce3; veľkosť písma: 20px; text-align: center;  .form-style-5 vstup [typ = "text"] šírka: auto; plavák: vľavo; spodný okraj: nenastavený;  .form-style-5 vstup [typ = "tlačidlo"] background: # 308ce3; šírka: auto; float: vpravo; polstrovanie: 7px; hranica: žiadna; polomer okrajov: 4px; veľkosť písma: 14px; . form-style-5 vstup [typ = "tlačidlo"]: vznášať background: # 3868d5;  / * Úplný zoznam položiek * / .form-style-5: last-child height: inherit; margin-bottom: 5px; . form-style-5 ul padding: 20px;  .forma-štýl-5 ul li font-size: 14px;  

Nakoniec súbor štýlov tretej strany “form_style_5.css” má nižšie uvedený obsah. Je to jednoducho prevzaté z webových stránok, ktoré inšpirovali dizajn nášho rozšírenia.

 / * Forma štýlu 5 od Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; polstrovanie: 10px 20px; pozadie: # f4f7f8; margin: 10px auto; polstrovanie: 20px; pozadie: # f4f7f8; polomer okrajov: 8 pixlov; font-family: Gruzínsko, "Times New Roman", Times, serif; . form-style-5 polia border: none;  .form-style-5 legenda font-size: 1.4; margin-bottom: 10px;  .form-style-5 štítok display: block; margin-bottom: 8px; .form-štýl-5 vstup [typ = "text"], .form-štýl-5 vstup [typ = "dátum"], -5 vstup [typ = "e-mail"], .form-style-5 vstup [typ = "číslo"], = "čas"], .form-style-5-input [type = "url"], .form-style-5 textarea, , serif; pozadie: rgba (255,255,255, .1); hranica: žiadna; polomer okrajov: 4px; veľkosť písma: 16px; rozpätie: 0; obrys: 0; polstrovanie: 7px; šírka: 100%; rozmery v políčku: okrajové pole; -webkit-box-size: box-border; -moz-box-veľkosť: okraj-box; farba pozadia: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0,03) vložka; box-tieň: 0 1px 0 rgba (0,0,0,0.03) vložka; margin-bottom: 30px; .form-style-5-vstup [typ = "text"]: zaostrenie, .form-style-5 vstup [typ = "dátum"]: zaostrenie, .form-style-5 vstup [type = "email"]: zaostrenie, .form-style-5 vstup [type = "number"]: : tvar, formát 5, textura: focus, .form-style-5, [form = "čas"]: style-5 vyberte: focus background: # d2d9dd;  .form-style-5 zvoľte -webkit-appearance: menulist-button; výška: 35px;  .form-style-5. číslo background: # 1abc9c; farba: #fff; výška: 30px; šírka: 30px; zobrazenie: inline-block; veľkosť písma: 0,8m; margin-right: 4px; line-height: 30px; text-align: center; textový tieň: 0 1px 0 rgba (255,255,255,0,2); okraj: 15px 15px 15px 0px; . form-style-5 vstup [typ = "odoslať"], .form-style-5 vstup [typ = "tlačidlo"]; zobrazenie: blok; polstrovanie: 19px 39px 18px 39px; farba: #FFF; marža: 0 auto; pozadie: # 1abc9c; veľkosť písma: 18px; text-align: center; štýl písma: normálny; šírka: 100%; hranica: 1px pevná # 16a085; šírka hranice: 1px 1px 3px; margin-bottom: 10px;  .form-style-5-vstup [typ = "odoslať"]: vznášať, .form-style-5 vstup [typ = "button"]: hover background: # 109177;  

Napíšte logiku popupu

Akonáhle skončíme s front-endom rozšírenia, napíšeme logiku pre jej prácu. Potrebujeme naše rozšírenie, aby sme mohli pridať položky a zobraziť ich v popup window. Takže pridáme tlačidlo pre poslucháč na tlačidlo, aby sa pridal vstupný text ako úloha a poslucháč na načítanie stránky, aby sa tieto položky zobrazili.

V nižšie uvedenom kóde použijeme dve funkcie - sync.get () a sync.set (), ktoré sú súčasťou “chrome.storage“. Potrebujeme druhú, aby sme ukladali položky úloh v úložisku a prvý na ich načítanie a zobrazenie.

To znamená, že nižšie je konečný kód “browser_action.js” súboru. Ako môžete vidieť nižšie, kód je veľmi komentovaný, aby ste pochopili jeho účel.

 funkcia (výsledok) var todo = [] if (výsledok && výsledok.todo && výsledok.todo.trim ()! == ") / * Analyzovať a získať pole ako uložené ako reťazec * / todo = JSON.parse (výsledok.todo) console.log ('todo.length = + todo.length) pre (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Vložte príponu

Po dokončení napísania rozšírenia je čas na otestovanie pomocou funkcie prehliadača Google Chrome, ktorá ponúka načítanie rozbaliteľných rozšírení, ktoré nie sú v obchode. Ale najprv musíte povoliť režim vývojára vo vašom prehliadači: kliknite na možnosti gombík > zvoliť “Ďalšie nástroje” > rozšírenie, a potom prepnite “Režim vývojára“.

Teraz uvidíte viac tlačidiel pod vyhľadávacím pruhom. Tu kliknite na “Vložte rozbalené” Tlačidlo. Bude požiadať o adresár - prehliadnuť a vybrať adresár vášho rozšírenia a načíta rozšírenie. Ak upravujete alebo aktualizujete kód svojej pobočky, môžete kliknúť na položku načítať najnovšie zmeny.

V našom príklade, uvidíte ikonu rozšírenia vedľa ikony profilu, pretože sme pridali akciu prehliadača do našej prípony. Môžete kliknúť na túto ikonu na pridávať a zobrazovať položky úloh v našom rozšírení, pretože to je špecifikovaná akcia.

Distribúcia rozšírenia

Hoci to je jednoduché nahrávanie rozšírenia do Internetového obchodu Chrome je proces príliš dlhý, aby pokryl všetky podrobnosti. Stručne povedané, vytvoríte si účet vývojára, balíte svoje rozšírenie a potom ho odošlete spolu s podrobnosťami o jeho obsahu (ako je meno, ikona, screenshoty atď.); ako je uvedené v jeho postupnom sprievodcovi.

Čo ďalej? Čítanie a kódovanie

Ako ste očakávali, cieľom tejto príručky je začať s vývojom rozšírení pre prehliadač Google Chrome. Snažil som sa pokryť základné pojmy; však, potrebujete vedieť oveľa viac pre seriózny rozvoj rozšírenia.

To znamená, že nižšie sú niektoré z mojich obľúbené zdroje go-to naučiť sa rozvíjať rozšírenia prehliadača Google Chrome a iných prehliadačov založených na Chromi:

1. Všetky schopnosti, komponenty a funkcie rozšírenia.
2. Vzorové rozšírenia tímom za prehliadačom Google Chrome.

Ak ste prešli týmito prostriedkami a ste pripravení na nejakú výzvu, skúste pridať nižšie uvedené funkcie do rozšírenia, ktoré ste práve dokončili:

1. Možnosť vymazať uložené položky úloh.
2. Funkcia na zobrazovanie upozornení po dokončení pridávania položky.

To je všetko o vývoji svojho prvého rozšírenia pre najobľúbenejší prehliadač. Aké rozšírenie ste vytvorili? Nastúpili ste do problému? Dajte nám vedieť svoj príbeh napísaním komentára nižšie alebo posielaním správ na stránkach @aksinghnet.

V neposlednom rade si všimnite, že môžete vyskúšať Todoizr (rozšírenie, ktoré sme vytvorili) v Internetovom obchode Chrome a skontrolovať jeho kompletný kód v tomto úložisku.