Ja esat Chrome lietotājs, iespējams, izmantosit vienu vai vairākus paplašinājumus. Neatkarīgi no tā, vai tas ir reklāmu bloķēšana vai funkciju pievienošana, paplašinājumi pārlūkam sniedz daudz noderīgu funkciju. Tātad, vai nebūtu forši, ja jūs varētu izveidot savu Chrome paplašinājumu? Tieši to es jums šeit parādīšu.
Skatiet arī mūsu rakstu Labākie skārienekrāna Chromebook datori
Uzturot klientu vietnes, es vēlētos zināt, kā katra vietne darbojas attiecībā uz lapas ielādi. Tā kā Google tagad savos SEO aprēķinos izmanto ielādes laikus, vietnes optimizācijā svarīgs rādītājs ir zināt, cik ātri vai lēni tiek ielādēta lapa. Tas jo vairāk attiecas uz vietnes optimizēšanu mobilajām ierīcēm. Tam jābūt vieglam, ātram un ielādētam bez kļūdām, lai Google gūtu augstu rezultātu.
Papildus tam, ka uzņēmīgs cilvēks vietnē SitePoint izmanto arī to pašu vietni, ko es, lai pārbaudītu lapas ātrumu, GTmetrix un ir izveidojis Chrome paplašinājumu, lai to pārbaudītu, es domāju, ka es darīšu to pašu un izstāstu jūs cauri tam.
Chrome paplašinājumi
Chrome paplašinājumi ir mini programmas, kas galvenajam pārlūkam pievieno funkcijas. Tās var būt tikpat vienkāršas kā tās, kuras mēs izveidosim, vai tikpat sarežģītas kā drošu paroļu pārvaldnieki vai skriptu emulatori. Rakstīti saderīgās valodās, piemēram, HTML, CSS un JavaScript, tie ir autonomi faili, kas atrodas blakus pārlūkam.
Pēc nepieciešamības vairums paplašinājumu ir vienkāršas ikonas klikšķu izpildes, kas veic noteiktu darbību. Burtiski šī darbība var būt jebkas, ko vēlaties darīt Chrome.
Izveidojiet savu Chrome paplašinājumu
Veicot nelielu izpēti, jūs varat iekniebt paplašinājumu, lai darītu visu, kas jums patīk, bet man patīk ideja par vienas pogas ātruma pārbaudi, tāpēc es to turpinu.
Parasti, pārbaudot vietnes ātrumu, jūs ielīmējat tās lapas URL, kurā atrodaties, GTmetrix, Pingdom vai citur, un noklikšķiniet uz Analizēt. Tas prasa tikai dažas sekundes, bet vai nebūtu jauki, ja jūs vienkārši varētu izvēlēties ikonu savā pārlūkprogrammā un likt tai to darīt jūsu labā? Pēc šīs apmācības veikšanas jūs varēsit to izdarīt.
Lai saglabātu visu, jums datorā būs jāizveido mape. Izveidojiet trīs tukšus failus - manifest.json, popup.html un popup.js. Ar peles labo pogu noklikšķiniet uz jaunās mapes un atlasiet Jauns un teksta fails. Atvērtajā teksta redaktorā atveriet visus trīs failus. Pārliecinieties, vai popup.html tiek saglabāts kā HTML fails, un popup.js tiek saglabāts kā JavaScript fails. Arī šīs apmācības nolūkos lejupielādējiet šo parauga ikonu no Google.
Atlasiet manifest.json un ielīmējiet tajā:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Izmantojiet GTmetrix, lai analizētu vietnes lapas ielādes ātrumu", "versija": "1.0", "pārlūkprogrammas_darbība": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "atļaujas":}
Kā redzat, mēs tam esam piešķīruši nosaukumu un pamata aprakstu. Mēs esam arī nosaukuši par pārlūka darbību, kas ietver ikonu, kuru lejupielādējām no Google, kas parādīsies jūsu pārlūkprogrammas joslā un uznirstošajā.html. Uznirstošais logs.html tiek saukts, kad pārlūkā izvēlaties paplašinājuma ikonu.
Atveriet uznirstošo logu.html un ielīmējiet tajā.
Lappuses ātruma analizators, izmantojot GTMetrix
Uznirstošais logs.html tiek saukts, kad pārlūkā izvēlaties paplašinājuma ikonu. Mēs tam esam piešķīruši vārdu, marķējuši uznirstošo logu un pievienojuši pogu. Izvēloties pogu, tiks izsaukts popup.js, kas ir fails, kuru mēs pabeigsim nākamreiz.
Atveriet uznirstošo logu.js un ielīmējiet tajā:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = dokuments; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, nepatiess);}, nepatiess);
Es neizlikšos, ka zināšu JavaScript, tāpēc bija parocīgi, ka SitePoint failam jau bija vieta. Viss, ko es zinu, GTmetrix liek analizēt lapu pašreizējā Chrome cilnē. Tur, kur teikts “chrome.tabs.getSelected”, paplašinājums paņem URL no aktīvās cilnes un ievada to tīmekļa formā. Tas ir, cik es varu iet.
Pārbaudiet savu Chrome paplašinājumu
Tagad mums ir pamatsistēma, mums jāpārbauda, lai redzētu, kā tā darbojas.
- Atveriet pārlūku Chrome un atlasiet Citi rīki un paplašinājumi.
- Atzīmējiet izvēles rūtiņu blakus Izstrādātāja režīmam, lai to iespējotu.
- Atlasiet Ielādēt neiepakotu paplašinājumu un dodieties uz failu, kuru izveidojāt šim paplašinājumam.
- Atlasiet Labi, lai ielādētu paplašinājumu, un tam vajadzētu parādīties paplašinājumu sarakstā.
- Sarakstā atzīmējiet izvēles rūtiņu blakus opcijai Iespējots, un pārlūkprogrammā vajadzētu parādīties ikonai.
- Pārlūkā atlasiet ikonu, lai parādītos uznirstošais logs.
- Atlasiet pogu Pārbaudīt šo lapu tagad!
Jums vajadzētu redzēt pārbaudīto lapu un GTmetrix darbības pārskatu. Kā jūs varat redzēt galvenajā attēlā no manas vietnes, man ir nedaudz jāstrādā, lai paātrinātu savu jauno dizainu!
Pagarinājumu turpināšana
Izveidot savu Chrome paplašinājumu nav tik grūti, kā varētu šķist. Lai gan tas noteikti palīdzēja sākt domāt, zinot nelielu kodu, tiešsaistē ir simtiem resursu, kas jums to parādīs. Turklāt Google ir milzīgs informācijas krājums, konsultācijas un pārskati, kas palīdzēs. Es izmantoju šo Google izstrādātāju vietnes lapu, lai palīdzētu man ar šo paplašinājumu. Lapa iepazīstina jūs ar katru paplašinājuma izveidošanas daļu un nodrošina šo ikonu, kuru mēs izmantojām iepriekš.
Pietiekami izpētot, jūs varat izveidot paplašinājumus, kas izdara gandrīz visu, ko spēj pārlūks. Daži no labākajiem paplašinājumiem Chrome veikalā ir fizisku personu, nevis uzņēmumu pārstāvji, pierādot, ka jūs patiešām varat izveidot savu.
Viss kredīts Džonam Sonmezam vietnē SitePoint par oriģinālo ceļvedi. Viņš paveica smago darbu, es tikai nedaudz to pārkārtoju un nedaudz atjaunināju.
Vai esat izveidojis savu Chrome paplašinājumu? Vai vēlaties to reklamēt vai dalīties tajā? Paziņojiet mums tālāk, ja jūs darāt!
