Stalo sa vám niekedy, že ste nespokojní s funkciami, ktoré sú súčasťou vášho webového prehliadača? Aj keď máte za sebou hodiny prehľadávania Internetového obchodu Google, nie je vždy jednoduché kliknúť na tlačidlo „Stiahnuť“, aby ste si vylepšili zážitok zo surfovania po webe.

Tu prichádzajú na rad rozšírenia prehliadača. V tomto článku budeme skúmať proces vytvárania vášho vlastného DIY rozšírenia Google Chrome od nuly.

Čo je rozšírenie Google Chrome?

Moderné webové prehliadače ako Google Chrome prichádzajú s radom funkcií, vďaka ktorým sa ľahko používajú a dokážu uspokojiť potreby väčšiny používateľov. Rozšírenie týchto akciových funkcií však môže priniesť množstvo rôznych výhod. To je dôvod, prečo vývojári prehliadačov zvyčajne umožňujú vytvárať rozšírenia, doplnky a zásuvné moduly.

Prehliadač Google Chrome ponúka túto funkciu, vďaka ktorej si môže každý, kto má skúsenosti s vývojom webu, jednoducho vytvoriť vlastné rozšírenia prehliadača Chrome. Rozšírenie môžete vytvoriť pomocou HTML, JavaScriptu a CSS, rovnako ako mnohé webové stránky.

instagram viewer

Na rozdiel od webových stránok môžu rozšírenia bežať na pozadí počas prehliadania a niekedy dokonca interagovať s webmi, ktoré navštevujete.

Čo urobí naše rozšírenie Google Chrome?

Chystáme sa vytvoriť jednoduché rozšírenie prehliadača Chrome, ktoré vám umožní navštíviť webovú stránku Make Use Of a vykonať náhodné vyhľadávanie na základe kategórií článkov, ktoré sa na stránke nachádzajú. Ide o rýchly a jednoduchý projekt, ale aj tak sa veľa naučíte.

Naučíte sa, ako na to

  • Vytvorte rozšírenie Google Chrome
  • Vložte vlastný kód na webové stránky pomocou rozšírenia Chrome
  • Vytvorte poslucháčov udalostí a simulujte kliknutia
  • Generujte náhodné čísla
  • Práca s poliami a premennými

Vytvorenie vlastného rozšírenia pre Chrome

Google prekvapivo zjednodušil vytvorenie vlastného Rozšírenia Chrome, takže nebude trvať dlho, kým bude niečo fungovať. Dodržiavanie krokov nižšie zaberie len 10 až 15 minút, ale odporúčame vám experimentovať aj s vlastným kódom.

Krok 1: Vytvorenie súborov

Svoje rozšírenie môžete uložiť na svojom vlastnom miestnom počítači, ak ho neplánujete distribuovať. Na vytvorenie rozšírenia potrebujeme vytvoriť iba štyri rôzne súbory; súbor HTML, súbor CSS, súbor JavaScript a súbor JSON.

Naše súbory sme nazvali index.html, style.css, script.js a manifest.json. Súbor manifestu musí mať tento názov, aby správne fungoval, ale ostatným môžete dať ľubovoľné mená, pokiaľ zodpovedajúcim spôsobom upravíte svoj kód.

Tieto súbory by ste mali umiestniť do rovnakého koreňového priečinka.

Krok 2: Vytvorenie súboru Manifest

Súbor manifestu sa dodáva s každým rozšírením Google Chrome. Poskytuje informácie o rozšírení do prehliadača Chrome a zároveň zavádza niektoré základné nastavenia. Tento súbor musí obsahovať názov, číslo verzie, popis a verziu manifestu. Zahrnuli sme aj povolenia a akciu, ktorá sa načítava index.html ako kontextové okno, ktoré sa zobrazí pre rozšírenie.

{
"názov": "Automatické vyhľadávanie MakeUseOf.com",
"verzia": "1.0.0",
"popis": "Vyhľadávací nástroj na nájdenie zaujímavých článkov",
"manifest_version": 3,
"autora": "Samuel Garbett",
"povolenia": ["skladovanie", "deklaratívnyObsah", "activeTab", "skriptovanie"],
"host_permissions": [""],
"akcie":{
"default_popup": "index.html",
"default_title": "Automatické vyhľadávanie MUO"
 }
}

Krok 3: Vytvorenie HTML a CSS

Predtým, ako začneme písať náš skript, musíme vytvoriť základné používateľské rozhranie pomocou HTML a CSS. Môžete použiť a Knižnica CSS ako Bootstrap aby sme sa vyhli vytváraniu vlastného, ​​ale pre naše rozšírenie potrebujeme iba niekoľko pravidiel.

Náš súbor index.html obsahuje značky html, head a body. Značka head obsahuje názov stránky a odkaz na našu šablónu so štýlmi, zatiaľ čo telo je domovom značky h1, a tlačidlo, ktoré vás prenesie na stránku MakeUseOf.com, a ďalšie tlačidlo, ktoré budeme používať ako spúšťač pre a skript. Značka skriptu priamo na konci dokumentu obsahuje script.js súbor.

<html>
<hlavu>
<titul>Automatické vyhľadávanie MUO</title>
<meta znaková sada="utf-8">
<odkaz rel="štýlov" href="style.css">
</head>
<telo>
<h1>Automatické vyhľadávanie MUO</h1>
<a href="https://www.makeuseof.com/" cieľ="_blank"><ID tlačidla="tlačidlo Jedna">Prejdite na stránku MakeUseOf.com</button></a>
<ID tlačidla="tlačidlo Dva">Spustite náhodné vyhľadávanie</button>
</body>
<skript src="script.js"></script>
</html>

Náš súbor CSS je ešte jednoduchší ako náš HTML a mení štýl iba piatich prvkov. Máme pravidlá pre naše značky html a body, ako aj pre značky h1 a obe naše tlačidlá.

html {
 šírka: 400px;
}
telo {
 rodina písiem: Helvetica, bezpätkové;
}
h1 {
 text-align: center;
}
#buttonJedna {
 border-radius: 0px;
 šírka: 100 %;
 padding: 10px 0px;
}
#buttonDva {
 border-radius: 0px;
 šírka: 100 %;
 padding: 10px 0px;
 margin-top: 10px;
}

Krok 4: Vytvorenie JavaScriptu

Ako posledný krok v tomto procese je čas zostaviť náš súbor script.js.

Prvá funkcia v tomto súbore, tzv insertScript(), je na mieste na vloženie ďalšej funkcie (autoSearch()) na aktuálnu stránku. To nám umožňuje manipulovať so stránkou a používať funkcie vyhľadávania, ktoré sú už na stránke MakeUseOf.com prítomné.

Potom nasleduje poslucháč udalostí, ktorý čaká, kým nekliknete na tlačidlo Spustiť náhodné vyhľadávanie, a až potom zavolá funkciu, ktorú sme preskúmali vyššie.

The autoSearch() funkcia je trochu komplikovanejšia. Začína to poľom obsahujúcim 20 kategórií na webovej stránke MUO, čo nám poskytuje dobrú vzorku, z ktorej môžeme čerpať pri náhodnom vyhľadávaní. Následne použijeme Math.random() funkcia na generovanie náhodného čísla medzi 0 a 19, aby ste vybrali položku z nášho poľa.

S naším hľadaným výrazom v ruke teraz musíme simulovať kliknutie na tlačidlo na otvorenie vyhľadávacieho panela MUO. Najprv používame konzolu pre vývojárov prehliadača Chrome na nájdenie ID tlačidla vyhľadávania a potom ho pridáme do nášho kódu JavaScript s príponou klikni() funkciu.

Rovnako ako tlačidlo vyhľadávania, aj my musíme nájsť ID vyhľadávacieho panela, ktorý sa zobrazí, čo nám umožní vložiť náhodný hľadaný výraz, ktorý sme vybrali. Po vyplnení je jednoduché odoslať formulár, aby sme mohli hľadať.

// Táto funkcia vloží našu funkciu autoSearch do kódu stránky
funkciuinsertScript() {
// Toto vyberie zameranú kartu pre operáciu a odovzdá funkciu autoSearch
 chrome.tabs.query({aktívny: pravda, currentWindow: pravda}, karty => {
chróm.skriptovanie.executeScript({cieľ: {tabId: karty[0].id}, funkciu: automatické vyhľadávanie})
 })
// Týmto sa zatvorí kontextové okno rozšírenia na výber vyhľadávacieho panela webových stránok
okno.Zavrieť();
}


// Toto je prijímač udalostí, ktorý zisťuje kliknutia na našeŠtart Náhodný Vyhľadávanietlačidlo "
document.getElementById('tlačidlo Dva').addEventListener('kliknite', insertScript)


