Ste že kdaj bili nezadovoljni s funkcijami, ki so priložene vašemu spletnemu brskalniku? Tudi če imate več ur brskanja po spletni trgovini Google, ni vedno preprosto pritisniti »prenos«, da bi izboljšali izkušnjo brskanja po spletu.

Tu pridejo na vrsto razširitve brskalnika. V tem članku bomo raziskali postopek izdelave vaše lastne razširitve za Google Chrome iz nič.

Kaj je razširitev za Google Chrome?

moderno spletne brskalnike, kot je Google Chrome imajo vrsto funkcij, zaradi katerih so enostavne za uporabo in lahko zadovoljijo potrebe večine uporabnikov. Razširitev teh funkcij zalog pa lahko prinese številne različne prednosti. Zato razvijalci brskalnikov običajno omogočajo ustvarjanje razširitev, dodatkov in vtičnikov zanje.

Google Chrome ponuja to funkcijo, ki vsem, ki imajo izkušnje s spletnim razvojem, olajša ustvarjanje lastnih razširitev za Chrome. Razširitev lahko naredite z uporabo HTML, JavaScript in CSS, tako kot številna spletna mesta.

Za razliko od spletnega mesta se razširitve lahko med brskanjem izvajajo v ozadju in včasih celo komunicirajo s spletnimi mesti, ki jih obiščete.

Kaj bo naredila naša razširitev za Google Chrome?

Zgradili bomo preprosto razširitev za Chrome, ki vam bo omogočila obisk spletnega mesta Make Use Of in naključno iskanje glede na kategorije člankov, ki jih najdete na spletnem mestu. To je hiter in enostaven projekt, vendar se boste vseeno veliko naučili.

Naučili se boste, kako

  • Ustvarite razširitev za Google Chrome
  • Vstavite kodo po meri v spletne strani z razširitvijo za Chrome
  • Ustvarite poslušalce dogodkov in simulirajte klike
  • Ustvari naključna števila
  • Delo z nizi in spremenljivkami

Izdelava lastne razširitve za Chrome z lastnimi rokami

Google je presenetljivo olajšal ustvarjanje lastnega Razširitve za Chrome, tako da ne bo trajalo dolgo, preden boste nekaj delali. Sledenje spodnjim korakom bo trajalo le 10 do 15 minut, vendar vam priporočamo, da eksperimentirate tudi z lastno kodo.

1. korak: Ustvarjanje datotek

Svojo razširitev lahko shranite na svoj lokalni računalnik, ko je ne nameravate distribuirati. Ustvariti moramo le štiri različne datoteke, da ustvarimo svojo razširitev; datoteko HTML, datoteko CSS, datoteko JavaScript in datoteko JSON.

Naše datoteke smo poimenovali index.html, style.css, script.js in manifest.json. Datoteka manifesta mora imeti to ime, da deluje pravilno, drugim pa lahko daste poljubna imena, če ustrezno spremenite svojo kodo.

Te datoteke bi morali postaviti v isto korensko mapo.

2. korak: izdelava datoteke manifesta

Datoteka manifesta je priložena vsaki razširitvi za Google Chrome. Zagotavlja informacije o razširitvi za Chrome, hkrati pa postavlja nekatere osnovne nastavitve. Ta datoteka mora vsebovati ime, številko različice, opis in različico manifesta. Vključili smo tudi dovoljenja in dejanje, ki se naloži index.html kot pojavno okno, ki se prikaže za razširitev.

{
"ime": "Samodejno iskanje MakeUseOf.com",
"različica": "1.0.0",
"opis": "Iskalno orodje za iskanje zanimivih člankov",
"manifest_version": 3,
"avtor": "Samuel Garbett",
"dovoljenja": ["skladiščenje", "declarativeContent", "aktivni zavihek", "skriptiranje"],
"host_permissions": [""],
"dejanje":{
"privzeto_pojavno okno": "index.html",
"privzeti_naslov": "Samodejno iskanje MUO"
 }
}

3. korak: Izdelava HTML in CSS

Preden lahko začnemo pisati naš skript, moramo ustvariti osnovni uporabniški vmesnik z uporabo HTML in CSS. Lahko uporabite a Knjižnica CSS, kot je Bootstrap da bi se izognili ustvarjanju lastnega, vendar potrebujemo le nekaj pravil za našo razširitev.

Naša datoteka index.html vsebuje oznake html, head in body. Oznaka head vsebuje naslov strani in povezavo do naše slogovne tabele, medtem ko je telo dom oznake h1, gumb, ki vas popelje na MakeUseOf.com, in drugi gumb, ki ga bomo uporabili kot sprožilec za a skripta. Oznaka skripta na koncu dokumenta vključuje script.js mapa.

<html>
<glavo>
<naslov>Samodejno iskanje MUO</title>
<meta charset="utf-8">
<povezava rel="slogovna lista" href="style.css">
</head>
<telo>
<h1>Samodejno iskanje MUO</h1>
<a href="https://www.makeuseof.com/" cilj ="_prazno"><id gumba ="gumb One">Pojdite na MakeUseOf.com</button></a>
<id gumba ="gumbDva">Začnite naključno iskanje</button>
</body>
<skript src="script.js"></script>
</html>

Naša datoteka CSS je še enostavnejša od našega HTML, saj spreminja slog samo petih elementov. Imamo pravila za naše oznake html in body, kot tudi za oznake h1 in oba naša gumba.

html {
 širina: 400px;
}
telo {
 družina pisav: Helvetica, sans-serif;
}
h1 {
 poravnava besedila: središče;
}
#buttonOne {
 radij obrobe: 0px;
 širina: 100 %;
 padding: 10px 0px;
}
#buttonTwo {
 radij obrobe: 0px;
 širina: 100 %;
 padding: 10px 0px;
 rob-vrh: 10px;
}

4. korak: Izdelava JavaScript

Kot zadnji korak v tem procesu je čas za izdelavo naše datoteke script.js.

Prva funkcija v tej datoteki, imenovana insertScript(), je na mestu za vstavljanje druge funkcije (samodejno iskanje ()) na trenutno stran. To nam omogoča, da manipuliramo s stranjo in uporabljamo funkcije iskanja, ki so že prisotne na spletnem mestu MakeUseOf.com.

Temu sledi poslušalec dogodkov, ki počaka, da se klikne gumb Začni naključno iskanje, preden pokliče funkcijo, ki smo jo raziskali zgoraj.

The samodejno iskanje () funkcija je malo bolj zapletena. Začne se z nizom, ki vsebuje 20 kategorij na spletnem mestu MUO, kar nam daje dober vzorec, iz katerega lahko črpamo pri naključnem iskanju. Po tem uporabljamo Math.random() funkcija za generiranje naključnega števila med 0 in 19, da izberemo vnos iz našega niza.

Z našim iskalnim izrazom v roki moramo zdaj simulirati klik gumba, da odpremo iskalno vrstico MUO. Najprej uporabimo konzolo za razvijalce za Chrome, da poiščemo ID gumba za iskanje, nato pa to dodamo naši kodi JavaScript z klik () funkcijo.

Tako kot gumb za iskanje moramo tudi mi najti ID iskalne vrstice, ki se prikaže, kar nam omogoča, da vstavimo naključni iskalni izraz, ki smo ga izbrali. Ko je to dokončano, je preprosto oddati obrazec za iskanje.

// Ta funkcija vstavi našo funkcijo samodejnega iskanja v kodo strani
funkcijoinsertScript() {
// To izbere osredotočen zavihek za operacijo in prenese funkcijo samodejnega iskanja
 chrome.tabs.query({aktiven: prav, trenutno okno: prav}, zavihki => {
krom.skriptiranje.executeScript({cilj: {tabId: tabs[0].id}, funkcijo: samodejno iskanje})
 })
// S tem zaprete pojavno okno razširitve za izbiro iskalne vrstice spletnega mesta
okno.close();
}


// To je poslušalec dogodkov, ki zazna klike na naš "Začni Naključen Iskanje"gumb
document.getElementById('gumbDva').addEventListener('kliknite', insertScript)


// Ta funkcija izbere naključno temo iz matrike in 
funkcijosamodejno iskanje() {
// To je matrika za shranjevanje naših iskalnih izrazov
 const searchTerms = ["PC in mobilni telefon", "Življenjski slog", "Strojna oprema", "Windows", "Mac",
"Linux", "Android", "Apple", "internet", "Varnost",
"Programiranje", "Zabava", "Produktivnost", "Kariera", "Kreativno",
"Igranje iger", "Socialni mediji", "Pametni dom", "DIY", "Pregled"];


// To ustvari naključno število med 0 in 19
pustiti izbirna številka = matematika.nadstropje(matematika.naključen() * 20);


// To uporablja naključno število za izbiro vnosa iz matrike
pustiti izbor = iskalni izrazi[številka izbirnika];


// To simulira klik na ikono za iskanje po spletnem mestu MUO
 document.getElementById("js-iskanje").klikni();


// To nastavi iskalno vrstico spletnega mesta MUO kot spremenljivko
var iskalna vrstica = dokument.getElementById("js-search-input");


// To vstavi naš naključni iskalni izraz v iskalno vrstico
 searchBar.value = searchBar.value + izbor;
// S tem se postopek zaključi z aktiviranjem spletnega obrazca
 document.getElementById("iskalnik 2").pošlji();
}

5. korak: Dodajanje datotek v Chrome://extensions

Nato je čas, da datoteke, ki ste jih pravkar ustvarili, dodate na stran z razširitvami za Chrome. Ko to storite, bo razširitev dostopna v Chromu in se bo posodobila vsakič, ko boste spremenili svoje datoteke.

Odprite Google Chrome, pojdite na chrome://extensions in se prepričajte, da je drsnik za način razvijalca v zgornjem desnem kotu vklopljen.

Kliknite Naloži razpakirano v zgornjem levem kotu, nato izberite mapo, v katero ste shranili razširitvene datoteke, in kliknite Izberite Mapa.

Zdaj, ko je vaša razširitev naložena, lahko kliknete ikono koščka sestavljanke v zgornjem desnem kotu in razširitev pripnete na glavno opravilno vrstico za lažji dostop.

Zdaj bi morali imeti možnost dostopa do dokončane razširitve v vašem brskalniku. Upoštevati je treba, da bo ta razširitev delovala samo na spletnem mestu MUO ali spletnih mestih z enakim ID-jem za iskalni gumb in vrstico.

Izdelava razširitve za Google Chrome

Ta članek je le površje možnih funkcij, ki bi jih lahko vgradili v svojo razširitev za Google Chrome. Ko se naučite osnov, je vredno raziskati svoje ideje.

Razširitve za Chrome vam lahko pomagajo izboljšati brskanje, vendar se za varno in varno brskanje izogibajte nekaterim znanim senčnim razširitvam za Chrome.

6 senčnih razširitev za Google Chrome, ki jih morate čim prej odstraniti

Preberite Naprej

DelitiTweetDelitiE-naslov

Povezane teme

  • Programiranje
  • Razširitve brskalnika
  • Spletni razvoj
  • JavaScript

O avtorju

Samuel L. Garbett (44 objavljenih člankov)

Samuel je pisatelj o tehnologiji s sedežem v Združenem kraljestvu s strastjo za vse stvari, ki jih naredim sam. Z ustanovitvijo podjetij na področju spletnega razvoja in 3D tiskanja ter dolgoletnega pisanja, Samuel ponuja edinstven vpogled v svet tehnologije. Osredotoča se predvsem na tehnološke projekte DIY in ne ljubi nič drugega kot deljenje zabavnih in vznemirljivih idej, ki jih lahko preizkusite doma. Zunaj službe je Samuela običajno mogoče najti, da kolesari, igra računalniške videoigre ali obupno poskuša komunicirati s svojim hišnim rakom.

Več od Samuel L. Garbett

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e-knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite