Előfordult már, hogy elégedetlen volt a webböngészőjéhez tartozó funkciókkal? Még a Google Internetes áruház órákon át tartó böngészése mellett sem mindig egyszerű a „letöltés” ​​gombra kattintani, hogy fokozza az internetes szörfözés élményét.

Itt jönnek be a böngészőbővítmények. Ebben a cikkben azt a folyamatot fogjuk megvizsgálni, hogyan készítheti el saját barkács Google Chrome-bővítményét a semmiből.

Mi az a Google Chrome bővítmény?

Modern webböngészők, például a Google Chrome egy sor olyan funkcióval rendelkezik, amelyek könnyen használhatóvá teszik őket, és a legtöbb felhasználó igényeit kielégítik. Ezeknek az állományi jellemzőknek a kiterjesztése azonban számos előnnyel járhat. Ez az oka annak, hogy a böngészőfejlesztők általában lehetővé teszik számukra bővítmények, kiegészítők és beépülő modulok létrehozását.

A Google Chrome kínálja ezt a funkciót, így a webfejlesztési tapasztalattal rendelkezők könnyen létrehozhatják saját Chrome-bővítményeiket. Bővítményeket készíthet HTML, JavaScript és CSS használatával, akárcsak sok webhely.

A webhelyekkel ellentétben a bővítmények a háttérben futhatnak böngészés közben, és néha még interakcióba is léphetnek a felkeresett webhelyekkel.

Mit fog tenni a Google Chrome bővítményünk?

Egy egyszerű Chrome-bővítményt fogunk építeni, amely lehetővé teszi, hogy felkeresse a Make Use Of webhelyet, és véletlenszerű keresést végezzen az oldalon található cikkkategóriák alapján. Ez egy gyors és egyszerű projekt, de így is sokat tanulhatsz.

Megfogod tanulni hogyan

  • Hozzon létre egy Google Chrome-bővítményt
  • Szúrjon be egyéni kódot weboldalakba egy Chrome-bővítmény segítségével
  • Hozzon létre eseményfigyelőket és szimuláljon kattintásokat
  • Véletlen számok generálása
  • Dolgozzon tömbökkel és változókkal

Készítse el saját barkács Chrome-bővítményét

A Google meglepően egyszerűvé tette saját létrehozását Chrome-bővítmények, így nem tart sokáig, amíg valami működik. Az alábbi lépések végrehajtása mindössze 10-15 percet vesz igénybe, de javasoljuk, hogy kísérletezzen saját kódjával is.

1. lépés: Fájlok létrehozása

A bővítményt a saját helyi számítógépén tárolhatja, ha nem tervezi annak terjesztését. Csak négy különböző fájlt kell létrehoznunk a kiterjesztés létrehozásához; egy HTML-fájl, egy CSS-fájl, egy JavaScript-fájl és egy JSON-fájl.

A fájljainkat index.html, style.css, script.js és manifest.json néven hívtuk. A jegyzékfájlnak ezzel a névvel kell rendelkeznie ahhoz, hogy megfelelően működjön, de a többinek tetszőleges nevet adhat, amennyiben ennek megfelelően módosítja a kódot.

Ezeket a fájlokat ugyanabba a gyökérmappába kell helyeznie.

2. lépés: A Manifest fájl létrehozása

A jegyzékfájl minden Google Chrome-bővítményhez tartozik. Információkat ad a Chrome bővítményéről, miközben néhány alapvető beállítást is megad. Ennek a fájlnak tartalmaznia kell egy nevet, a verziószámot, a leírást és a manifest verziót. Engedélyeket és egy betöltődő műveletet is tartalmaztunk index.html mint a kiterjesztésnél megjelenő előugró ablak.

{
"név": "MakeUseOf.com automatikus keresés",
"változat": "1.0.0",
"leírás": "Keresőeszköz érdekes cikkek megtalálásához",
"manifeszt_verzió": 3,
"szerző": "Samuel Garbett",
"engedélyeket": ["tárolás", "deklaratívTartalom", "ActiveTab", "scriptelés"],
"host_permissions": [""],
"akció":{
"default_popup": "index.html",
"alapértelmezett_cím": "MUO automatikus keresés"
 }
}

3. lépés: A HTML és CSS felépítése

Mielőtt elkezdhetnénk írni a szkriptünket, létre kell hoznunk egy alapvető felhasználói felületet HTML és CSS használatával. Használhatja a CSS-könyvtár, mint a Bootstrap hogy ne hozzon létre sajátot, de csak néhány szabályra van szükségünk a bővítményünkhöz.

Az index.html fájlunk html, head és body címkéket tartalmaz. A head címke az oldal címét és a stíluslapunkra mutató hivatkozást tartalmaz, míg a törzs egy h1 címkét, egy gomb, amely a MakeUseOf.com webhelyre visz, és egy másik gomb, amelyet a forgatókönyv. A dokumentum végén található szkriptcímke tartalmazza a script.js fájlt.

<html>
<fej>
<cím>MUO automatikus keresés</title>
<meta karakterkészlet="utf-8">
<link rel="stíluslap" href="stílus.css">
</head>
<test>
<h1>MUO automatikus keresés</h1>
<a href="https://www.makeuseof.com/" cél="_üres"><gomb id="gombEgy">Nyissa meg a MakeUseOf.com webhelyet</button></a>
<gomb id="kettes gomb">Indítsa el a Véletlenszerű keresést</button>
</body>
<script src="script.js"></script>
</html>

A CSS-fájlunk még a HTML-nél is egyszerűbb, mindössze öt elem stílusát változtatja meg. Szabályaink vannak a html és a body címkékre, valamint a h1 címkékre és mindkét gombunkra.

html {
 szélesség: 400 képpont;
}
body {
 font-család: Helvetica, sans-serif;
}
h1 {
 szöveg igazítása: középre;
}
#buttonOne {
 határsugár: 0 képpont;
 szélesség: 100%;
 padding: 10px 0px;
}
#buttonTwo {
 határsugár: 0 képpont;
 szélesség: 100%;
 padding: 10px 0px;
 margó felső: 10 képpont;
}

4. lépés: A JavaScript létrehozása

A folyamat utolsó lépéseként itt az ideje elkészíteni a script.js fájlunkat.

A fájl első függvénye, az ún insertScript(), a másik funkció beillesztéséhez (autoSearch()) az aktuális oldalra. Ez lehetővé teszi számunkra, hogy manipuláljuk az oldalt, és használjuk azokat a keresési funkciókat, amelyek már megtalálhatók a MakeUseOf.com webhelyen.

Ezt egy eseményfigyelő követi, amely megvárja, amíg a Véletlenszerű keresés indítása gombra kattintanak, mielőtt meghívná a fentebb vizsgált függvényt.

A autoSearch() funkció egy kicsit bonyolultabb. A MUO webhelyén található 20 kategóriát tartalmazó tömbbel kezdődik, amely jó mintát ad, amelyből meríthetünk véletlenszerű kereséseink során. Ezt követően használjuk a Math.random() függvény 0 és 19 közötti véletlenszám generálásához, hogy kiválasszon egy bejegyzést a tömbünkből.

Ha a keresett kifejezést a kezünkben tartjuk, most egy gombnyomást kell szimulálnunk a MUO keresősáv megnyitásához. Először a Chrome fejlesztői konzol segítségével keressük meg a keresőgomb azonosítóját, majd ezt hozzáadjuk a JavaScript kódunkhoz a kattints() funkció.

A keresőgombhoz hasonlóan meg kell találnunk a megjelenő keresősáv azonosítóját is, amely lehetővé teszi az általunk kiválasztott véletlenszerűen kiválasztott keresőkifejezés beszúrását. Ha ez elkészült, egyszerűen el kell küldenie az űrlapot a kereséshez.

// Ez a függvény beilleszti az automatikus keresés funkciónkat az oldal kódjába
funkcióinsertScript() {
// Ez kiválasztja a fókuszált lapot a művelethez, és átadja az automatikus keresés funkciót
 chrome.tabs.query({aktív: igaz, aktuálisWindow: igaz}, tabulátorok => {
króm.scripting.executeScript({cél: {tabId: tabs[0].id}, funkció: automatikus keresés})
 })
// Ezzel bezárja a kiterjesztés előugró ablakát a webhely keresősávjának kiválasztásához
ablak.Bezárás();
}


// Ez egy eseményfigyelő, amely észleli a "Rajt Véletlen Keresés" gombot
document.getElementById('kettes gomb').addEventListener('kattintson', insertScript)


// Ez a függvény véletlenszerű témát választ ki egy tömbből és 
funkcióautomatikus keresés() {
// Ez egy tömb a keresési kifejezéseink tárolására
 const searchTerms = ["PC és mobil", "Életmód", "Hardver", "ablakok", "Mac",
"Linux", "Android", "alma", "Internet", "Biztonság",
"Programozás", "Szórakozás", "Termelékenység", "Karrier", "Kreatív",
"Szerencsejáték", "Közösségi média", "Okos otthon", "DIY", "Felülvizsgálat"];


// Ezzel egy véletlen számot generál 0 és 19 között
hagyja selectorNumber = Math.padló(Math.random() * 20);


// Ez a véletlen számot használja egy bejegyzés kiválasztásához a tömbből
hagyja kiválasztás = keresőkifejezések[választószám];


// Ez szimulálja a MUO webhely keresési ikonjára való kattintást
 document.getElementById("js-keresés").click();


// Ez beállítja a MUO webhely keresősávját változóként
var keresősáv = dokumentum.getElementById("js-search-input");


// Ezzel beszúrja a véletlenszerű keresőkifejezésünket a keresősávba
 searchBar.value = searchBar.value + kiválasztás;
// Ezzel a folyamat befejeződik a webhely űrlapjának aktiválásával
 document.getElementById("keresőforma2").Beküldés();
}

5. lépés: Fájlok hozzáadása a Chrome://extensions-hoz

Ezután itt az ideje, hogy hozzáadja az imént létrehozott fájlokat a Chrome-bővítmények oldalához. Miután ezt megtette, a bővítmény elérhető lesz a Chrome-ban, és minden alkalommal frissíti magát, amikor módosítja a fájlokat.

Nyissa meg a Google Chrome-ot, lépjen a chrome://extensions oldalra, és győződjön meg arról, hogy a Fejlesztői mód csúszkája a jobb felső sarokban be van kapcsolva.

Kattintson Betöltés Kicsomagolva a bal felső sarokban, majd válassza ki azt a mappát, amelybe mentette a kiterjesztés fájljait, és kattintson Mappa kiválasztása.

Most, hogy a bővítmény betöltődött, kattintson a jobb felső sarokban található puzzle darab ikonra, és rögzítse a bővítményt a fő tálcára a könnyebb hozzáférés érdekében.

Most már hozzá kell férnie a kész bővítményhez a böngészőjében. Érdemes szem előtt tartani, hogy ez a bővítmény csak a MUO webhelyen vagy olyan webhelyeken fog működni, amelyeknek a keresőgombja és sávja azonos azonosítóval rendelkezik.

Google Chrome-bővítmény készítése

Ez a cikk csak megkarcolja a saját Google Chrome-bővítményébe beépíthető lehetséges funkciókat. Érdemes megvizsgálni a saját ötleteidet, miután megtanultad az alapokat.

A Chrome-bővítmények segíthetnek a böngészés szintjének növelésében, de a biztonságos böngészés érdekében próbáljon távol maradni néhány ismert árnyékos Chrome-bővítménytől.

6 árnyékos Google Chrome-bővítmény, amelyet mielőbb el kell távolítania

Olvassa el a következőt

Ossza megCsipogOssza megEmail

Kapcsolódó témák

  • Programozás
  • Böngészőbővítmények
  • Webfejlesztés
  • JavaScript

A szerzőről

Samuel L. Garbett (44 cikk megjelent)

Samuel az Egyesült Királyságban élő technológiai író, aki minden barkácsolás iránti szenvedéllyel foglalkozik. A webfejlesztés és a 3D nyomtatás területén indított vállalkozást, valamint sokéves írói munkát Samuel egyedülálló betekintést nyújt a technológia világába. Főleg a barkácsolástechnikai projektekre összpontosítva nem szeret jobban, mint szórakoztató és izgalmas ötleteket megosztani, amelyeket otthon is kipróbálhat. A munkán kívül Samuelt általában biciklizni, számítógépes videojátékokat játszani, vagy kétségbeesetten próbál kommunikálni kedvenc rákjával.

További alkotások Samuel L. Garbett

Iratkozzon fel hírlevelünkre

Csatlakozzon hírlevelünkhöz műszaki tippekért, ismertetőkért, ingyenes e-könyvekért és exkluzív ajánlatokért!

Kattintson ide az előfizetéshez