Vai kādreiz esat bijis neapmierināts ar jūsu tīmekļa pārlūkprogrammas piedāvātajām funkcijām? Pat ja Google interneta veikals tiek pētīts stundām ilgi, ne vienmēr ir vienkārši noklikšķināt uz pogas “Lejupielādēt”, lai uzlabotu tīmekļa sērfošanas pieredzi.

Šeit parādās pārlūkprogrammas paplašinājumi. Šajā rakstā mēs izpētīsim jūsu pašu Google Chrome paplašinājuma izveides procesu no jauna.

Kas ir Google Chrome paplašinājums?

Mūsdienīgs tīmekļa pārlūkprogrammas, piemēram, Google Chrome ir aprīkots ar virkni funkciju, kas padara tās viegli lietojamas un spēj apmierināt vairuma lietotāju vajadzības. Tomēr šo akciju funkciju paplašināšana var sniegt daudz dažādu priekšrocību. Tāpēc pārlūkprogrammu izstrādātāji parasti ļauj tiem izveidot paplašinājumus, papildinājumus un spraudņus.

Google Chrome piedāvā šo funkciju, ļaujot ikvienam, kam ir pieredze tīmekļa izstrādē, viegli izveidot savus Chrome paplašinājumus. Varat izveidot paplašinājumu, izmantojot HTML, JavaScript un CSS, tāpat kā daudzas vietnes.

instagram viewer

Atšķirībā no tīmekļa vietnes paplašinājumi var darboties fonā, kamēr pārlūkojat, dažkārt pat mijiedarboties ar apmeklētajām vietnēm.

Ko darīs mūsu Google Chrome paplašinājums?

Mēs izveidosim vienkāršu Chrome paplašinājumu, kas ļaus jums apmeklēt vietni Make Use Of un veikt nejaušu meklēšanu, pamatojoties uz vietnē atrastajām rakstu kategorijām. Šis ir ātrs un vienkāršs projekts, taču jūs joprojām daudz uzzināsit.

Jūs uzzināsiet, kā

  • Izveidojiet Google Chrome paplašinājumu
  • Ievietojiet pielāgotu kodu tīmekļa lapās, izmantojot Chrome paplašinājumu
  • Izveidojiet notikumu klausītājus un simulējiet klikšķus
  • Ģenerējiet nejaušus skaitļus
  • Darbs ar masīviem un mainīgajiem

Izveidojiet pats savu Chrome paplašinājumu

Google ir padarījusi pārsteidzoši vienkāršu sava izveidošanu Chrome paplašinājumi, tāpēc nepaies ilgs laiks, līdz kaut kas darbosies. Tālāk norādīto darbību veikšana prasīs tikai 10–15 minūtes, taču iesakām eksperimentēt arī ar savu kodu.

1. darbība: izveidojiet failus

Ja neplānojat to izplatīt, varat saglabāt paplašinājumu savā vietējā datorā. Mums ir jāizveido tikai četri dažādi faili, lai izveidotu paplašinājumu; HTML fails, CSS fails, JavaScript fails un JSON fails.

Mēs nosaucām savus failus index.html, style.css, script.js un manifest.json. Manifesta failam ir jābūt šādam nosaukumam, lai tas darbotos pareizi, taču pārējiem failiem varat piešķirt jebkādus nosaukumus, ja vien attiecīgi maināt savu kodu.

Šie faili jāievieto tajā pašā saknes mapē.

2. darbība. Manifesta faila izveide

Manifesta fails ir pievienots katram Google Chrome paplašinājumam. Tas sniedz informāciju par Chrome paplašinājumu, vienlaikus ieviešot dažus pamata iestatījumus. Šajā failā ir jāietver nosaukums, versijas numurs, apraksts un manifesta versija. Mēs esam iekļāvuši arī atļaujas un darbību, kas tiek ielādēta index.html kā uznirstošais logs, kas tiek parādīts paplašinājumam.

{
"nosaukums": "MakeUseOf.com automatizētā meklēšana",
"versija": "1.0.0",
"apraksts": "Meklēšanas rīks, lai atrastu interesantus rakstus",
"manifest_version": 3,
"autors": "Semjuels Gārbets",
"atļaujas": ["uzglabāšana", "deklaratīvsSaturs", "aktīvā cilne", "skriptu veidošana"],
"host_permissions": [""],
"darbība":{
"noklusējuma_uznirstošais logs": "index.html",
"noklusējuma_nosaukums": "MUO automātiskā meklēšana"
 }
}

3. darbība: izveidojiet HTML un CSS

Pirms mēs varam sākt rakstīt skriptu, mums ir jāizveido pamata lietotāja saskarne, izmantojot HTML un CSS. Jūs varat izmantot a CSS bibliotēka, piemēram, Bootstrap lai neveidotu savu, taču mums ir nepieciešami tikai daži noteikumi mūsu paplašinājumam.

Mūsu index.html failā ir html, head un body tagi. Tagā head ir lapas nosaukums un saite uz mūsu stila lapu, savukārt pamattekstā atrodas h1 tags, poga, kas novirza jūs uz vietni MakeUseOf.com, un vēl viena poga, ko izmantosim kā aktivizētāju a skripts. Skripta tags tieši dokumenta beigās ietver script.js failu.

<html>
<galvu>
<virsraksts>MUO automātiskā meklēšana</title>
<meta rakstzīmju kopa ="utf-8">
<saite rel="stila lapa" href="stils.css">
</head>
<ķermenis>
<h1>MUO automātiskā meklēšana</h1>
<a href="https://www.makeuseof.com/" mērķis="_tukšs"><pogas id="pogaOne">Dodieties uz MakeUseOf.com</button></a>
<pogas id="poga Otrais">Sāciet nejaušu meklēšanu</button>
</body>
<skripts src="script.js"></script>
</html>

Mūsu CSS fails ir pat vienkāršāks nekā HTML, mainot tikai piecu elementu stilu. Mums ir noteikumi mūsu html un body tagiem, kā arī h1 tagiem un abām mūsu pogām.

html {
 platums: 400 pikseļi;
}
body {
 fontu saime: Helvetica, sans-serif;
}
h1 {
 teksta līdzināšana: centrs;
}
#buttonOne {
 apmales rādiuss: 0 pikseļi;
 platums: 100%;
 polsterējums: 10 pikseļi 0 pikseļi;
}
#buttonTwo {
 apmales rādiuss: 0 pikseļi;
 platums: 100%;
 polsterējums: 10 pikseļi 0 pikseļi;
 mala augšpusē: 10 pikseļi;
}

4. darbība. JavaScript izveide

Kā pēdējo šī procesa darbību ir pienācis laiks izveidot failu script.js.

Pirmā funkcija šajā failā, ko sauc insertScript(), ir vietā, lai ievietotu citu funkciju (automātiskā meklēšana()) pašreizējā lapā. Tas ļauj mums manipulēt ar lapu un izmantot meklēšanas līdzekļus, kas jau ir pieejami vietnē MakeUseOf.com.

Tam seko notikumu uztvērējs, kas gaida, līdz tiek noklikšķināts uz pogas Sākt nejaušu meklēšanu, pirms tiek izsaukta iepriekš izpētītā funkcija.

The automātiskā meklēšana() funkcija ir nedaudz sarežģītāka. Tas sākas ar masīvu, kurā ir 20 kategorijas MUO tīmekļa vietnē, sniedzot mums labu paraugu, no kā var ņemt, veicot nejaušus meklējumus. Pēc tam mēs izmantojam Math.random() funkciju, lai ģenerētu nejaušu skaitli no 0 līdz 19, lai atlasītu ierakstu no mūsu masīva.

Izmantojot mūsu meklēšanas vienumu, mums tagad ir jāimitē pogas klikšķis, lai atvērtu MUO meklēšanas joslu. Vispirms mēs izmantojam Chrome izstrādātāja konsoli, lai atrastu meklēšanas pogas ID, un pēc tam pievienojam to savam JavaScript kodam ar klikšķis() funkcija.

Tāpat kā meklēšanas pogai, mums ir jāatrod arī parādītās meklēšanas joslas ID, lai mēs varētu ievietot nejauši izvēlēto meklēšanas vienumu. Kad tas ir pabeigts, ir vienkārši jāiesniedz veidlapa, lai veiktu meklēšanu.

// Šī funkcija ievieto mūsu automātiskās meklēšanas funkciju lapas kodā
funkcijainsertScript() {
// Tiek atlasīta darbībai fokusētā cilne un tiek nodota automātiskās meklēšanas funkcija
 chrome.tabs.query({aktīvs: taisnība, pašreizējais logs: taisnība}, cilnes => {
hroms.skripts.executeScript({mērķis: {tabId: cilnes[0].id}, funkcija: automātiskā meklēšana})
 })
// Tiek aizvērts paplašinājuma uznirstošais logs, lai atlasītu vietnes meklēšanas joslu
logs.close();
}


// Šis ir notikumu uztvērējs, kas nosaka klikšķus uz mūsu "Sākt Nejauši Meklēt" pogu
document.getElementById('poga Otrais').addEventListener('klikšķis', insertScript)


// Šī funkcija atlasa nejaušu tēmu no masīva un 
funkcijaautomātiskā meklēšana() {
// Šis ir masīvs mūsu meklēšanas vienumu glabāšanai
 const searchNoteikumi = ["PC un mobilais", "Dzīvesveids", "Aparatūra", "Windows", "Mac",
"Linux", "Android", "Apple", "Internets", "Drošība",
"Programmēšana", "Izklaide", "Produktivitāte", "Karjera", "Radošs",
"Spēles", "Sociālie mēdiji", "Viedā māja", "DIY", "Pārskats"];


// Tas ģenerē nejaušu skaitli no 0 līdz 19
ļaut SelectorNumber = Matemātika.floor(Matemātika.random() * 20);


// Tas izmanto izlases numuru, lai atlasītu ierakstu no masīva
ļaut atlase = searchTerms[selectorNumber];


// Tas simulē klikšķi uz MUO tīmekļa vietnes meklēšanas ikonas
 document.getElementById("js-meklēšana").klikšķis();


// Tas iestata MUO vietnes meklēšanas joslu kā mainīgo
var meklēšanas josla = dokumentu.getElementById("js-search-input");


// Tādējādi meklēšanas joslā tiek ievietots mūsu izlases veida meklēšanas vienums
 searchBar.value = searchBar.value + atlase;
// Tas pabeidz procesu, aktivizējot vietnes veidlapu
 document.getElementById("meklēšanas forma2").Iesniegt();
}

5. darbība. Failu pievienošana pārlūkam Chrome://extensions

Pēc tam ir pienācis laiks pievienot tikko izveidotos failus Chrome paplašinājumu lapai. Kad tas būs izdarīts, paplašinājums būs pieejams pārlūkā Chrome un tiks atjaunināts ikreiz, kad veiksit izmaiņas savos failos.

Atveriet Google Chrome, dodieties uz chrome://extensions un pārliecinieties, vai izstrādātāja režīma slīdnis augšējā labajā stūrī ir ieslēgts.

Klikšķis Iekraušana Izpakota augšējā kreisajā stūrī, pēc tam izvēlieties mapi, kurā esat saglabājuši paplašinājuma failus, un noklikšķiniet uz Izvēlieties mapi.

Tagad, kad paplašinājums ir ielādēts, varat noklikšķināt uz puzles daļas ikonas augšējā labajā stūrī un piespraust paplašinājumu galvenajai uzdevumjoslai, lai atvieglotu piekļuvi.

Tagad jums vajadzētu būt iespējai piekļūt pabeigtajam paplašinājumam savā pārlūkprogrammā. Ir vērts paturēt prātā, ka šis paplašinājums darbosies tikai MUO vietnē vai vietnēs ar tādu pašu ID meklēšanas pogai un joslai.

Google Chrome paplašinājuma izveide

Šajā rakstā ir aprakstītas tikai tās iespējamās funkcijas, kuras varētu iekļaut savā Google Chrome paplašinājumā. Ir vērts izpētīt savas idejas, kad esat apguvis pamatus.

Chrome paplašinājumi var palīdzēt uzlabot pārlūkošanas līmeni, taču mēģiniet izvairīties no dažiem zināmajiem ēnainajiem Chrome paplašinājumiem, lai nodrošinātu drošu pārlūkošanu.

6 ēnaini Google Chrome paplašinājumi, kas jums pēc iespējas ātrāk jāatinstalē

Lasiet Tālāk

DalītiesČivinātDalītiesE-pasts

Saistītās tēmas

  • Programmēšana
  • Pārlūka paplašinājumi
  • Web izstrāde
  • JavaScript

Par autoru

Semjuels L. Garbets (Publicēti 44 raksti)

Samuels ir Apvienotajā Karalistē dzīvojošs tehnoloģiju rakstnieks, kurš aizraujas ar visu, ko darāt. Uzsācis uzņēmējdarbību tīmekļa izstrādes un 3D drukāšanas jomā, kā arī ilgus gadus strādājis par rakstnieku, Samuels piedāvā unikālu ieskatu tehnoloģiju pasaulē. Viņš galvenokārt koncentrējas uz DIY tehnoloģiju projektiem, un viņam nekas vairāk patīk, kā vien dalīties jautrās un aizraujošās idejās, kuras varat izmēģināt mājās. Ārpus darba Samuelu parasti var atrast braucam ar velosipēdu, spēlējam datora videospēles vai izmisīgi mēģina sazināties ar savu mājdzīvnieku krabi.

Vairāk no Samuela L. Garbets

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai saņemtu tehniskos padomus, pārskatus, bezmaksas e-grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu