Jeste li ikada bili nezadovoljni značajkama koje dolaze s vašim web preglednikom? Čak i sa satima pretraživanja po Google web-trgovini, nije uvijek jednostavno pritisnuti "preuzmi" kako biste poboljšali svoje iskustvo surfanja webom.

Ovdje dolaze proširenja preglednika. U ovom članku ćemo istražiti proces izrade vašeg vlastitog DIY proširenja za Google Chrome od nule.

Što je proširenje za Google Chrome?

Moderna web preglednicima kao što je Google Chrome dolaze s nizom značajki koje ih čine jednostavnim za korištenje i mogu zadovoljiti potrebe većine korisnika. Međutim, proširenje ovih značajki zaliha može donijeti mnoštvo različitih prednosti. To je razlog zašto programeri preglednika obično omogućuju izradu proširenja, dodataka i dodataka za njih.

Google Chrome nudi ovu značajku koja svakome s iskustvom u razvoju weba olakšava izradu vlastitih proširenja za Chrome. Možete napraviti proširenje koristeći HTML, JavaScript i CSS, baš kao i mnoge web stranice.

Za razliku od web-mjesta, proširenja se mogu izvoditi u pozadini dok pregledavate, ponekad čak i u interakciji s web-lokacijama koje posjećujete.

instagram viewer

Što će učiniti naše proširenje za Google Chrome?

Napravit ćemo jednostavno proširenje za Chrome koje će vam omogućiti da posjetite Internet stranicu Make Use Of i izvršite nasumično pretraživanje na temelju kategorija članaka pronađenih na web-mjestu. Ovo je brz i jednostavan projekt, ali ćete ipak puno naučiti.

Naučit ćete kako

  • Izradite proširenje za Google Chrome
  • Umetnite prilagođeni kod na web-stranice pomoću proširenja za Chrome
  • Izradite slušatelje događaja i simulirajte klikove
  • Generirajte slučajne brojeve
  • Rad s nizovima i varijablama

Izrada vlastitog DIY proširenja za Chrome

Google je iznenađujuće olakšao izradu vlastitog Chrome proširenja, tako da neće proći dugo prije nego što nešto počne raditi. Slijeđenje koraka u nastavku trajat će samo 10 do 15 minuta, ali preporučujemo da eksperimentirate i sa svojim kodom.

Korak 1: Stvaranje datoteka

Možete pohraniti svoje proširenje na vlastitom lokalnom računalu kada ga ne planirate distribuirati. Moramo stvoriti samo četiri različite datoteke za stvaranje našeg proširenja; HTML datoteku, CSS datoteku, JavaScript datoteku i JSON datoteku.

Naše smo datoteke nazvali index.html, style.css, script.js i manifest.json. Datoteka manifesta mora imati ovo ime da bi ispravno radila, ali ostalima možete dati imena koja želite, sve dok u skladu s tim promijenite svoj kod.

Te datoteke trebate smjestiti u istu korijensku mapu.

Korak 2: Izrada datoteke manifesta

Datoteka manifesta dolazi sa svakim proširenjem za Google Chrome. Pruža informacije o proširenju za Chrome, a također postavlja neke osnovne postavke. Ova datoteka mora sadržavati naziv, broj verzije, opis i verziju manifesta. Također smo uključili dopuštenja i radnju koja se učitava index.html kao skočni prozor koji se pojavljuje za proširenje.

{
"Ime": "Automatizirano pretraživanje MakeUseOf.com",
"verzija": "1.0.0",
"opis": "Alat za pretraživanje za pronalaženje zanimljivih članaka",
"manifest_verzija": 3,
"Autor": "Samuel Garbett",
"dopuštenja": ["skladištenje", "deklarativni sadržaj", "aktivna kartica", "skriptiranje"],
"host_permissions": [""],
"akcijski":{
"zadani_skočni prozor": "index.html",
"zadani_naslov": "MUO Auto Search"
 }
}

Korak 3: Izrada HTML-a i CSS-a

Prije nego što počnemo pisati našu skriptu, moramo stvoriti osnovno korisničko sučelje koristeći HTML i CSS. Možete koristiti a CSS biblioteka poput Bootstrapa kako bismo izbjegli stvaranje vlastitog, ali trebamo samo nekoliko pravila za naše proširenje.

Naša datoteka index.html sadrži oznake html, head i body. Oznaka head sadrži naslov stranice i vezu na našu tablicu stilova, dok je tijelo dom za h1 oznaku, gumb koji vas vodi na MakeUseOf.com i drugi gumb koji ćemo koristiti kao okidač za a skripta. Oznaka skripte odmah na kraju dokumenta uključuje script.js datoteka.

<html>
<glava>
<titula>MUO Auto Search</title>
<meta charset="utf-8">
<veza rel="tablica stilova" href="style.css">
</head>
<tijelo>
<h1>MUO Auto Search</h1>
<a href="https://www.makeuseof.com/" cilj="_prazan"><gumb id="gumb Jedan">Idite na MakeUseOf.com</button></a>
<gumb id="gumbDva">Pokrenite nasumično pretraživanje</button>
</body>
<skripta src="script.js"></script>
</html>

Naša CSS datoteka čak je jednostavnija od našeg HTML-a, mijenja stil samo pet elemenata. Imamo pravila za naše html i body oznake, kao i za h1 oznake i oba naša gumba.

html {
 širina: 400px;
}
tijelo {
 font-family: Helvetica, sans-serif;
}
h1 {
 poravnavanje teksta: središte;
}
#buttonOne {
 radijus granice: 0px;
 širina: 100%;
 padding: 10px 0px;
}
#buttonTwo {
 radijus granice: 0px;
 širina: 100%;
 padding: 10px 0px;
 margin-top: 10px;
}

Korak 4: Izgradnja JavaScripta

Kao posljednji korak u ovom procesu, vrijeme je za izradu naše datoteke script.js.

Prva funkcija u ovoj datoteci, tzv insertScript(), je na mjestu za umetanje druge funkcije (autoSearch()) na trenutnu stranicu. To nam omogućuje da manipuliramo stranicom i koristimo značajke pretraživanja koje su već prisutne na stranici MakeUseOf.com.

Nakon toga slijedi slušatelj događaja koji čeka dok se ne klikne gumb Pokreni nasumično pretraživanje prije nego što pozove funkciju koju smo prethodno istražili.

The autoSearch() funkcija je malo kompliciranija. Započinje nizom koji sadrži 20 kategorija na web-mjestu MUO-a, što nam daje dobar uzorak za izvlačenje prilikom nasumičnih pretraživanja. Slijedom toga koristimo se Math.random() funkcija za generiranje slučajnog broja između 0 i 19 za odabir unosa iz našeg niza.

S našim pojmom za pretraživanje u ruci, sada moramo simulirati klik na gumb kako bismo otvorili traku za pretraživanje MUO. Prvo koristimo konzolu za razvojne programere Chrome kako bismo pronašli ID gumba za pretraživanje, a zatim ga dodali u naš JavaScript kod pomoću klik() funkcija.

Poput gumba za pretraživanje, također moramo pronaći ID trake za pretraživanje koja se pojavljuje, što nam omogućuje da umetnemo nasumični pojam za pretraživanje koji smo odabrali. Kada je ovo dovršeno, jednostavno je podnošenje obrasca za pretraživanje.

// Ova funkcija umeće našu funkciju autoSearch u kod stranice
funkcijainsertScript() {
// Ovo odabire fokusiranu karticu za operaciju i prosljeđuje funkciju autoSearch
 chrome.tabs.query({aktivan: pravi, trenutni prozor: pravi}, kartice => {
krom.skriptiranje.executeScript({cilj: {tabId: tabs[0].iskaznica}, funkcija: autoSearch})
 })
// Ovo zatvara skočni prozor proširenja za odabir trake za pretraživanje web stranice
prozor.Zatvoriti();
}


// Ovo je slušatelj događaja koji detektira klikove na naš "Početak Slučajno traži" dugme
document.getElementById('gumbDva').addEventListener('klik', insertScript)


// Ova funkcija odabire slučajnu temu iz niza i 
funkcijaautoSearch() {
// Ovo je niz za pohranjivanje naših pojmova za pretraživanje
 const searchTerms = ["PC i mobitel", "Način života", "Hardver", "Windows", "Mac",
"Linux", "Android", "Jabuka", "Internet", "Sigurnost",
"Programiranje", "Zabava", "Produktivnost", "Karijera", "Kreativno",
"Igranje igara", "Društveni mediji", "Pametna kuća", "DIY", "Pregled"];


// Ovo generira slučajni broj između 0 i 19
neka selektorBroj = matematika.kat(matematika.random() * 20);


// Ovo koristi slučajni broj za odabir unosa iz niza
neka odabir = searchTerms[broj birača];


// Ovo simulira klik na ikonu pretraživanja web stranice MUO
 document.getElementById("js-pretraga").klik();


// Ovo postavlja traku za pretraživanje web stranice MUO kao varijablu
var traka za pretraživanje = dokument.getElementById("js-search-input");


// Ovo umeće naš slučajni pojam za pretraživanje u traku za pretraživanje
 searchBar.value = searchBar.value + odabir;
// Ovo završava proces aktivacijom obrasca web stranice
 document.getElementById("obrazac za pretraživanje2").podnijeti();
}

Korak 5: dodavanje vaših datoteka u Chrome://extensions

Zatim, vrijeme je da dodate datoteke koje ste upravo stvorili na stranicu proširenja za Chrome. Nakon što to učinite, proširenje će biti dostupno u Chromeu i ažurirat će se svaki put kada unesete promjene u svoje datoteke.

Otvorite Google Chrome, idite na chrome://extensions i provjerite je li klizač Načina razvojnog programera u gornjem desnom kutu uključen.

Klik Učitajte raspakirano u gornjem lijevom kutu, zatim odaberite mapu u koju ste spremili datoteke proširenja i kliknite Odaberite Mapa.

Sada kada je vaše proširenje učitano, možete kliknuti ikonu komada slagalice u gornjem desnom kutu i prikvačiti svoje proširenje na glavnu traku zadataka radi lakšeg pristupa.

Sada biste trebali moći pristupiti dovršenom proširenju unutar svog preglednika. Vrijedno je imati na umu da će ovo proširenje raditi samo na web-mjestu MUO-a ili web-mjestima s istim ID-om za svoj gumb i traku za pretraživanje.

Izrada proširenja za Google Chrome

Ovaj članak samo zagrebe površinu mogućih značajki koje biste mogli ugraditi u svoje proširenje za Google Chrome. Vrijedno je istražiti vlastite ideje nakon što naučite osnove.

Chromeova proširenja mogu vam pomoći da poboljšate svoje pregledavanje, ali pokušajte se kloniti nekih poznatih sumnjivih Chromeovih proširenja radi sigurnog i sigurnog pregledavanja.

6 sumnjivih proširenja za Google Chrome koja biste trebali deinstalirati što je prije moguće

Pročitajte dalje

UdioCvrkutUdioE-mail

Povezane teme

  • Programiranje
  • Proširenja preglednika
  • Web razvoj
  • JavaScript

O autoru

Samuel L. Garbett (Objavljeno 44 članka)

Samuel je pisac o tehnologiji sa sjedištem u Ujedinjenom Kraljevstvu sa strašću za sve stvari DIY. Nakon što je pokrenuo poslove na području web razvoja i 3D ispisa, uz dugogodišnji rad kao pisac, Samuel nudi jedinstven uvid u svijet tehnologije. Usredotočujući se uglavnom na DIY tehničke projekte, ne voli ništa više od dijeljenja zabavnih i uzbudljivih ideja koje možete isprobati kod kuće. Izvan posla, Samuela se obično može naći kako vozi bicikl, igra PC video igrice ili očajnički pokušava komunicirati sa svojim rakovim ljubimcem.

Više od Samuela L. Garbett

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu