Ar kada nors buvote nepatenkinti funkcijomis, kurios pateikiamos jūsų žiniatinklio naršyklėje? Net ir valandomis naršant „Google“ internetinėje parduotuvėje, ne visada paprasta paspausti „Atsisiųsti“, kad pagerintumėte naršymo internete patirtį.

Čia atsiranda naršyklės plėtiniai. Šiame straipsnyje mes ištirsime savo paties „Google Chrome“ plėtinio „pasidaryk pats“ kūrimo procesą nuo nulio.

Kas yra „Google Chrome“ plėtinys?

Modernus žiniatinklio naršyklės, pvz., Google Chrome yra su daugybe funkcijų, kurios palengvina naudojimą ir gali patenkinti daugumos vartotojų poreikius. Tačiau šių atsargų funkcijų išplėtimas gali turėti daug skirtingų privalumų. Štai kodėl naršyklių kūrėjai dažniausiai suteikia galimybę kurti joms plėtinius, priedus ir papildinius.

„Google Chrome“ siūlo šią funkciją, todėl kiekvienas, turintis žiniatinklio kūrimo patirties, gali lengvai sukurti savo „Chrome“ plėtinius. Galite sukurti plėtinį naudodami HTML, JavaScript ir CSS, kaip ir daugelyje svetainių.

Skirtingai nuo svetainės, plėtiniai gali veikti fone, kol naršote, kartais net sąveikaujant su lankomomis svetainėmis.

Ką veiks mūsų „Google Chrome“ plėtinys?

Sukursime paprastą „Chrome“ plėtinį, kuris leis apsilankyti „Make Use Of“ svetainėje ir atlikti atsitiktinę paiešką pagal svetainėje rastas straipsnių kategorijas. Tai greitas ir lengvas projektas, bet jūs vis tiek daug išmoksite.

Sužinosite, kaip

  • Sukurkite „Google Chrome“ plėtinį
  • Į tinklalapius įterpkite tinkintą kodą naudodami „Chrome“ plėtinį
  • Kurkite įvykių klausytojus ir imituokite paspaudimus
  • Sukurkite atsitiktinius skaičius
  • Darbas su masyvais ir kintamaisiais

Sukurkite savo „pasidaryk pats“ „Chrome“ plėtinį

„Google“ stebėtinai lengva sukurti savo „Chrome“ plėtiniai, todėl ilgai neužtruks, kol ką nors veiks. Toliau pateiktų veiksmų atlikimas užtruks tik 10–15 minučių, tačiau rekomenduojame eksperimentuoti ir su savo kodu.

1 veiksmas: failų kūrimas

Galite saugoti plėtinį savo vietiniame kompiuteryje, kai neplanuojate jo platinti. Norėdami sukurti plėtinį, turime sukurti tik keturis skirtingus failus; HTML failas, CSS failas, JavaScript failas ir JSON failas.

Savo failus pavadinome index.html, style.css, script.js ir manifest.json. Kad tinkamai veiktų, manifesto failas turi turėti šį pavadinimą, tačiau kitiems galite suteikti bet kokius pavadinimus, jei atitinkamai pakeisite savo kodą.

Šiuos failus turėtumėte įdėti į tą patį šakninį aplanką.

2 veiksmas: sukurkite manifesto failą

Aprašo failas pateikiamas su kiekvienu „Google Chrome“ plėtiniu. Jame pateikiama informacija apie „Chrome“ plėtinį ir kai kurie pagrindiniai nustatymai. Šiame faile turi būti pavadinimas, versijos numeris, aprašas ir aprašo versija. Taip pat įtraukėme leidimus ir įkeliamą veiksmą index.html kaip plėtinio iššokantis langas.

{
"vardas": "MakeUseOf.com automatinė paieška",
"versija": "1.0.0",
"apibūdinimas": "Paieškos įrankis įdomiems straipsniams rasti",
"manifest_version": 3,
"autorius": "Samuelis Garbettas",
"leidimai": ["saugykla", "deklaratyvusTurinys", "ActiveTab", "scenarijus"],
"host_permissions": [""],
"veiksmas":{
"default_popup": "index.html",
"numatytasis_pavadinimas": "MUO automatinė paieška"
 }
}

3 veiksmas: HTML ir CSS kūrimas

Prieš pradėdami rašyti scenarijų, turime sukurti pagrindinę vartotojo sąsają naudodami HTML ir CSS. Galite naudoti a CSS biblioteka, pvz., „Bootstrap“. kad nekurtumėte savo, tačiau mums reikia tik kelių mūsų plėtinio taisyklių.

Mūsų index.html faile yra html, head ir body žymos. Žymėje „head“ yra puslapio pavadinimas ir nuoroda į mūsų stiliaus lapą, o tekste yra h1 žyma, mygtuką, kuris nukreipia jus į MakeUseOf.com, ir kitą mygtuką, kurį naudosime kaip aktyviklį a scenarijus. Scenarijaus žyma tiesiai dokumento pabaigoje apima script.js failą.

<html>
<galva>
<titulą>MUO automatinė paieška</title>
<meta charset="utf-8">
<nuoroda rel="stiliaus lapas" href="stilius.css">
</head>
<kūnas>
<h1>MUO automatinė paieška</h1>
<a href="https://www.makeuseof.com/" taikinys="_tuščias"><mygtuko ID="mygtukasOne">Eikite į MakeUseOf.com</button></a>
<mygtuko ID="mygtukas du">Pradėkite atsitiktinę paiešką</button>
</body>
<scenarijus src="script.js"></script>
</html>

Mūsų CSS failas yra dar paprastesnis nei HTML, pakeičiantis tik penkių elementų stilių. Turime taisykles savo html ir body žymoms, taip pat h1 žymoms ir abiem mygtukams.

html {
 plotis: 400 pikselių;
}
kūnas {
 šriftų šeima: Helvetica, sans-serif;
}
h1 {
 teksto lygiavimas: centre;
}
#buttonOne {
 kraštinės spindulys: 0 pikselių;
 plotis: 100%;
 užpildymas: 10 pikselių 0 pikselių;
}
#buttonTwo {
 kraštinės spindulys: 0 pikselių;
 plotis: 100%;
 užpildymas: 10 pikselių 0 pikselių;
 paraštė viršuje: 10 piks.;
}

4 veiksmas: „JavaScript“ kūrimas

Paskutinis šio proceso veiksmas – laikas sukurti failą script.js.

Pirmoji šio failo funkcija, vadinama insertScript(), skirtas įterpti kitą funkciją (automatinė paieška ()) į dabartinį puslapį. Tai leidžia mums manipuliuoti puslapiu ir naudoti paieškos funkcijas, kurios jau yra MakeUseOf.com svetainėje.

Po to seka įvykių klausytojas, kuris laukia, kol bus spustelėtas mygtukas Pradėti atsitiktinę paiešką, prieš iškviesdamas funkciją, kurią ištyrėme aukščiau.

The automatinė paieška () funkcija yra šiek tiek sudėtingesnė. Jis prasideda nuo masyvo, kuriame yra 20 kategorijų MUO svetainėje, suteikiant mums gerą pavyzdį, iš kurio galime remtis atliekant atsitiktines paieškas. Po to mes naudojame Math.random() funkcija sugeneruoti atsitiktinį skaičių nuo 0 iki 19, kad būtų galima pasirinkti įrašą iš mūsų masyvo.

Turėdami paieškos terminą, dabar turime imituoti mygtuko paspaudimą, kad atidarytume MUO paieškos juostą. Pirmiausia naudojame „Chrome“ kūrėjo pultą, kad surastume paieškos mygtuko ID, tada įtraukiame jį į „JavaScript“ kodą su spustelėkite () funkcija.

Kaip ir paieškos mygtukas, taip pat turime rasti rodomos paieškos juostos ID, kad galėtume įterpti atsitiktinį pasirinktą paieškos terminą. Užbaigus formą, norint atlikti paiešką, paprasta pateikti formą.

// Ši funkcija įterpia mūsų automatinės paieškos funkciją į puslapio kodą
funkcijainsertScript() {
// Taip pasirenkamas sufokusuotas operacijos skirtukas ir perduodama automatinės paieškos funkcija
 chrome.tabs.query({aktyvus: tiesa, dabartinis langas: tiesa}, skirtukai => {
chromas.skriptas.executeScript({taikinys: {tabId: skirtukai[0].id}, funkcija: automatinė paieška})
 })
// Taip uždaromas iššokantis plėtinio langas, kad būtų galima pasirinkti svetainės paieškos juostą
langas.Uždaryti();
}


// Tai įvykių klausytojas, aptinkantis mūsų "Pradėti Atsitiktinis Paieška“ mygtuką
document.getElementById('mygtukas du').addEventListener('spustelėkite', insertScript)


// Ši funkcija pasirenka atsitiktinę temą iš masyvo ir 
funkcijaautomatinė paieška() {
// Tai masyvas, kuriame saugomi mūsų paieškos terminai
 const searchTerms = ["Kompiuteris ir mobilusis", "Gyvenimo būdas", "Techninė įranga", "Windows", "Mac",
"Linux", "Android", "Apple", "internetas", "Saugumas",
"Programavimas", "Pramogos", "Produktyvumas", "Karjera", "Kūrybiškas",
"Žaidimas", "Socialinė žiniasklaida", "Išmanieji namai", "DIY", "Apžvalga"];


// Taip sugeneruojamas atsitiktinis skaičius nuo 0 iki 19
leisti SelectorNumber = Matematika.floor(Matematika.random() * 20);


// Tai naudoja atsitiktinį skaičių, kad pasirinktų įrašą iš masyvo
leisti atranka = paieškos terminai[selectorNumber];


// Tai imituoja MUO svetainės paieškos piktogramos paspaudimą
 document.getElementById("js-paieškos".click();


// Tai nustato MUO svetainės paieškos juostą kaip kintamąjį
var paieškos juosta = dokumentas.getElementById("js-search-input");


// Taip į paieškos juostą įterpiamas atsitiktinis paieškos terminas
 searchBar.value = searchBar.value + pasirinkimas;
// Tai užbaigia suaktyvinus svetainės formą
 document.getElementById("paieškos forma2").Pateikti();
}

5 veiksmas: pridėkite failus prie „Chrome://extensions“.

Tada laikas pridėti ką tik sukurtus failus į „Chrome“ plėtinių puslapį. Kai tai padarysite, plėtinys bus pasiekiamas naršyklėje „Chrome“ ir bus atnaujintas, kai tik pakeisite failus.

Atidarykite „Google Chrome“, eikite į chrome://extensions ir įsitikinkite, kad kūrėjo režimo slankiklis viršutiniame dešiniajame kampe yra įjungtoje padėtyje.

Spustelėkite Krovinys Išpakuotas viršutiniame kairiajame kampe, tada pasirinkite aplanką, kuriame išsaugojote plėtinių failus, ir spustelėkite Pasirinkite Aplankas.

Dabar, kai plėtinys įkeltas, galite spustelėti dėlionės detalės piktogramą viršutiniame dešiniajame kampe ir prisegti plėtinį prie pagrindinės užduočių juostos, kad būtų lengviau pasiekti.

Dabar turėtumėte turėti galimybę pasiekti užbaigtą plėtinį savo naršyklėje. Verta nepamiršti, kad šis plėtinys veiks tik MUO svetainėje ar svetainėse, kurių paieškos mygtuko ir juostos ID yra toks pat.

„Google Chrome“ plėtinio kūrimas

Šis straipsnis tik subraižo galimų funkcijų, kurias galite įtraukti į savo „Google Chrome“ plėtinį, paviršių. Kai tik išmoksite pagrindus, verta išnagrinėti savo idėjas.

„Chrome“ plėtiniai gali padėti jums naršyti aukštesniu lygiu, tačiau stenkitės vengti kai kurių žinomų šešėlinių „Chrome“ plėtinių, kad naršytumėte saugiai.

6 šešėliai „Google Chrome“ plėtiniai, kuriuos turėtumėte kuo greičiau pašalinti

Skaitykite toliau

DalintisTviteryjeDalintisEl. paštas

Susijusios temos

  • Programavimas
  • Naršyklės plėtiniai
  • Interneto kūrimas
  • JavaScript

Apie autorių

Samuelis L. Garbettas (Paskelbta 44 straipsniai)

Samuelis yra JK gyvenantis technologijų rašytojas, aistringas viskam, ką daryti „pasidaryk pats“. Pradėjęs verslą interneto svetainių kūrimo ir 3D spausdinimo srityse bei ilgus metus dirbęs rašytoju, Samuelis siūlo unikalų įžvalgą į technologijų pasaulį. Daugiausia dėmesio skiriantis „pasidaryk pats“ technologijų projektams, jam patinka tik dalytis smagiomis ir įdomiomis idėjomis, kurias galite išbandyti namuose. Ne darbo vietoje Samuelis dažniausiai važiuoja dviračiu, žaidžia kompiuterinius vaizdo žaidimus arba desperatiškai bando bendrauti su savo augintiniu krabu.

Daugiau iš Samuel L. Garbettas

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia