Jak vytvořit rozšíření Chrome od nuly

Pokud chcete přidávat nebo upravovat některé funkce v prohlížeči Google Chrome musíte použít příponu. I když si můžete stáhnout rozšíření z Internetového obchodu Chrome, ale někdy potřebujete určitou funkci, kterou nelze najít v existujícím rozšíření.

Dobrou zprávou je, že si můžete vytvořit vlastní rozšíření pro přidání nebo změnu požadované funkce nebo vytvoření nového doplňku nebo aplikace pro Google Chrome, kterou můžete později distribuovat ostatním uživatelům pomocí Internetového obchodu Chrome.

V následujícím textu vám ukážu nejjednodušší způsob vytvoření rozšíření. Pokud máte nějaké znalosti o vývoji webu (HTML, CSS a JS), budete se cítit jako doma. Pokud ne, nejprve sledujte tyto kanály naučit se základy vývoje webu, pak pokračujte dále.

Předpoklady

Před zahájením tohoto kurzu musíte mít následující požadavky.

1. Musíte být obeznámeni HTML, CSS a JavaScript. [Zkontrolujte zdroje]
2. Musíte mít editoru kódů napsat rozšíření. [Porovnat editory]
3. (Volitelné) Pokud si přejete distribuovat své rozšíření ostatním uživatelům, musíte mít účet vývojáře v Internetovém obchodě Chrome. [Vytvořit účet]

Poznámka: Google vás žádá, abyste zaplatili malý poplatek za vytvoření účtu vývojáře v Internetovém obchodě Chrome.

Vytvořit rozšíření

V tomto tutoriálu budu sdílet proces vytváření rozšíření úkolu pro Google Chrome. Bude to utilita (jak je ukázáno níže), která demonstruje základní komponenty a schopnosti poskytované rozšířením.

1. Získejte šablonu

Prohlížeč Google Chrome, stejně jako každá jiná platforma, to vyžaduje rozšíření mají nastavenou strukturu, pro začátečníky. To je důvod, proč je dobré získat šablonu kotle pro rozšíření, které bude poskytovat všechny potřeby.

Extensionizr je nejlepší generátor kotlových desek pro rozšíření chromu. To vám umožní vybrat jeden z daných typů rozšíření - akce prohlížeče (akce pro všechny stránky nebo prohlížeč), akce stránky (akce pro aktuální stránku), nebo skryté rozšíření (akce na pozadí, která je obvykle skryta na předním rozhraní).

Navíc poskytuje různé možnosti jemného doladění zahrnout / vyloučit nezbytné doplňky, oprávnění, atd. Musíte vybrat “Akce prohlížeče” jako typ rozšíření a. \ t “Žádné pozadí” jako pozadí stránky tohoto tutoriálu.

Po dokončení výběru možností pro vytvoření ukázkové přípony stiskněte klávesu “Stáhnout to!” tlačítko v Extensionizr. Konečně, rozbalte archiv (.zip) do adresáře a otevřete editor kódu a začněte psát rozšíření.

2. Zadejte příponu

Po stažení a extrahování šablony se zobrazí struktura adresářů uvedená na následujícím obrázku. Šablona je přehledně uspořádána a musíte vědět, že nejdůležitější soubor je “manifest.json“.

Seznamte se také s dalšími soubory a složkami v tomto adresáři:

1. _locales: Je zvyklý ukládat informace o jazyce pro vícejazyčnou aplikaci.
2. css: Funguje pro ukládání front-end knihoven třetích stran, jako je Bootstrap 4.
3. ikony: Je navržen tak, aby ikony pro vaše rozšíření v různých velikostech.
4. js: Je to užitečné uložit knihoven třetích stran jako jQuery 3.
5. src: Ukládá aktuální kód, který budete psát pro rozšíření.

manifest.json

Obsahuje základní metadata o vaší aplikaci, který definuje podrobnosti vaší aplikace do prohlížeče. Můžete jej upravit tak, aby nastavoval jméno, popis, webovou stránku, ikonu atd. Spolu se specifikami akce a oprávnění prohlížeče.

Například v níže uvedeném kódu si všimnete, že jsem změnil název, popis a homepage_url spolu s default_title pod prohlížečem. Navíc, já přidán “úložný prostor” pod oprávněními potřebujeme ukládat data do našeho rozšíření.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Jednoduchá aplikace pro všechny.", "homepage_url": " https://go.aksingh.net/todoizr "," ikony ": " 16 ":" ikony / icon16.png "," 48 ":" ikony / icon48.png "," 128 ":" ikony / icon128 .png "," default_locale ":" en "," browslé ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - Zjednodušený úkol "," default_popup ":" src / browslé / browslé.html "," oprávnění ": [" storage "] 

src prohlížeče

Tento adresář bude obsahovat kód pro akci prohlížeče. V našem případě to uděláme kód vyskakovacího okna zobrazí se po kliknutí na ikonu rozšíření v prohlížeči. Naše rozšíření umožní uživatelům přidávat a zobrazovat položky úkolů ve vyskakovacím okně.

Poznámka: Klonováním tohoto repozitáře můžete vždy začít s kódem.

Počáteční kód ze šablony

Ačkoli tento adresář měl jen HTML soubor s celým kódem, rozhodl jsem se jej rozdělit do tří samostatných souborů pro lepší přehlednost. To znamená, že soubor HTML pojmenovaný “browslé.html” nyní má následující kód:

Kromě toho, styl soubor pojmenovaný “browslé.css” má níže uvedený obsah při pojmenovaném souboru JavaScript “browslé.js” je prozatím prázdný.

 #mainPopup padding: 10px; výška: 200px; šířka: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Navrhněte vyskakovací rozhraní

Po nastavení počátečního projektu nejprve navrhneme rozhraní vyskakovacího okna. mám nastavit rozhraní s minimalistickým přístupem, zobrazování názvu nahoře následovaného formulářem pro přidávání položek úkolů a oblasti níže pro prohlížení přidaných položek. Je inspirován zjednodušeným designem “Styl formuláře 5“.

V níže uvedeném kódu jsem přidal dva divs - jeden pro zobrazení formuláře pro přidání úkolu a druhý pro zobrazení seznamu již přidaných úkolů. To znamená, že nový kód “browslé.html” je následující:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

A soubor stylu “browslé.css” nyní má následující kód:

 @import url ("./ form_style_5.css"); #mainPopup výška: 200px; šířka: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Formulář položky úkolu * / .form-style-5 margin: auto; polstrování: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 barva: # 308ce3; velikost písma: 20px; zarovnání textu: střed;  .form-style-5 input [type = "text"] width: auto; plavat vlevo; margin-bottom: unset;  .form-style-5 input [type = "button"] background: # 308ce3; width: auto; float: right; polstrování: 7px; hranice: žádné; hraniční rádius: 4px; velikost písma: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Seznam položek úkolů * / .form-style-5: last-child height: inherit; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li velikost písma: 14px;  

Nakonec, soubor stylu třetí strany “form_style_5.css” má níže uvedený obsah. Je to jednoduše převzato z jeho webové stránky inspirovat design našeho rozšíření.

 / * Styl formuláře 5 od Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; polstrování: 10px 20px; pozadí: # f4f7f8; okraj: 10px auto; polstrování: 20px; pozadí: # f4f7f8; hraniční rádius: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], input-form-5 input [type = "date"], vstup ve formátu .form-5 [type = "datetime"], styl .form -5 input [type = "email"], .form-style-5 input [typ = "číslo"], .form-style-5 input [type = "search"], vstup .form-style-5 [typ = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , serif; pozadí: rgba (255,255,255, .1); hranice: žádné; hraniční rádius: 4px; velikost písma: 16px; marže: 0; obrys: 0; polstrování: 7px; šířka: 100%; velikost krabice: rámeček; -webkit-box-sizing: border-box; -moz-box-velikosti: hraniční box; barva pozadí: # e8eeef; barva: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) vložený; box-shadow: 0 1px 0 rgba (0,0,0,0.03) vložka; spodní okraj: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, form-5-input [typ = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [typ = "číslo"]: focus, form-style-5 input [type = "search"] : focus, .form-style-5 input [typ = "time"]: focus, .form-style-5 input [type = "url"]: focus, form-style-5 textarea: focus, form- style-5 select: focus background: # d2d9dd;  .form-style-5 vyberte -webkit-vzhled: tlačítko menulist; výška: 35px;  .form-style-5 .number background: # 1abc9c; barva: #ff; výška: 30px; šířka: 30px; displej: inline-block; velikost písma: 0.8em; pravý okraj: 4px; výška řádku: 30px; zarovnání textu: střed; text-shadow: 0 1px 0 rgba (255,255,255,0,2); hraniční rádius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], input .form-style-5 [type = "button"] pozice: relativní; zobrazení: blok; polstrování: 19px 39px 18px 39px; barva: #FFF; okraj: 0 auto; pozadí: # 1abc9c; velikost písma: 18px; zarovnání textu: střed; styl písma: normální; šířka: 100%; ohraničení: 1px pevné # 16a085; border-width: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: vznášet se background: # 109177;  

Napište logiku vyskakovacího okna

Až budeme hotovi s front-endem rozšíření, pojďme nyní napsat logiku pro jeho práci. Potřebujeme naše rozšíření, abychom byli schopni přidávat položky úkolů a zobrazovat je ve vyskakovacím okně. Přidáme tedy tlačítko pro posluchače k ​​kliknutí a přidáme vstupní text jako položku úkolu a posluchač načtení stránky pro zobrazení těchto položek.

V níže uvedeném kódu budeme používat dvě funkce - sync.get () a sync.set (), které jsou součástí “chrome.storage“. Potřebujeme druhou k uložení úkolů v úložišti a první k jejich načtení a zobrazení.

To znamená, že níže je konečný kód “browslé.js” soubor. Jak vidíte níže, kód je velmi komentován, aby vám pomohl pochopit jeho účel.

 function loadItems () / * Nejprve získáte () data z úložiště * / chrome.storage.sync.get (['todo'], funkce (výsledek) var todo = [] if (výsledek && result.todo && result.todo.trim ()! == ") / * Analyzovat a získat pole tak, jak je uloženo jako řetězec * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) pro (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 rozšíření

Poté, co jste dokončili psaní rozšíření, je načase jej otestovat pomocí funkce Google Chrome, která nabízí načtení nerozbalených rozšíření. Ale nejdřív musíte povolit režim vývojáře ve vašem prohlížeči: klikněte na tlačítko možností tlačítko > Vybrat “Více nástrojů” > Rozšíření, a pak zapnout “Vývojářský režim“.

Nyní se pod vyhledávacím panelem zobrazí více tlačítek. Zde klikněte “Načíst rozbalené” tlačítko. Požádá o adresář - vyhledejte a vyberte adresář rozšíření a načte rozšíření. Pokud upravíte nebo aktualizujete kód své pobočky, můžete klepnout na tlačítko tlačítko znovu načíst nejnovější změny.

V našem příkladu, uvidíte ikonu rozšíření vedle ikony profilu, protože jsme přidali akci prohlížeče do našeho rozšíření vzorku. Na tuto ikonu můžete kliknout přidávat a zobrazovat položky úkolů v našem rozšíření, to je specifikovaná akce.

Distribuce rozšíření

Ačkoli to je snadno nahrát rozšíření do Internetového obchodu Chrome je proces příliš dlouhý na to, aby pokryl všechny podrobnosti. Stručně řečeno, vytvořte si účet pro vývojáře, zabalte rozšíření a poté jej odešlete spolu s podrobnostmi o obsahu (jako je jméno, ikona, snímky obrazovky atd.); jak je uvedeno v jeho průvodci krok za krokem.

Co dále? Číst a kódovat

Jak jste možná očekávali, účelem tohoto tutoriálu je začít s vývojem rozšíření pro Google Chrome. Snažil jsem se pokrýt základní pojmy; nicméně, musíte vědět mnohem více pro rozvoj závažných rozšíření.

To znamená, že níže jsou některé z mých oblíbené zdroje naučit se vyvíjet rozšíření pro prohlížeče Google Chrome a další prohlížeče založené na prohlížeči Chromium:

1. Všechny schopnosti, komponenty a rysy rozšíření.
2. Ukázky rozšíření týmu za Google Chrome.

Pokud jste prošli těmito prostředky a jste připraveni na nějakou výzvu, zkuste přidat níže uvedené funkce do rozšíření, které jste právě dokončili:

1. Možnost odstranění uložených úkolů.
2. Funkce pro zobrazení oznámení po dokončení přidávání položky.

To je vše o vývoji vašeho prvního rozšíření pro nejoblíbenější prohlížeč. Jaké rozšíření jste vytvořili? Dostali jste se do problému? Prosím, dejte mi vědět váš příběh napsáním komentáře níže nebo zasláním mě na @aksinghnet.

V neposlední řadě si všimněte, že si můžete vyzkoušet Todoizr (rozšíření, které jsme vytvořili) v Internetovém obchodu Chrome a zkontrolovat jeho úplný kód v tomto úložišti.