// Táto funkcia vyberie náhodnú tému z poľa a 
funkciuautomatické vyhľadávanie() {
// Toto je pole na uloženie našich hľadaných výrazov
 const searchTerms = ["PC a mobil", "životný štýl", "Hardvér", "Windows", "Mac",
"Linux", "Android", "Apple", "internet", "Bezpečnosť",
"Programovanie", "Zábava", "Produktivita", "Kariéra", "Kreatívne",
"Hranie", "Sociálne médiá", "Smart Home", "DIY", "Preskúmanie"];


// Toto vygeneruje náhodné číslo medzi 0 a 19
nech selectorNumber = Matematika.poschodie(Matematika.random() * 20);


// Toto používa náhodné číslo na výber položky z poľa
nech výber = searchTerms[selectorNumber];


// Toto simuluje kliknutie na ikonu vyhľadávania webových stránok MUO
 document.getElementById("js-search").click();


// Toto nastaví vyhľadávací panel webovej stránky MUO ako premennú
var vyhľadávací panel = dokument.getElementById("js-search-input");


// Toto vloží náš náhodný hľadaný výraz do vyhľadávacieho panela
 searchBar.value = searchBar.value + výber;
// Toto dokončí proces aktiváciou webového formulára
 document.getElementById("vyhľadávací formulár 2").Predložiť();
}

Krok 5: Pridanie súborov do Chrome://extensions

Ďalej je čas pridať súbory, ktoré ste práve vytvorili, na stránku rozšírení prehliadača Chrome. Keď to urobíte, rozšírenie bude dostupné v prehliadači Chrome a bude sa aktualizovať vždy, keď v súboroch vykonáte zmeny.

Otvorte prehliadač Google Chrome, prejdite na adresu chrome://extensions a uistite sa, že posúvač režimu vývojára v pravom hornom rohu je v polohe zapnuté.

Kliknite Náklad Rozbalený v ľavom hornom rohu vyberte priečinok, do ktorého ste uložili súbory rozšírenia, a kliknite Vyberte položku Priečinok.

Teraz, keď je vaše rozšírenie načítané, môžete kliknúť na ikonu dielika skladačky v pravom hornom rohu a pripnúť rozšírenie na hlavný panel úloh, aby ste k nemu mali jednoduchší prístup.

Teraz by ste mali mať prístup k dokončenému rozšíreniu vo svojom prehliadači. Stojí za to mať na pamäti, že toto rozšírenie bude fungovať iba na webových stránkach MUO alebo webových stránkach s rovnakým ID pre tlačidlo vyhľadávania a panel.

Vytvorenie rozšírenia Google Chrome

Tento článok len načrtáva povrch možných funkcií, ktoré by ste mohli zabudovať do svojho vlastného rozšírenia Google Chrome. Keď sa naučíte základy, oplatí sa preskúmať svoje vlastné nápady.

Rozšírenia prehliadača Chrome vám môžu pomôcť posunúť prehliadanie na vyššiu úroveň, ale snažte sa držať ďalej od niektorých známych tienistých rozšírení prehliadača Chrome, aby ste mohli bezpečne a bezpečne prehliadať.

6 tienistých rozšírení Google Chrome, ktoré by ste mali čo najskôr odinštalovať

Prečítajte si ďalej

zdieľamTweetujtezdieľamEmail

Súvisiace témy

  • Programovanie
  • Rozšírenia prehliadača
  • Vývoj webových aplikácií
  • JavaScript

O autorovi

Samuel L. Garbett (44 publikovaných článkov)

Samuel je technologický spisovateľ so sídlom v Spojenom kráľovstve s vášňou pre všetko, čo si sami urobia. Samuel, ktorý začal podnikať v oblasti vývoja webu a 3D tlače, spolu s dlhoročnou prácou spisovateľa ponúka jedinečný pohľad do sveta technológií. Zameriava sa hlavne na DIY technické projekty a nemiluje nič viac ako zdieľanie zábavných a vzrušujúcich nápadov, ktoré si môžete vyskúšať doma. Mimo práce možno Samuela zvyčajne nájsť bicyklovať, hrať počítačové videohry alebo sa zúfalo pokúšať komunikovať so svojím krabom.

Viac od Samuela L. Garbett

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné e-knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber