✅ Programujte a vytvářejte rozšíření pro Chrome

Obsah

1. Jak vytvořit a naprogramovat rozšíření pro Chrome
2. Příklad rozšíření pro Chrome

Tento tutoriál bude rozdělen do 3 částí: První část, kde vysvětlíme různé koncepty týkající se rozšíření v prohlížeči Chrome, jejich struktury a základního vytvoření rozšíření. Ve druhé části se zaměříme na vytváření rozšíření pro tento skvělý prohlížeč, jako je Google Chrome, a provedeme několik praktických příkladů. Nakonec ve třetí části vysvětlíme pokročilé možnosti při vytváření rozšíření a jak je publikovat ve webovém obchodě Google Chrome, aby byl dostupný široké veřejnosti.

Co jsou rozšíření v prohlížeči Google Chrome?Rozšíření jsou malé programy, které mohou upravovat a zlepšovat funkce prohlížeče, v tomto případě Chrome. Ty jsou vyvíjeny pomocí webových technologií, jako je HTML, Javascript a CSS.

Rozšíření mají malé až žádné uživatelské rozhraní. Na následujícím obrázku je například ikona visacího zámku, který po kliknutí na něj otevře malé rozhraní.

Toto konkrétní rozšíření se používá k šifrování a dešifrování vašich e -mailů pomocí klíče PGP. Rozšíření jsou soubory zabalené v jednom, které si uživatel stáhne a nainstaluje. Toto balení, na rozdíl od běžných webových aplikací, nemusí záviset na webovém obsahu.

Jak bylo uvedeno výše, rozšíření vám umožňují přidat funkce do Chromu, aniž byste se museli ponořit hluboko do nativního kódu. Nová rozšíření lze vytvářet pomocí základních technologií, se kterými pracuje většina programátorů webového vývoje: HTML, CSS a Javascript.

1. Jak vytvořit a naprogramovat rozšíření pro Chrome

Pro začátek uděláme jednoduché rozšíření, které načte obrázek z Google pomocí adresy URL aktuální stránky jako hledaného výrazu. To provedeme implementací prvku uživatelského rozhraní, který nazýváme chrome.browserAction, což nám umožňuje umístit ikonu hned vedle chromové nabídky, na kterou můžete kliknout pro rychlý přístup. Kliknutím na tuto ikonu se otevře vyskakovací okno obsahující obrázek získaný z aktuální stránky, který bude vypadat takto:

Pro zahájení naší praxe vytvoříme adresář s názvem Image_Viewer, v rámci toho zahrneme všechny soubory, se kterými budeme pracovat. Jako vývojový editor můžete použít jeden z vašich preferencí, v mém případě použiji Chrome Dev Editor, který si můžete stáhnout na následující adrese:

Chrome Dev Editor

První věc, kterou budeme potřebovat, je vytvořit soubor manifestu s názvem manifest.json. Tento manifest není nic jiného než soubor metadat ve formátu JSON, který obsahuje vlastnosti, jako je název, popis, číslo verze jeho rozšíření atd. Na pokročilé úrovni to použijeme k tomu, abychom v prohlížeči Chrome prohlásili, co rozšíření bude dělat a oprávnění, která jsou nutná k provádění určitých věcí.

Formát souboru manifestu je následující:

 {// Povinné "manifest_version": 2, "name": "Moje rozšíření", "verze": "versionString", // Doporučeno "default_locale": "es", "description": "Popis prostého textu", " ikony ": {…}, // Vyberte jednu (nebo žádnou)" akci prohlížeče ": {…}," stránku_akce ": {…}, // Volitelně" autor ": …," automatizace ": …," pozadí ": {// Doporučené "trvalé": false}, "pozadí_page": …, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," commands ": {…}," content_capabilities ": …," content_scripts ": [{…}]," content_security_policy ":" policyString "," převedená_z_uživatelského_scriptu ": …," spoluúčast ": … , "current_locale": …, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"odpovídá": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // cesta / na / domovskou stránku "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa}}], "inkognito": "překlenutí nebo rozdělení", "input_components": …, "klíč" : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2": …, "offline_enabled": true, "omnibox": {"klíčové slovo": "aString"}, "nepovinné_ oprávnění" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " platformy ": …," pluginy ": […]," požadavky ": {…}," sandbox ": […]," short_name ":" Krátký název "," podpis ": …," kontrola pravopisu ": …, "storage": {"managed_schema": "schema.json"}, "system_indicator": …, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "název_ verze ":" aString "," web_accessible_resources ": […]}

Dále popíši funkci, která plní nejdůležitější štítky:

V požadovaném:

manifest_verze: Je to manifestní verze, která je reprezentována celým číslem, které určuje verzi formátu souboru. Počínaje Chrome 18 musí vývojáři zadat číslo 2.

jam: Je to název, který bude mít vaše rozšíření. Toto musí mít maximálně 45 znaků, jméno je hlavním definičním prvkem rozšíření a je to povinné pole. Zobrazí se na následujících místech:

a) V instalačním boxu.
b) V uživatelském rozhraní, kde je rozšíření spravováno.
c) Ve virtuálním obchodě Chrome.

