Kas olete kunagi leidnud, et pole rahul oma veebibrauseri funktsioonidega? Isegi kui olete Google'i veebipoes tunde otsinud, ei ole veebis surfamise kogemuse parandamiseks alati lihtne alla laadida.

Siin tulevad kasutusele brauseri laiendused. Selles artiklis uurime omaenda Google Chrome'i laienduse loomise protsessi nullist.

Mis on Google Chrome'i laiendus?

Kaasaegne veebibrauserid nagu Google Chrome kaasas hulga funktsioone, mis muudavad nende kasutamise lihtsaks ja vastavad enamiku kasutajate vajadustele. Nende varufunktsioonide laiendamine võib aga kaasa tuua palju erinevaid eeliseid. Seetõttu võimaldavad brauseri arendajad tavaliselt nende jaoks laiendusi, lisandmooduleid ja pistikprogramme luua.

Google Chrome pakub seda funktsiooni, muutes veebiarenduse kogemustega inimestel hõlpsaks oma Chrome'i laienduste loomise. Saate teha laienduse HTML-i, JavaScripti ja CSS-i abil, nagu paljudel veebisaitidel.

Erinevalt veebisaidist võivad laiendused sirvimise ajal taustal töötada, mõnikord isegi külastatavate saitidega suheldes.

instagram viewer

Mida teeb meie Google Chrome'i laiendus?

Ehitame lihtsa Chrome'i laienduse, mis võimaldab teil külastada veebisaiti Make Use Of ja teha juhuslikku otsingut saidilt leitud artiklikategooriate põhjal. See on kiire ja lihtne projekt, kuid saate siiski palju õppida.

Õpid, kuidas

  • Looge Google Chrome'i laiendus
  • Sisestage Chrome'i laienduse abil veebilehtedele kohandatud kood
  • Looge sündmuste kuulajaid ja simuleerige klikke
  • Loo juhuslikud arvud
  • Töötage massiivide ja muutujatega

Looge ise ise Chrome'i laiendus

Google on teinud enda loomise üllatavalt lihtsaks Chrome'i laiendused, nii et ei lähe kaua aega, enne kui midagi töötab. Alltoodud sammude järgimine võtab aega vaid 10–15 minutit, kuid soovitame teil katsetada ka oma koodiga.

1. samm: failide loomine

Saate oma laienduse salvestada oma kohalikku arvutisse, kui te ei plaani seda levitada. Laienduse loomiseks peame looma vaid neli erinevat faili; HTML-fail, CSS-fail, JavaScript-fail ja JSON-fail.

Nimetasime oma faile index.html, style.css, script.js ja manifest.json. Manifestifailil peab olema see nimi, et see korralikult töötaks, kuid võite teistele anda mis tahes nime, kui muudate oma koodi vastavalt.

Peaksite need failid paigutama samasse juurkausta.

2. samm: koostage manifestifail

Manifestifail on kaasas iga Google Chrome'i laiendusega. See annab teavet Chrome'i laienduse kohta, seades samas paika ka mõned põhiseaded. See fail peab sisaldama nime, versiooninumbrit, kirjeldust ja manifesti versiooni. Lisasime ka load ja laadimistoimingu index.html laienduse jaoks kuvatava hüpikaknana.

{
"nimi": "MakeUseOf.com automatiseeritud otsing",
"versioon": "1.0.0",
"kirjeldus": "Otsingutööriist huvitavate artiklite leidmiseks",
"manifest_version": 3,
"autor": "Samuel Garbett",
"load": ["ladustamine", "deklaratiivneSisu", "ActiveTab", "skriptimine"],
"host_permissions": [""],
"tegevust":{
"vaikimisi_hüpik": "index.html",
"vaikimisi_pealkiri": "MUO automaatne otsing"
 }
}

3. samm: HTML-i ja CSS-i loomine

Enne skripti kirjutamise alustamist peame looma HTML-i ja CSS-i abil lihtsa kasutajaliidese. Võite kasutada a CSS-i teek nagu Bootstrap et vältida oma loomist, kuid meie laienduse jaoks vajame vaid paari reeglit.

Meie fail index.html sisaldab html-, head- ja body-märgendeid. Head silt sisaldab lehe pealkirja ja linki meie stiilitabelile, samas kui kehas on h1 silt, nupp, mis viib teid saidile MakeUseOf.com, ja teine ​​nupp, mida kasutame a stsenaarium. Dokumendi lõpus olev skriptimärgend sisaldab script.js faili.

<html>
<pea>
<pealkiri>MUO automaatne otsing</title>
<metamärgistik="utf-8">
<link rel="stiilileht" href="stiil.css">
</head>
<keha>
<h1>MUO automaatne otsing</h1>
<a href="https://www.makeuseof.com/" sihtmärk="_tühi"><nupu ID="nuppOne">Minge saidile MakeUseOf.com</button></a>
<nupu ID="nuppKaks">Käivitage juhuslik otsing</button>
</body>
<skript src="script.js"></script>
</html>

Meie CSS-fail on veelgi lihtsam kui meie HTML, muutes vaid viie elemendi stiili. Meil on reeglid oma html- ja kehamärgendite, samuti h1-märgendite ja mõlema nuppude jaoks.

html {
 laius: 400 pikslit;
}
keha {
 fondiperekond: Helvetica, sans-serif;
}
h1 {
 teksti joondamine: keskel;
}
#buttonOne {
 piiri raadius: 0px;
 laius: 100%;
 polsterdus: 10px 0px;
}
#buttonKaks {
 piiri raadius: 0px;
 laius: 100%;
 polsterdus: 10px 0px;
 ääris-ülemine: 10 pikslit;
}

4. samm: JavaScripti loomine

Selle protsessi viimase sammuna on aeg luua fail script.js.

Selle faili esimene funktsioon nimega insertScript(), on paigas teise funktsiooni sisestamiseks (automaatne otsing ()) praegusele lehele. See võimaldab meil lehte manipuleerida ja kasutada otsingufunktsioone, mis saidil MakeUseOf.com juba olemas on.

Sellele järgneb sündmuste kuulaja, mis ootab, kuni klõpsatakse nupul Alusta juhuslikku otsingut, enne kui helistab ülalpool uuritud funktsioonile.

The automaatne otsing () funktsioon on veidi keerulisem. See algab massiiviga, mis sisaldab 20 kategooriat MUO veebisaidil, andes meile juhuslike otsingute tegemisel hea näidise. Pärast seda kasutame Math.random() funktsioon juhusliku arvu genereerimiseks vahemikus 0 kuni 19, et valida meie massiivist kirje.

Kui meie otsingutermin on käes, peame nüüd MUO otsinguriba avamiseks simuleerima nupuklõpsu. Esmalt kasutame otsingunupu ID leidmiseks Chrome'i arendajakonsooli ja seejärel lisame selle oma JavaScripti koodi kliki () funktsiooni.

Nagu otsingunupp, peame leidma ka kuvatava otsinguriba ID, mis võimaldab meil sisestada valitud juhusliku otsingusõna. Kui see on täidetud, on lihtne otsingu tegemiseks vorm esitada.

// See funktsioon lisab meie automaatotsingu funktsiooni lehe koodi
funktsiooniinsertScript() {
// See valib toimingu jaoks fokuseeritud vahekaardi ja edastab automaatotsingu funktsiooni
 chrome.tabs.query({aktiivne: tõsi, praegune aken: tõsi}, tabs => {
kroomitud.skriptimine.executeScript({sihtmärk: {tabId: tabs[0].id}, funktsiooni: automaatne otsing})
 })
// See suleb laienduse hüpikakna veebisaidi otsinguriba valimiseks
aken.Sulge();
}


// See on sündmuste kuulaja, mis tuvastab klõpsud meie "Alusta Juhuslik Otsing" nuppu
document.getElementById('nuppKaks').addEventListener('klõpsa', insertScript)


// See funktsioon valib massiivist juhusliku teema ja 
funktsiooniautomaatne otsing() {
// See on massiiv meie otsinguterminite salvestamiseks
 const searchTerms = ["Arvuti ja mobiil", "Elustiil", "Riistvara", "Windows", "Mac",
"Linux", "Android", "Apple", "Internet", "Turvalisus",
"Programmeerimine", "Meelelahutus", "Tootlikkus", "Karjäär", "Loominguline",
"Mängimine", "Sotsiaalmeedia", "Tark kodu", "DIY", "Ülevaade"];


// See genereerib juhusliku arvu vahemikus 0 kuni 19
lase valijaNumber = Matemaatika.floor(Matemaatika.random() * 20);


// See kasutab massiivist kirje valimiseks juhuslikku arvu
lase valik = otsinguterminid[valijaNumber];


// See simuleerib klõpsamist MUO veebisaidi otsingu ikoonil
 document.getElementById("js-otsing".click();


// See määrab muutujaks MUO veebisaidi otsinguriba
var otsinguriba = dokument.getElementById("js-search-input");


// See lisab meie juhusliku otsingusõna otsinguribale
 searchBar.value = searchBar.value + valik;
// See lõpetab protsessi veebisaidi vormi aktiveerimisega
 document.getElementById("otsinguvorm2").Esita();
}

5. toiming: failide lisamine Chrome://extensions

Järgmiseks on aeg lisada äsja loodud failid Chrome'i laienduste lehele. Kui olete seda teinud, on laiendus Chrome'is juurdepääsetav ja see värskendab ennast iga kord, kui oma faile muudate.

Avage Google Chrome, minge aadressile chrome://extensions ja veenduge, et paremas ülanurgas olev arendajarežiimi liugur oleks sisse lülitatud.

Klõpsake Laadige lahti vasakus ülanurgas, seejärel valige kaust, kuhu olete oma laiendusfailid salvestanud, ja klõpsake nuppu Valige kaust.

Nüüd, kui teie laiendus on laaditud, võite klõpsata paremas ülanurgas pusletüki ikoonil ja kinnitada laiendus põhitegumiribale, et hõlbustada juurdepääsu.

Nüüd peaks teil olema juurdepääs lõpetatud laiendusele oma brauseris. Tasub meeles pidada, et see laiendus töötab ainult MUO veebisaidil või veebisaitidel, millel on sama otsingunupu ja -riba ID.

Google Chrome'i laienduse loomine

See artikkel kriibib ainult võimalikke funktsioone, mida saate oma Google Chrome'i laiendusse ehitada. Kui olete põhitõed selgeks õppinud, tasub oma ideid uurida.

Chrome'i laiendused võivad aidata teil sirvimise taset tõsta, kuid proovige ohutuks ja turvaliseks sirvimiseks eemale hoida mõnest teadaolevast varjulisest Chrome'i laiendusest.

6 varjulist Google Chrome'i laiendust, mille peaksite võimalikult kiiresti desinstallima

Loe edasi

JagaSäutsJagaMeil

Seotud teemad

  • Programmeerimine
  • Brauseri laiendused
  • Veebiarendus
  • JavaScript

Autori kohta

Samuel L. Garbett (Avaldatud 44 artiklit)

Samuel on Ühendkuningriigis asuv tehnoloogiakirjanik, kelle kirg on kõik isetegemine. Alustanud äritegevusega veebiarenduse ja 3D-printimise vallas ning töötanud aastaid kirjanikuna, pakub Samuel ainulaadset sissevaadet tehnoloogiamaailma. Keskendudes peamiselt isetegemise tehnoloogiaprojektidele, ei armasta ta muud kui lõbusate ja põnevate ideede jagamist, mida saate kodus proovida. Väljaspool tööd võib Samueli tavaliselt leida jalgrattaga sõitmas, arvutivideomänge mängimas või meeleheitlikult oma lemmiklooma krabiga suhelda.

Veel Samuel L. Garbett

Liituge meie uudiskirjaga

Liituge meie uudiskirjaga tehniliste näpunäidete, arvustuste, tasuta e-raamatute ja eksklusiivsete pakkumiste saamiseks!

Tellimiseks klõpsake siin