Pokud jste uživatelem prohlížeče Chrome, budete pravděpodobně používat jedno nebo více rozšíření. Ať už jde o blokování reklam nebo přidání funkcí, rozšíření do prohlížeče přidávají spoustu užitečných funkcí. Nebylo by tedy skvělé, kdybyste si mohli vytvořit vlastní rozšíření pro Chrome? To je přesně to, co vám zde ukážu.
Viz také náš článek Nejlepší dotykové Chromebooky
Protože udržuji webové stránky pro klienty, ráda bych věděla, jak si každý web vede, pokud jde o načítání stránky. Protože Google nyní ve svých výpočtech SEO používá dobu načítání, věděl, jak rychle nebo pomalu se načítání stránky je důležitou metrikou při optimalizaci webu. To platí ještě více při optimalizaci webových stránek pro mobily. Musí být lehký, rychlý a musí se načítat bez chyb, aby bylo možné v Googlu dosáhnout vysokého skóre.
Kromě toho skutečnost, že podnikavý člověk na webu SitePoint také používá stejný web, který používám ke kontrole rychlosti stránek, GTmetrix a vyvinul rozšíření Chrome pro jeho kontrolu, jsem si myslel, že udělám totéž a projdu vás.
Rozšíření Chrome
Rozšíření Chrome jsou mini programy, které přidávají funkce do základního prohlížeče. Mohou být stejně přímí jako ten, který vytvoříme, nebo tak složitá, jako jsou bezpeční správci hesel nebo emulátory skriptů. Jsou psány v kompatibilních jazycích, jako jsou HTML, CSS a JavaScript, jedná se o samostatné soubory, které sedí vedle prohlížeče.
Většina rozšíření jsou nutně jednoduché spouštění ikon, které provádějí danou akci. Tato akce může být doslova cokoli, co chcete, aby Chrome dělal.
Vytvořte si vlastní rozšíření pro Chrome
S trochou průzkumu můžete své rozšíření vyladit tak, aby se vám líbilo, ale líbí se mi myšlenka kontroly rychlosti jedním tlačítkem, takže s tím půjdu.
Když kontrolujete rychlost webu, obvykle vložte adresu URL stránky, na které se nacházíte, do GTmetrixu, Pingdomu nebo kamkoli a stiskněte Analyze. Trvá to jen pár vteřin, ale nebylo by hezké, kdybyste si ve svém prohlížeči mohli vybrat ikonu a nechat to udělat pro vás? Po absolvování tohoto tutoriálu budete moci udělat jen to.
Budete muset vytvořit složku v počítači, aby se vše zachovalo. Vytvořte tři prázdné soubory, manifest.json, popup.html a popup.js. Klikněte pravým tlačítkem do nové složky a vyberte Nový a textový soubor. Otevřete každý ze svých tří souborů ve vybraném textovém editoru. Ujistěte se, že popup.html je uložen jako soubor HTML a popup.js je uložen jako soubor JavaScript. Stáhněte si tuto ukázkovou ikonu z Googlu také jen pro účely tohoto tutoriálu.
Vyberte manifest.json a vložte do něj následující:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Použijte GTmetrix k analýze rychlosti načítání webové stránky", "version": "1.0", "browsery": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "oprávnění":}
Jak vidíte, dali jsme mu název a základní popis. Zavolali jsme také akci prohlížeče, která zahrnuje ikonu, kterou jsme stáhli z Googlu, která se zobrazí na liště prohlížeče a vyskakovací okno.html. Popup.html je to, co se nazývá, když v prohlížeči vyberete ikonu rozšíření.
Otevřete popup.html a vložte do něj následující.
Analyzátor stránek pomocí GTMetrix
Popup.html je to, co se nazývá, když v prohlížeči vyberete ikonu rozšíření. Pojmenovali jsme ji, označili vyskakovací okno a přidali tlačítko. Stisknutím tlačítka zavoláte popup.js, což je soubor, který dokončíme další.
Otevřete popup.js a vložte do něj následující:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab)) {d = dokument; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);
Nebudu předstírat, že znám JavaScript, což je důvod, proč bylo užitečné, že server SitePoint již tento soubor měl na svém místě. Všechno, co vím, je to, že říká společnosti GTmetrix, aby analyzovala stránku na aktuální kartě Chrome. Tam, kde je uvedeno „chrome.tabs.getSelected“, rozšíření vezme URL z aktivní karty a vloží ji do webového formuláře. To je, pokud můžu jít.
Testování rozšíření Chrome
Nyní máme základní rámec zaveden, musíme otestovat, jak to funguje.
- Spusťte prohlížeč Chrome a vyberte Další nástroje a rozšíření.
- Zaškrtněte políčko vedle režimu pro vývojáře a aktivujte jej.
- Vyberte Načíst nevybalenou příponu a přejděte k souboru, který jste pro tuto příponu vytvořili.
- Chcete-li rozšíření načíst, vyberte OK a mělo by se objevit v seznamu rozšíření.
- V seznamu zaškrtněte políčko vedle položky Enabled a v prohlížeči by se měla objevit ikona.
- Vyberte ikonu v prohlížeči, aby se objevilo vyskakovací okno.
- Vyberte tlačítko, Zkontrolovat tuto stránku nyní!
Měli byste vidět kontrolovanou stránku a zprávu o výkonu od GTmetrix. Jak vidíte z mého vlastního webu v hlavním obrázku, musím udělat trochu práce, abych urychlil můj nový design!
Posouvání rozšíření vpřed
Vytvoření vlastního rozšíření pro Chrome není tak obtížné, jak by se mohlo zdát. I když to jistě pomohlo s náskokem tím, že znáte malý kód, existují stovky zdrojů online, které vám to ukážou. Google má navíc obrovské úložiště informací, výukových programů a návodů, které vám pomohou. Použil jsem tuto stránku z webu Google Developer, aby mi pomohl s tímto rozšířením. Stránka vás provede každou částí vytváření rozšíření a poskytuje ikonu, kterou jsme použili dříve.
Při dostatečném výzkumu můžete vytvářet rozšíření, která dokážou téměř vše, co prohlížeč dokáže. Některá z nejlepších rozšíření v obchodě Chrome pocházejí od jednotlivců a nikoli od společností, což dokazuje, že si opravdu můžete vytvořit svůj vlastní.
Všechny uznání za Johna Sonmeza na webu SitePoint za původní průvodce. Udělal těžkou práci, jen jsem ji trochu reorganizoval a mírně aktualizoval.
Vytvořili jste vlastní rozšíření pro Chrome? Chcete ji propagovat nebo sdílet? Pokud ano, dejte nám vědět níže!