verze: Musí se skládat z jednoho až čtyř celých čísel oddělených tečkami, které identifikují verzi rozšíření. Zde je několik příkladů platných verzí:

"Verze 1"
"Verze": "1.0"
"Verze": "2.10.2"
"Verze": "3.1.2.4567"

Doporučeno:

default_locale: Určuje podadresář _locales (jazyky), který obsahuje výchozí řetězce pro toto rozšíření. Musíte vložit všechny řetězce viditelné pro uživatele do souboru s názvem messages.json. Pokaždé, když přidáte nový jazyk, musíte přidat nový soubor messages.json v adresáři _locales / localecode, kde localecode je kód jazyka, stejně jako en je angličtina a je pro španělštinu.

Příklad internacionalizovaného rozšíření s podporou angličtiny (en), španělštiny (es) a korejštiny (ko) by byl následující:

popis: Obsahuje řetězec v prostém textu (bez HTML nebo jiného formátu) s maximálně 132 znaky, který popisuje funkčnost rozšíření.

Ikony: Umožňuje přidat jednu nebo více ikon, které představují rozšíření. Vždy by měla být k dispozici ikona 128x128px. Toto bude použito během instalace a v Internetovém obchodě Chrome. Rozšíření musí také poskytovat ikonu 48 x 48, která se používá na stránce správy rozšíření Chrome (chrome: // extensions). Můžete také určit ikonu 16 x 16, která bude použita jako favicon pro stránky rozšíření.

Ikony by obecně měly být ve formátu PNG, protože má nejlepší podporu transparentnosti. Mohou však být v jakémkoli formátu, který WebKit podporuje, včetně BMP.webp, GIF.webp, ICO a JPEG.webp. Zde je příklad specifikace ikon:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Příklad

Vyberte jeden (nebo žádný):

akce prohlížeče: Pomocí funkce browser_action umístěte ikony na hlavní panel nástrojů v horní části prohlížeče Google Chrome napravo od adresního řádku. Kromě toho můžete přidat popisek (plovoucí zpráva), odznak (plovoucí text na ikoně) a vyskakovací okno (plovoucí okno).

Příklad použití browser_action:

 {"name": "My extension", … "browser_action": {"default_icon": {// nepovinné "19": "images / icon19.png.webp", // nepovinné "38": "images / icon38.png.webp" // nepovinné}, "default_title": "Google Mail", // nepovinné; ukazuje popis „default_popup“: „popup.html“ // nepovinné}, …}

page_action: Pomocí tohoto rozhraní API umístěte ikonu do adresního řádku.

Příklad použití:

 {"name": "My extension", … "page_action": {"default_icon": {// nepovinné "19": "images / icon19.png.webp", // nepovinné "38": "images / icon38. png" // nepovinné}, "default_title": "Google mail", // nepovinné; zobrazit v popisu "default_popup": "popup.html" // nepovinné}, …}

Př

Volitelný:

Pozadí: Běžnou potřebou rozšíření je mít jedinou stránku pro provádění dlouhých sekvencí pro správu nějakého úkolu nebo stavu. Toto je stránka HTML, která běží ve spojení s rozšířením. Začíná, když se rozšíření spustí, a aktivuje vždy jen jednu jeho instanci. Místo použití Pozadí se doporučuje použít stránku události.

V typickém rozšíření se stránkou na pozadí se jako zobrazení rozšíření chová uživatelské rozhraní, například prohlížeč_action nebo page_action, a některé možnosti stránky. Když pohled potřebuje znát nějaký stav (zavřel okno, aktualizoval stránku …), provede požadavek na stav na stránku, která se nachází jako Pozadí. Když stránka Pozadí upozorní, že došlo ke změně stavu, informuje zobrazení, které má být aktualizováno nebo provést nějakou akci.

Jeho formát je následující:

 {"name": "My extension", … "background": {"scripts": ["background.js"]}, …}

Formát

Stránky akcí: Před definováním následujícího atributu je nutné vysvětlit, o čem stránky událostí jsou. Běžnou potřebou aplikací a rozšíření je mít jeden dlouhotrvající skript, který zvládne nějaký úkol nebo stav. To je cílem stránek událostí. Stránky událostí se načítají pouze v případě potřeby. Pokud něco aktivně nedělá, je uvolněno z mezipaměti, čímž se uvolní paměť a další systémové prostředky.

Výhody výkonu jsou značné, zejména u zařízení s nízkým výkonem. Proto se doporučuje použít více stránek událostí než pozadí.

Deklarace stránky události v souboru manifestu by byla následující:

 {"name": "My extension", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Jak vidíte, rozdíl v pozadí je trvalý atribut, který bude mít falešný stav.

chrome_settings_overrides: Slouží k přepsání některé vybrané konfigurace v prohlížeči Chrome. Toto API je k dispozici pouze pro Windows.

Některé z těchto konfigurací mohou být domovská stránka (domovská stránka prohlížeče, poskytovatel vyhledávání (poskytovatel vyhledávání) atd.

Příklad konfigurace:

 {"name": "My extension", … "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" klíčové slovo .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," indicate_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} " , "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "Navrhnout_url_post_params": "Navrhnout_lang = __ MSG_ MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__ MSs__url_domain .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_overrides: Tato vlastnost rozšíření slouží k přepsání některých nastavení v uživatelském rozhraní Chrome. Stejně jako například značky. Jeho konfigurace je následující:

 {"name": "My extension", … "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}}, …}

V tomto případě bude odstraněna hvězda, kterou má prohlížeč pro oblíbené.

chrome_url_overrides: Toto je způsob, jak nahradit soubor HTML z rozšíření stránky, kterou běžně poskytuje prohlížeč Google Chrome. Kromě toho můžete také přepsat jeho kód CSS a JavaScript.

Rozšíření s touto konfigurací může nahradit jednu z následujících stránek Chrome:

Správce záložek: Je to stránka, která se zobrazí, když si uživatel vybere možnost z nabídky správce záložek v nabídce Chrome nebo pro Mac, položka Správce záložek v nabídce Záložky.

ZVĚTŠIT

Historie (historie): Je to stránka, která se zobrazí, když si uživatel vybere historii z nabídky Chrome, nebo na Macu položka zobrazí úplnou historii z nabídky nalezené v možnosti historie.

ZVĚTŠIT

Nová karta (nová karta): Je to stránka, která se zobrazí, když uživatel vytvoří novou kartu nebo okno z prohlížeče. Na tuto stránku se můžete dostat také tak, že do adresního řádku umístíte následující adresu: chrome: // newtab

ZVĚTŠIT

PoznámkaJedno rozšíření může přepsat pouze jednu stránku. Rozšíření například nemůže přepsat záložky a naopak stránku historie.

 {"name": "My extension", … "chrome_url_overrides": {"newtab": "mypage.html" // options are newtab, history, bookmarks}, …}

příkazy: Tento příkaz API se používá k přidání klávesových zkratek, které ve vašem rozšíření spustí akci. Například akce k otevření akce prohlížeče nebo odeslání příkazu rozšíření.

 {"name": "My extension", … "commands": {"toggle-feature-foo": {"said_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Přepnout funkci foo "}," _execute_browser_action ": {" navrhnuté_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"navržené_klíče": {"výchozí": "Ctrl + Shift + E", "okna ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}}, …}

Na stránce na pozadí můžete svázat ovladač pro každý z příkazů definovaných v souboru manifest.js (kromě '_execute_browser_action'Y'_execute_page_action') přes onCommand.addListener.

Například:

 chrome.commands.onCommand.addListener (funkce (příkaz) {console.log ('CommandPress:', command);});

skripty obsahu: Jsou to soubory javascriptu, které jsou prováděny v kontextu webových stránek. Pomocí standardního modelu DOM (Document Object Model) mohou číst podrobnosti o webových stránkách návštěv prohlížeče nebo je měnit.

 {"name": "Moje přípona", … "content_scripts": [{"odpovídá": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

skripty obsahu: Aby byla naše rozšíření bezpečnější a zabránilo se potenciálním problémům se skriptováním mezi weby, začlenil systém rozšíření Chrome obecnou koncepci Zásady zabezpečení obsahu (CSP). To zavádí velmi přísné zásady, které ve výchozím nastavení učiní rozšíření bezpečnější. CSP obecně funguje jako mechanismus černé a bílé listiny pro prostředky načtené nebo spuštěné jeho rozšířeními.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'" …}

To byly některé z nejdůležitějších atributů. Pro naši počáteční praxi definujeme náš soubor manifest.json následovně:

 {"manifest_version": 2, "name": "Startup example", "description": "This extension shows an image from Google images of the current page", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," oprávnění ": [" activeTab "," https://www.googleapis.com/ "]}

Jak můžete vidět v našem ukázkovém manifestu, deklarovali jsme akci browser_action, povolení activeTab k zobrazení adresy URL aktuální karty a hostiteli bylo uděleno oprávnění. Tímto způsobem lze přistupovat k rozhraní Google API a provádět vyhledávání externích obrázků.

Při definování akce prohlížeče jsou zase nalezeny 2 soubory prostředků: icon.png.webp a popup.html. Oba prostředky musí existovat v rámci balíčku rozšíření, vytvořme je tedy nyní:

ikona.png.webp Zobrazí se vedle multifunkčního pole a čeká na interakci uživatele. Je to jen soubor PNG o velikosti 19px x 19px.

popup.html se zobrazí ve vyskakovacím okně, které je vytvořeno v reakci na kliknutí uživatele na ikonu. Jedná se o standardní soubor HTML a jeho obsah je následující:

Vyskakovací okno rozšíření Začínáme

ZVĚTŠIT

2. Ujistěte se, že je zaškrtnuto políčko režimu vývojáře v pravém horním rohu.

3. Kliknutím na možnost Odeslat rozbalené (rozbalené) vyvoláte dialogové okno pro výběr souboru.

ZVĚTŠIT

4. Přejděte do adresáře, kde jsou umístěny soubory vašich přípon, a vyberte jej.

Případně můžete přetáhnout adresář, který obsahuje váš projekt, a přetáhnout jej do okna rozšíření Chrome. Tím se rozšíření načte do vašeho prohlížeče.

Tímto způsobem vytvoříme jednoduché rozšíření pro Google Chrome. V našem dalším díle se ponoříme do konstrukce rozšíření ve spojení s vývojovými rámci, jako jsou jquery a Bootstrap, což nám umožní zefektivnit náš vývoj.

2. Příklad rozšíření pro Chrome

V této části provedeme několik příkladů, které nám umožní plně porozumět mnoha funkcím, které existují při vytváření rozšíření pro Google Chrome.

Cvičení 1 - Modré pozadí
V tomto příkladu vytvoříme jednoduché rozšíření, kde se naučíme, jak můžeme upravit obsah stránek, které načítáme do prohlížeče. V takovém případě upravíme barvu pozadí načtené stránky a změníme ji na modrou.

Jak jsem vysvětlil v první části tohoto tutoriálu, můžete použít jakékoli vývojové IDE, v mém případě použiji Chrome Dev Editor.

ZVĚTŠIT

Nejprve vytvoříme nový adresář se jménem Modré pozadí a vytvoříme projekt se stejným názvem.

ZVĚTŠIT

Uvnitř vytvoříme náš první soubor manifest.json který bude obsahovat definice našeho rozšíření.

ZVĚTŠIT

Náš archiv manifest.json musí obsahovat následující kód:

 {"manifest_version": 2, "name": "Blue Background", "description": "Toto rozšíření změnilo barvu pozadí aktuální stránky", "verze": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Make this page Blue"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Protože je naše rozšíření jednoduché, bude obsahovat pouze ikonu, která po stisknutí provede akci. Jak vidíte v souboru manifest.json definujeme jméno a jeho popis v souboru činnost prohlížeče Definujeme ikonu, která se zobrazí na liště našeho prohlížeče Google Chrome, a název, který se zobrazí, když je ukazatel myši umístěn nad uvedenou ikonou. Pokud jde o oprávnění, definujeme, že to bude provedeno pouze na aktivní kartě. Soubor, který poběží na pozadí, bude náš soubor background.js který nebude trvalý, protože bude spuštěn, pouze když klikneme na rozšíření.

Vytvoříme naši ikonu a uložíme ji do adresáře projektu, jak je definováno v manifest.json. V tomto případě v kořenovém adresáři projektu.

Poté vytvoříme soubor JavaScript s názvem pozadí.js ve stejném adresáři s následujícím kódem:

 // volání, když uživatel klikne na příponu chrome.browserAction.onClicked.addListener (funkce (karta) {console.log ('Změna' + tab.url + 'na modrou!'); chrome.tabs.executeScript ({kód: ' document.body.style.backgroundColor = "blue" '});});

Celý projekt opouštíme následovně:

ZVĚTŠIT

Chcete -li spustit naše rozšíření, stačí stisknout tlačítko přehrávání na horní liště editoru Chrome Dev.

ZVĚTŠIT

Jeho stisknutím se rozšíření automaticky načte do prohlížeče Google Chrome.

Podívejme se na naše rozšíření v akci, kliknutím na ikonu, kterou jsem vytvořil (modré pozadí s bílým písmenem A), stránku, kterou jsem načetl na aktuální kartu, v mém případě můj uživatelský účet v Solvetic (http: // www .solvetic … .berth-ramncgev /) změní pozadí na modrou. Je třeba poznamenat, že se změní pouze barva prvku BODY, a nikoli DIV, které obsahuje, protože takto jsem to definoval ve svém pozadí.js.

ZVĚTŠIT

Cvičení 2 - MultipleColor
V tomto příkladu ukážu, jak zefektivnit naši práci z vývojového IDE a z kódu. V Chrome Dev Editor, klikneme na tlačítko +, abychom vytvořili nový projekt, tentokrát změníme typ projektu výběrem možnosti JavaScript Chrome Aplikace.

ZVĚTŠIT

Jak vidíte, automaticky generuje celou strukturu našeho projektu. S naším souborem manifest.json s nejběžnějšími definicemi.

ZVĚTŠIT

K tomuto souboru přidáme krátký popis na štítek popis umístění požadovaného textu, v mém případě „Rozšíření, které umožňuje změnu barvy pozadí“. Pro tento projekt vytvoříme 2 ikony, jednu z 16x16 pixelů a druhou 128x128 pixelů, jak vidíte ve struktuře, tyto budou uloženy v adresáři aktiva.

Pod značku přidáme následující kód minimum_chrome_version:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Změnit stránku na více barev.", " default_popup ":" popup.html "},

Jak vidíte, definujeme vyskakovací okno nebo zobrazení, které bude obsahovat veškerý html, který uživatel uvidí po kliknutí na naše rozšíření. Poté přidáme následující kód:

 "content_scripts": [{"odpovídá": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

skripty obsahu- Obsahuje soubory JavaScript (js) a šablony stylů (css), které budou spuštěny v kontextu webové stránky. Může obsahovat následující vlastnosti:

zápasy: Povinné. Konkrétní, na kterou stránku bude skript vložen.

exclude_matches: Volitelné. Stránky, které budou vyloučeny, aby nebyl vložen skript.

match_about_blank: Volitelné. Tato hodnota je logická a označuje, zda bude skript vložen na prázdnou stránku (o: prázdné a o: srcdoc).

css: Volitelné. Jedná se o uspořádání, které označuje seznam souborů css, které budou vloženy na stránku požadovanou v prohlížeči.

js: Volitelné. Jedná se o uspořádání se seznamem souborů JavaScript, které budou vloženy na stránku požadovanou v prohlížeči.

run_at: Volitelné. Jedná se o textový řetězec, který určuje, kdy budou načteny soubory js. Jeho hodnota může být:
document_start: Soubory jsou vloženy po jakémkoli souboru css, ale před vytvořením DOM nebo spuštěním jiného skriptu.

document_end: Soubory jsou vloženy bezprostředně po dokončení DOM, ale před načtením jakýchkoli zdrojů, jako jsou obrázky a rámečky.

document_idle: Prohlížeč si zvolí čas pro vložení skriptů mezi document_end a bezprostředně po window.onload spustí událost.Tato možnost je ta, která je nakonfigurována ve výchozím nastavení.

Na konci našeho souboru manifest.json Mělo by to být následující:

ZVĚTŠIT

Jak vidíte, do nemovitosti jsme přidali několik nových věcí css Definovali jsme rámec Bootstrap, který neulehčí vývoj na úrovni stylu. Navázáno na majetek js Definujeme knihovnu JQUERY JavaScript, která nám nedovolí pracovat rychleji a snadněji se vším, co souvisí s JavaScriptem. Náš soubor index.html by měl vypadat takto:

 Vyskakovací okno Více barevČervenéModrýZelenáŽlutá

V souboru index.html jednoduše vytvoříme odkazy na naše soubory Bootstrap, Jquery a main.js. V těle definujeme bootstrapový kontejner s jeho divs, který bude sloužit jako tlačítka pro různé barevné možnosti.

Pro soubor main.js použijeme událost kliknutí, která bude provedena po stisknutí tlačítka myši na každé třídě „col-md-12“, přičemž se vezme barva pozadí vybraného prvku a přiřadí se k tělu stránka. byla otevřena. Poté bude spuštěna událost window.close (); které zavírají okno našeho rozšíření. Kód definovaný pro main.js je následující:

 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Výsledek při provádění našeho rozšíření budeme moci vizualizovat ikonu, kterou jsme pro něj vytvořili v horní liště.

Kliknutím na naše rozšíření se zobrazí následující vyskakovací okno:

A při výběru jedné z možností bude výsledek následující:

ZVĚTŠIT

Cvičení 3 - Nejlepší historie
V tomto příkladu použijeme vše, co jsme viděli výše, vytvoříme rozšíření, které když na něj klikneme, zobrazí nám vyskakovací okno se seznamem nejnavštěvovanějších stránek z našeho prohlížeče, které umožní přímý přístup k těmto stránkám. Jedinou odlišnou věcí v tomto příkladu je, že od jednoho z rozhraní API Chrome požádáme o přístup k nejsledovanějším stránkám z Chromu. Název tohoto rozhraní API je chrome.topSites.

Pro začátek se chystáme Chrome Dev Editor a vytvořili jsme náš projekt s názvem TopHistorial a v typu projektu vybereme možnost JavaScriptová aplikace Chrome.

Pak náš soubor manifest.json Mělo by to být následující:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Zobrazit seznam nejsledovanějších stránek v našem prohlížeči", "verze": "0,0.1", " minimum_chrome_version ":" 38 "," oprávnění ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" odpovídá ": [" "]," css ": [" aktiva / bootstrap / css / bootstrap.min.css "]," js ": [" aktiva / jquery.min.js "," main.js "], "run_at": "document_start"}]}}

Jak vidíte, do manifestu přidáváme nový atribut, abychom mohli získat oprávnění v rozhraní API Chrome: Prohlásit oprávnění, se používá ve většině rozhraní Chrome API ve vašem rozšíření, musíte jej nejprve deklarovat umístěním pole oprávnění ve vašem manifestu. Každé oprávnění může být textový řetězec patřící do následujícího seznamu (rozdělený na 3 obrázky):

Ohledně našeho souboru popup.html Mělo by to být následující:

 Vyskakovací okno Více barev

Náš archiv main.js který bude obsahovat dotaz api a zpracování události kliknutí, bude znázorněno následovně:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")}));} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Připojit ('
' + mostVisitedURLs [i] .title +'
'); } $ (". links"). bind ("klik", otevřená stránka); } chrome.topSites.get (buildPopupDom); });

Na strukturální úrovni měl náš projekt vypadat následovně:

Při spouštění našeho rozšíření se nám v horní části prohlížeče zobrazí ikona, která jej v mém případě navrhne modře, po kliknutí na něj se otevře vyskakovací okno se seznamem stránek, na které jsem ze svého webu přistupoval nejvíce. podle počtu návštěv, které jsem provedl.

ZVĚTŠIT