Začínáme

rozšíření jsou vyrobena z různých, ale soudržných komponent. Komponenty mohou zahrnovat skripty na pozadí, skripty obsahu, stránku s možnostmi, prvky uživatelského rozhraní a různé logické soubory. Komponenty rozšíření jsou vytvořeny s technologiemi vývoje webu: HTML, CSS a JavaScript. Komponenty rozšíření bude záviset na jeho funkčnosti a nemusí vyžadovat každou možnost.,

Tento kurz bude stavět rozšíření, které umožňuje uživateli změnit barvu pozadí každé stránky na developer.chrome.com. To bude používat mnoho základních složek dát úvodní demonstrace jejich vztahy.

Chcete-li začít, vytvořte nový adresář pro uložení souborů přípony.

dokončené rozšíření si můžete stáhnout zde.

Vytvořte manifest #

rozšíření začínají jejich manifestem. Vytvořte soubor s názvem manifest.json a uveďte následující kód nebo Soubor stáhněte zde.,

adresář držící soubor manifestu lze přidat jako příponu v režimu vývojáře ve svém aktuálním stavu.

1. otevřete stránku správy rozšíření tím, že přejdete na chrome://extensions.
   • stránku správy rozšíření lze také otevřít kliknutím na nabídku Chrome, vznášením více nástrojů a výběrem rozšíření.
2. povolte režim vývojáře kliknutím na přepínač vedle režimu vývojáře.
3. klikněte na tlačítko Načíst rozbalené a vyberte adresář rozšíření.

Ta-da!, Rozšíření bylo úspěšně nainstalováno. Protože do manifestu nebyly zahrnuty žádné ikony, pro rozšíření bude vytvořena obecná ikona panelu nástrojů.

přidat instrukci #

přestože bylo rozšíření nainstalováno, nemá žádné instrukce. Zavést skript na pozadí vytvořením souboru s názvem background.js nebo jeho stažením zde a umístěním do adresáře rozšíření.

skripty na pozadí a mnoho dalších důležitých komponent musí být registrovány v manifestu., Registrace skriptu na pozadí v manifestu říká příponě, který soubor má odkazovat a jak by se měl tento soubor chovat.

přípona si je nyní vědoma, že obsahuje non-perzistentní skript na pozadí a prohledá registrovaný Soubor pro důležité události, které potřebuje poslouchat.

toto rozšíření bude potřebovat informace z trvalé proměnné, jakmile bude nainstalováno. Začněte zahrnutím poslechové události pro runtime.onInstalled do skriptu na pozadí. UvnitřonInstalled posluchač, rozšíření nastaví hodnotu pomocí API úložiště., To umožní více komponentů rozšíření pro přístup k této hodnotě a její aktualizaci.

Většina Api, včetně skladování API, musí být registrován pod "permissions" pole v manifestu rozšíření jejich použití.

přejděte zpět na stránku správy rozšíření a klikněte na odkaz znovu načíst. Nové pole, zkontrolujte zobrazení, bude k dispozici s modrým odkazem, stránkou na pozadí.,

Klikněte na odkaz pro zobrazení pozadí skript“s log konzole, „The color is green.„

Zavést uživatelské rozhraní #

Rozšíření může mít mnoho forem uživatelského rozhraní, ale tenhle bude používat popup. Vytvořte a přidejte soubor s názvem popup.html do adresáře nebo si jej stáhněte zde. Toto rozšíření používá tlačítko pro změnu barvy pozadí.

stejně jako skript na pozadí musí být tento soubor označen jako vyskakovací okno v manifestu pod page_action.,

označení ikon panelu nástrojů je také zahrnuto podpage_action v polidefault_icons. Stáhněte si složku obrázky zde, rozbalte jej a umístěte jej do adresáře rozšíření. Aktualizujte manifest, takže rozšíření ví, jak používat obrázky.

rozšíření také zobrazují obrázky na stránce správy rozšíření, upozornění na oprávnění a favicon. Tyto obrázky jsou označeny v manifestu pod icons.,

Pokud je rozšíření v této fázi znovu načteno, bude obsahovat ikonu šedého měřítka, ale nebude obsahovat žádné rozdíly v funkčnosti. Protože page_action je deklarován v manifestu, je na rozšíření říct prohlížeči, když uživatel může komunikovat s popup.html.

přidejte deklarovaná pravidla do skriptu na pozadí pomocídeclarativeContent API v rámciruntime.onInstalled událost posluchače.

rozšíření bude potřebovat oprávnění pro přístup kdeclarativeContent API ve svém manifestu.,

prohlížeč bude nyní ukázat, full-barevné stránky akční ikonu v prohlížeči panel nástrojů, když uživatelé přejít na adresu URL, která obsahuje "developer.chrome.com". Pokud je ikona plnobarevná, uživatelé na ni mohou kliknout a zobrazit vyskakovací okno.html.

posledním krokem pro vyskakovací uživatelské rozhraní je přidání barvy na tlačítko. Vytvořte a přidejte soubor s názvem https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js s následujícím kódem do adresáře rozšíření, nebo stáhnout zde.

tento kód uchopí tlačítko z popup.html a požaduje hodnotu barvy z úložiště., Poté použije barvu jako pozadí tlačítka. Zahrnout značku skriptu do https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js v popup.html.

znovu načtěte rozšíření pro zobrazení zeleného tlačítka.

Vrstva logiky #

rozšíření nyní ví popup by měl být k dispozici uživatelům na developer.chrome.com a zobrazuje barevné tlačítko, ale potřebuje logiku pro další interakci s uživatelem. Aktualizace https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js zahrnout následující kód.,

aktualizováno kódu přidá onclick událost na tlačítko, které spouští programatically vstříkne obsah skript. Tím se barva pozadí stránky změní na stejnou barvu jako tlačítko. Použití programové injekce umožňuje uživatelsky vyvolané obsahové skripty, namísto automatického vkládání nežádoucího kódu na webové stránky.

manifest bude potřebovat oprávnění activeTab povolit rozšíření dočasný přístup k tabs API. To umožňuje rozšíření volat tabs.executeScript.,

rozšíření je nyní plně funkční! Obnovte rozšíření, obnovte tuto stránku, otevřete vyskakovací okno a klikněte na tlačítko, abyste ji zezelenali! Někteří uživatelé však mohou chtít změnit pozadí na jinou barvu.

dát uživatelům možnosti #

rozšíření v současné době umožňuje pouze uživatelům změnit pozadí na zelenou. Včetně možnosti stránky poskytuje uživatelům větší kontrolu nad funkčností rozšíření, dále přizpůsobení jejich prohlížení webu.,

Začněte vytvořením souboru v adresáři s názvem options.html a zahrňte následující kód nebo jej stáhněte zde.

poté zaregistrujte stránku možností v manifestu,

znovu načtěte rozšíření a klikněte na podrobnosti.

Přejděte dolů na stránku Podrobnosti a vyberte možnosti rozšíření pro zobrazení stránky možností, i když se v současné době objeví prázdné.

posledním krokem je přidání logiky voleb., Vytvořte soubor s názvem options.js v adresáři rozšíření s následujícím kódem nebo si jej stáhněte zde.

jsou k dispozici čtyři barevné možnosti a poté jsou generovány jako tlačítka na stránce možností s posluchači událostí onclick. Když uživatel klikne na tlačítko, aktualizuje hodnotu barvy v globálním úložišti rozšíření. Vzhledem k tomu, všechny soubory rozšíření vytáhnout barevné informace z globálního úložiště žádné jiné hodnoty je třeba aktualizovat.

Gratulujeme! Adresář nyní obsahuje plně funkční, i když zjednodušující rozšíření Chrome.

Co bude dál?,

• přehled rozšíření Chrome se trochu zálohuje a vyplňuje spoustu detailů o architektuře rozšíření obecně a někteří vývojáři konkrétních konceptů budou chtít být obeznámeni.
• informace o možnostech dostupných pro ladění rozšíření v tutoriálu ladění.
• rozšíření Chrome mají přístup k výkonným API nad rámec toho, co je k dispozici na otevřeném webu. Chrom.* API dokumentace bude procházet každý API.
• průvodce vývojáře má desítky dalších odkazů na části dokumentace relevantní pro pokročilé vytváření rozšíření.,

---