Kung gumagamit ka ng Chrome, malamang na gumagamit ka ng isa o higit pang mga extension. Kung ito ay upang hadlangan ang mga ad o upang magdagdag ng mga tampok, ang mga extension ay magdagdag ng maraming utility sa browser. Kaya hindi magiging cool kung maaari kang bumuo ng iyong sariling extension ng Chrome? Iyon mismo ang ipapakita ko sa iyo dito.
Tingnan din ang aming artikulo Ang Pinakamagandang Touchscreen Chromebook
Habang pinapanatili ko ang mga website para sa mga kliyente, nais kong malaman kung paano gumaganap ang bawat site na may kaugnayan sa paglo-load ng pahina. Tulad ng paggamit ng Google ng mga oras ng pag-load sa mga pagkalkula ng SEO nito, alam kung gaano kabilis, o mabagal ang isang naglo-load ng isang pahina ay isang mahalagang sukatan kapag nag-optimize sa isang site. Ito ay mas totoo kapag nag-optimize ng isang website para sa mobile. Kailangan itong maging magaan, mabilis at mag-load nang walang anumang mga pagkakamali upang maka-marka ng mataas sa loob ng Google.
Dagdag pa rito, ang katotohanan na ang isang taong nagpapasimula sa SitePoint ay gumagamit din ng parehong website na gagawin ko upang suriin ang mga bilis ng pahina, ang GTmetrix at nakabuo ng isang extension ng Chrome upang suriin ito, naisip kong gagawin ko rin ito at maglakad sa iyo.
Mga Extension ng Chrome
Ang mga Extension ng Chrome ay mga mini program na nagdaragdag ng mga tampok sa pangunahing browser. Maaari silang maging tuwid bilang isang gagawin namin upang lumikha o bilang kumplikado bilang ligtas na mga tagapamahala ng password o mga emulators ng script. Nakasulat sa mga katugmang wika tulad ng HTML, CSS at JavaScript, ang mga ito ay mga file na nasa sarili na nakaupo sa tabi ng browser.
Sa pamamagitan ng pangangailangan, karamihan sa mga extension ay simpleng mga pag-click sa pag-click sa icon na nagsasagawa ng isang naibigay na aksyon. Ang pagkilos na iyon ay maaaring literal na anumang bagay na nais mong gawin ng Chrome.
Bumuo ng iyong sariling extension ng Chrome
Sa pamamagitan ng isang maliit na pananaliksik, maaari mong i-tweak ang iyong extension upang gawin ang anumang nais mo ngunit gusto ko ang ideya ng isang tseke ng bilis ng pag-check sa gayon ay pupunta ako doon.
Karaniwan, kapag suriin mo ang bilis ng site ay mai-paste mo ang URL ng pahina na iyong pinasukan sa GTmetrix, Pingdom o kung saan man at pindutin ang Pag-aralan. Tumatagal lamang ito ng ilang segundo ngunit hindi ba maganda kung maaari ka lamang pumili ng isang icon sa iyong browser at gawin mo ito para sa iyo? Matapos magtrabaho sa pamamagitan ng tutorial na ito, magagawa mo lang iyon.
Kailangan mong lumikha ng isang folder sa iyong computer upang mapanatili ang lahat. Lumikha ng tatlong mga walang laman na file, manifest.json, popup.html at popup.js. Mag-right click sa loob ng iyong bagong folder at piliin ang Bago at text file. Buksan ang bawat isa sa iyong tatlong mga file sa iyong teksto editor na pinili. Tiyaking nai-save ang popup.html bilang isang file ng HTML at popup.js ay nai-save bilang isang file na JavaScript. I-download din ang halimbawang icon na ito mula sa Google para lamang sa mga layunin ng tutorial na ito.
Piliin ang manifest.json at i-paste ang sumusunod sa ito:
{"manifest_version": 2, "pangalan": "GTmetrix Page Speed Analyzer", "paglalarawan": "Gumamit ng GTmetrix upang pag-aralan ang bilis ng pag-load ng pahina ng website", "bersyon": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "mga pahintulot":}
Tulad ng nakikita mo, binigyan namin ito ng isang pamagat at pangunahing paglalarawan. Tumawag din kami ng isang aksyon sa browser na kasama ang icon na na-download namin mula sa Google na lilitaw sa iyong browser bar at popup.html. Ang Popup.html ang tinatawag kung pinili mo ang extension ng icon sa browser.
Buksan ang popup.html at i-paste ang sumusunod sa loob nito.
Mga Analyp ng Pahina gamit ang GTMetrix
Ang Popup.html ang tinatawag kung pinili mo ang extension ng icon sa browser. Binigyan namin ito ng isang pangalan, nilagyan ng label ang popup at nagdagdag ng isang pindutan. Ang pagpili ng pindutan ay tatawag sa popup.js na kung saan ay ang file na makumpleto namin sa susunod.
Buksan ang popup.js at i-paste ang sumusunod sa ito:
dokumento.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d) = dokumento; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'nakatago'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, maling);}, maling);
Hindi ko magpanggap na malaman ang JavaScript na kung bakit ito ay madaling gamitin na ang SitePoint ay mayroon nang file sa lugar. Ang alam ko lang ay sinabi nito sa GTmetrix na pag-aralan ang pahina sa kasalukuyang tab na Chrome. Kung saan sinasabi nito na 'chrome.tabs.getSelected' ang extension ay kukuha ng URL mula sa aktibong tab at ipinasok ito sa web form. Iyon ay tulad ng maaari kong pumunta.
Pagsubok sa iyong Chrome extension
Ngayon mayroon kaming pangunahing balangkas sa lugar, kailangan nating subukan upang makita kung paano ito gumagana.
- Buksan ang Chrome, piliin ang Marami pang Mga Tool at Extension.
- Suriin ang kahon sa tabi ng mode ng Developer upang paganahin ito.
- Piliin ang I-load ang hindi naka-unpack na extension at mag-navigate sa file na nilikha mo para sa extension na ito.
- Piliin ang OK upang mai-load ang extension at dapat itong lumitaw sa iyong listahan ng Mga Extension.
- Suriin ang kahon sa tabi ng Pinagana sa listahan at ang icon ay dapat lumitaw sa iyong browser.
- Piliin ang icon sa browser upang lumitaw ang popup.
- Piliin ang pindutan, Suriin ang pahinang ito ngayon!
Dapat mong makita ang nasuri na pahina at ulat ng pagganap mula sa GTmetrix. Tulad ng nakikita mo mula sa aking sariling site sa pangunahing imahe, mayroon akong kaunting gawain upang gawin upang mapabilis ang aking bagong disenyo!
Ang pagkuha ng mga extension pasulong
Ang paglikha ng iyong sariling extension ng Chrome ay hindi mahirap hangga't mukhang. Habang tiyak na nakatulong ito upang magsimula ang isang ulo sa pamamagitan ng pag-alam ng isang maliit na code, mayroong daan-daang mga mapagkukunan sa online na magpapakita sa iyo na. Dagdag pa, ang Google ay may malaking imbakan ng impormasyon, mga tutorial at mga walkthrough na makakatulong. Ginamit ko ang pahinang ito mula sa site ng Google Developer upang matulungan ako sa extension na ito. Naglalakad ka sa pahina sa bawat bahagi ng paglikha ng extension at nagbibigay ng icon na ginamit namin nang mas maaga.
Sa pamamagitan ng sapat na pananaliksik, maaari kang lumikha ng mga extension na gumawa ng anumang bagay na kaya ng browser. Ang ilan sa mga pinakamahusay na extension sa tindahan ng Chrome ay mula sa mga indibidwal at hindi mga kumpanya, na nagpapatunay na maaari kang lumikha ng iyong sarili.
Lahat ng kredito kay John Sonmez sa SitePoint para sa orihinal na gabay. Ginawa niya ang kasipagan, inayos ko lang ito nang kaunti at na-update ito nang kaunti.
Nilikha mo ba ang iyong sariling extension ng Chrome? Nais mo bang itaguyod o ibahagi ito? Ipaalam sa amin sa ibaba kung gagawin mo!
