Stalo se vám někdy, že jste nespokojeni s funkcemi, které jsou součástí vašeho webového prohlížeče? I když máte za sebou hodiny procházení Internetového obchodu Google, není vždy jednoduché stisknout tlačítko „Stáhnout“, abyste si vylepšili zážitek z procházení webu.

Zde přichází na řadu rozšíření prohlížeče. V tomto článku prozkoumáme proces vytváření vašeho vlastního DIY rozšíření Google Chrome od nuly.

Co je rozšíření Google Chrome?

Moderní webové prohlížeče, jako je Google Chrome přicházejí s řadou funkcí, díky nimž se snadno používají a uspokojí potřeby většiny uživatelů. Rozšíření těchto funkcí akcií však může přinést spoustu různých výhod. To je důvod, proč vývojáři prohlížečů obvykle umožňují vytvářet pro ně rozšíření, doplňky a zásuvné moduly.

Google Chrome nabízí tuto funkci, takže si může snadno vytvořit vlastní rozšíření pro Chrome každý, kdo má zkušenosti s vývojem webu. Rozšíření můžete vytvořit pomocí HTML, JavaScriptu a CSS, stejně jako mnoho webových stránek.

Na rozdíl od webových stránek mohou rozšíření běžet na pozadí při procházení, někdy dokonce interagovat s weby, které navštěvujete.

instagram viewer

Co udělá naše rozšíření pro Google Chrome?

Chystáme se vytvořit jednoduché rozšíření pro Chrome, které vám umožní navštívit webovou stránku Make Use Of a provést náhodné vyhledávání na základě kategorií článků nalezených na webu. Jedná se o rychlý a snadný projekt, ale i tak se toho hodně naučíte.

Naučíš se jak

  • Vytvořte rozšíření Google Chrome
  • Vložte vlastní kód na webové stránky pomocí rozšíření pro Chrome
  • Vytvářejte posluchače událostí a simulujte kliknutí
  • Generujte náhodná čísla
  • Práce s poli a proměnnými

Vytvořte si vlastní rozšíření pro Chrome

Google překvapivě snadno vytvořil vlastní Rozšíření Chrome, takže to nebude trvat dlouho, než budete mít něco funkční. Následující kroky vám zaberou pouze 10 až 15 minut, ale doporučujeme vám experimentovat i se svým vlastním kódem.

Krok 1: Vytvoření souborů

Své rozšíření můžete uložit na svém vlastním místním počítači, pokud jej neplánujete distribuovat. K vytvoření našeho rozšíření potřebujeme pouze vytvořit čtyři různé soubory; soubor HTML, soubor CSS, soubor JavaScript a soubor JSON.

Naše soubory jsme nazvali index.html, style.css, script.js a manifest.json. Soubor manifestu musí mít tento název, aby správně fungoval, ale ostatním můžete dát libovolné názvy, pokud odpovídajícím způsobem upravíte svůj kód.

Tyto soubory byste měli umístit do stejné kořenové složky.

Krok 2: Vytvoření souboru Manifest

Soubor manifestu je dodáván s každým rozšířením Google Chrome. Poskytuje informace o rozšíření pro Chrome a zároveň zavádí některá základní nastavení. Tento soubor musí obsahovat název, číslo verze, popis a verzi manifestu. Zahrnuli jsme také oprávnění a akci, která se načte index.html jako vyskakovací okno, které se zobrazí pro rozšíření.

{
"název": "Automatické vyhledávání MakeUseOf.com",
"verze": "1.0.0",
"popis": "Vyhledávací nástroj pro nalezení zajímavých článků",
"manifest_version": 3,
"autor": "Samuel Garbett",
"oprávnění": ["úložný prostor", "deklarativní obsah", "activeTab", "skriptování"],
"oprávnění_hostitele": [""],
"akce":{
"default_popup": "index.html",
"default_title": "Automatické vyhledávání MUO"
 }
}

Krok 3: Vytvoření HTML a CSS

Než začneme psát náš skript, musíme vytvořit základní uživatelské rozhraní pomocí HTML a CSS. Můžete použít a CSS knihovna jako Bootstrap abychom se vyhnuli vytváření vlastních, ale pro naše rozšíření potřebujeme pouze několik pravidel.

Náš soubor index.html obsahuje značky html, head a body. Tag head obsahuje název stránky a odkaz na naši šablonu stylů, zatímco tělo je domovem tagu h1, a tlačítko, které vás přenese na MakeUseOf.com, a další tlačítko, které budeme používat jako spouštěč pro a skript. Značka skriptu přímo na konci dokumentu obsahuje script.js soubor.

<html>
<hlava>
<titul>Automatické vyhledávání MUO</title>
<meta znaková sada="utf-8">
<odkaz rel="šablona stylů" href="styl.css">
</head>
<tělo>
<h1>Automatické vyhledávání MUO</h1>
<a href="https://www.makeuseof.com/" cíl="_prázdný"><ID tlačítka="tlačítkoJedna">Přejděte na stránku MakeUseOf.com</button></A>
<ID tlačítka="tlačítko Dva">Spusťte náhodné vyhledávání</button>
</body>
<skript src="script.js"></script>
</html>

Náš soubor CSS je ještě jednodušší než náš HTML a mění styl pouhých pěti prvků. Máme pravidla pro naše značky html a body, stejně jako pro značky h1 a obě naše tlačítka.

html {
 šířka: 400px;
}
tělo {
 rodina písem: Helvetica, sans-serif;
}
h1 {
 text-align: center;
}
#buttonJedna {
 border-radius: 0px;
 šířka: 100 %;
 odsazení: 10px 0px;
}
#buttonDva {
 border-radius: 0px;
 šířka: 100 %;
 odsazení: 10px 0px;
 margin-top: 10px;
}

Krok 4: Vytvoření JavaScriptu

Jako poslední krok v tomto procesu je čas sestavit náš soubor script.js.

První funkce v tomto souboru, tzv insertScript(), je na místě pro vložení další funkce (autoSearch()) na aktuální stránku. To nám umožňuje manipulovat se stránkou a používat funkce vyhledávání, které jsou již na webu MakeUseOf.com přítomny.

Následuje posluchač událostí, který před voláním funkce, kterou jsme prozkoumali výše, počká, dokud neklikne na tlačítko Spustit náhodné vyhledávání.

The autoSearch() funkce je trochu složitější. Začíná polem obsahujícím 20 kategorií na webu MUO, což nám poskytuje dobrý vzorek, ze kterého můžeme čerpat při náhodném vyhledávání. V návaznosti na to použijeme Math.random() funkce pro generování náhodného čísla mezi 0 a 19 za účelem výběru položky z našeho pole.

S naším hledaným výrazem v ruce nyní musíme simulovat kliknutí na tlačítko pro otevření vyhledávací lišty MUO. Nejprve pomocí vývojářské konzole Chrome najdeme ID tlačítka vyhledávání a poté jej přidáme do našeho kódu JavaScript s příponou klikni() funkce.

Stejně jako tlačítko vyhledávání musíme také najít ID vyhledávacího panelu, který se objeví, což nám umožní vložit náhodný hledaný výraz, který jsme vybrali. Po dokončení je jednoduchá záležitost odeslání formuláře, abychom mohli hledat.

// Tato funkce vloží naši funkci autoSearch do kódu stránky
funkceinsertScript() {
// Toto vybere aktivní kartu pro operaci a předá funkci autoSearch
 chrome.tabs.query({aktivní: skutečný, currentWindow: skutečný}, tabulátory => {
chrom.skriptování.executeScript({cílová: {tabId: tabs[0].id}, funkce: automatické vyhledávání})
 })
// Tím se zavře vyskakovací okno rozšíření pro výběr vyhledávací lišty webu
okno.zavřít();
}


// Toto je posluchač událostí, který zjišťuje kliknutí na naše "Start Náhodný Vyhledávání" knoflík
document.getElementById('tlačítko Dva').addEventListener('klikněte', insertScript)


// Tato funkce vybere náhodné téma z pole a 
funkceautomatické vyhledávání() {
// Toto je pole pro uložení našich hledaných výrazů
 const searchTerms = ["PC a mobil", "životní styl", "Hardware", "Okna", "Mac",
"Linux", "Android", "Jablko", "Internet", "Bezpečnostní",
"Programování", "Zábava", "Produktivita", "Kariéra", "Tvůrčí",
"Hraní", "Sociální média", "Chytrý domov", "DIY", "Posouzení"];


// Toto vygeneruje náhodné číslo mezi 0 a 19
nechat selectorNumber = Matematika.podlaha(Matematika.random() * 20);


// Toto používá náhodné číslo k výběru položky z pole
nechat výběr = searchTerms[selectorNumber];


// To simuluje kliknutí na ikonu vyhledávání na webu MUO
 document.getElementById("js-search").click();


// Toto nastaví vyhledávací lištu webu MUO jako proměnnou
var vyhledávací lišta = dokument.getElementById("js-search-input");


// Toto vloží náš náhodný hledaný výraz do vyhledávacího pole
 searchBar.value = searchBar.value + výběr;
// Tím se proces dokončí aktivací webového formuláře
 document.getElementById("vyhledávací formulář2").Předložit();
}

Krok 5: Přidání souborů do Chrome://extensions

Dále je čas přidat soubory, které jste právě vytvořili, na stránku rozšíření Chrome. Jakmile to uděláte, rozšíření bude přístupné v prohlížeči Chrome a bude se samo aktualizovat, kdykoli provedete změny v souborech.

Otevřete Google Chrome, přejděte na chrome://extensions a ujistěte se, že je posuvník režimu vývojáře v pravém horním rohu v poloze zapnuto.

Klikněte Náklad Rozbalený v levém horním rohu vyberte složku, do které jste uložili soubory rozšíření, a klikněte Vybrat složku.

Nyní, když je vaše rozšíření načteno, můžete kliknout na ikonu dílku skládačky v pravém horním rohu a připnout rozšíření na hlavní panel pro snazší přístup.

Nyní byste měli mít přístup k dokončenému rozšíření ve vašem prohlížeči. Je třeba mít na paměti, že toto rozšíření bude fungovat pouze na webu MUO nebo na webech se stejným ID pro vyhledávací tlačítko a panel.

Vytvoření rozšíření Google Chrome

Tento článek pouze poškrábe povrch možných funkcí, které byste mohli zabudovat do svého vlastního rozšíření Google Chrome. Jakmile se naučíte základy, stojí za to prozkoumat své vlastní nápady.

Rozšíření pro Chrome vám mohou pomoci zvýšit úroveň procházení, ale snažte se vyhýbat některým známým stinným rozšířením Chrome pro bezpečné a zabezpečené procházení.

6 stinných rozšíření Google Chrome, která byste měli odinstalovat co nejdříve

Přečtěte si další

PodíltweetPodílE-mailem

Související témata

  • Programování
  • Rozšíření prohlížeče
  • Vývoj webu
  • JavaScript

O autorovi

Samuel L. Garbett (44 zveřejněných článků)

Samuel je technologický spisovatel se sídlem ve Spojeném království s vášní pro vše, co je kutilství. Samuel začal podnikat v oblasti vývoje webu a 3D tisku a řadu let pracoval jako spisovatel a nabízí jedinečný pohled do světa technologií. Zaměřuje se hlavně na DIY technické projekty a nemiluje nic víc než sdílení zábavných a vzrušujících nápadů, které si můžete vyzkoušet doma. Mimo práci lze Samuela obvykle zastihnout, jak jezdí na kole, hraje počítačové videohry nebo se zoufale pokouší komunikovat se svým krabem.

Více od Samuela L. Garbett

Přihlaste se k odběru našeho newsletteru

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!

Chcete-li se přihlásit k odběru, klikněte sem