วิธีการทำส่วนขยายของโครเมี่ยม

หากคุณเป็นผู้ใช้ Chrome เป็นไปได้ว่าคุณจะใช้ส่วนขยายอย่างน้อยหนึ่งรายการ ไม่ว่าจะเป็นการบล็อกโฆษณาหรือเพิ่มคุณสมบัติส่วนขยายจะเพิ่มยูทิลิตี้มากมายให้กับเบราว์เซอร์ ดังนั้นจะไม่เจ๋งถ้าคุณสามารถสร้างส่วนขยาย Chrome ของคุณเอง? นั่นคือสิ่งที่ฉันจะแสดงให้คุณที่นี่

ดูบทความของเรา The Best Touchscreen Chromebooks

ในขณะที่ฉันดูแลเว็บไซต์สำหรับลูกค้าฉันชอบที่จะรู้ว่าแต่ละเว็บไซต์ทำงานอย่างไรเมื่อมีการโหลดหน้าเว็บ ขณะนี้ Google ใช้เวลาโหลดในการคำนวณ SEO การรู้ว่าการโหลดหน้าเว็บเร็วหรือช้าเพียงใดจึงเป็นตัวชี้วัดที่สำคัญเมื่อปรับเว็บไซต์ให้เหมาะสม สิ่งนี้จะเป็นจริงยิ่งขึ้นเมื่อเพิ่มประสิทธิภาพเว็บไซต์สำหรับมือถือ จะต้องมีน้ำหนักเบารวดเร็วและโหลดโดยไม่มีข้อผิดพลาดใด ๆ เพื่อให้ได้คะแนนสูงภายใน Google

นอกจากนี้ความจริงแล้วบุคคลที่กล้าได้กล้าเสียที่ SitePoint ยังใช้เว็บไซต์เดียวกันกับที่ฉันทำเพื่อตรวจสอบความเร็วของหน้า GTmetrix และได้พัฒนาส่วนขยายของ Chrome เพื่อตรวจสอบว่าฉันคิดว่าฉันจะทำแบบเดียวกันและพาคุณผ่านมันไป

ส่วนขยายของ Chrome

Chrome Extensions เป็นโปรแกรมขนาดเล็กที่เพิ่มคุณสมบัติให้กับเบราว์เซอร์หลัก พวกเขาสามารถตรงไปตรงมาเหมือนกับที่เราจะสร้างหรือซับซ้อนเท่าที่ผู้จัดการรหัสผ่านที่ปลอดภัยหรือโปรแกรมจำลองสคริปต์ เขียนในภาษาที่ใช้งานร่วมกันได้เช่น HTML, CSS และ JavaScript ซึ่งเป็นไฟล์ที่อยู่ในตัวเองซึ่งอยู่ข้างเบราว์เซอร์

ตามความจำเป็นส่วนขยายส่วนใหญ่จะเป็นไอคอนแบบง่ายๆคลิกเรียกใช้งานเพื่อดำเนินการตามที่กำหนด การกระทำนั้นสามารถเป็นอะไรก็ได้ที่คุณต้องการให้ Chrome ทำ

สร้างส่วนขยาย Chrome ของคุณเอง

ด้วยการค้นคว้าเล็ก ๆ น้อย ๆ คุณสามารถปรับแต่งส่วนขยายของคุณเพื่อทำสิ่งที่คุณต้องการ แต่ฉันชอบความคิดของการตรวจสอบความเร็วของปุ่มเดียว

โดยปกติเมื่อคุณตรวจสอบความเร็วไซต์คุณจะวาง URL ของหน้าเว็บที่คุณเข้าสู่ GTmetrix, Pingdom หรือที่ใดก็ได้แล้วกดปุ่ม Analyze ใช้เวลาเพียงไม่กี่วินาที แต่มันจะไม่ดีถ้าคุณสามารถเลือกไอคอนบนเบราว์เซอร์ของคุณและใช้งานได้หรือไม่ หลังจากทำงานผ่านบทช่วยสอนนี้คุณจะสามารถทำเช่นนั้นได้

คุณจะต้องสร้างโฟลเดอร์ในคอมพิวเตอร์ของคุณเพื่อเก็บทุกอย่างเข้าไว้สร้างไฟล์ว่างสามไฟล์ ได้แก่ manifest.json, popup.html และ popup.js คลิกขวาภายในโฟลเดอร์ใหม่ของคุณแล้วเลือกใหม่และไฟล์ข้อความ เปิดไฟล์สามไฟล์แต่ละไฟล์ในโปรแกรมแก้ไขข้อความที่คุณเลือก ตรวจสอบให้แน่ใจว่า popup.html ถูกบันทึกเป็นไฟล์ HTML และมีการบันทึก popup.js เป็นไฟล์ JavaScript ดาวน์โหลดไอคอนตัวอย่างนี้จาก Google ด้วยเช่นกันเพื่อจุดประสงค์ของบทช่วยสอนนี้

เลือก manifest.json และวางต่อไปนี้:

{"manifest_version": 2, "name": "GTmetrix Page Speed ​​Analyzer", "คำอธิบาย": "ใช้ GTmetrix เพื่อวิเคราะห์ความเร็วในการโหลดหน้าเว็บไซต์", "เวอร์ชั่น": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "สิทธิ์":}

อย่างที่คุณเห็นเราได้ให้ชื่อและคำอธิบายพื้นฐาน นอกจากนี้เรายังเรียกการกระทำของเบราว์เซอร์ที่มีไอคอนที่เราดาวน์โหลดจาก Google ซึ่งจะปรากฏในแถบเบราว์เซอร์ของคุณและ popup.html Popup.html คือสิ่งที่เรียกว่าเมื่อคุณเลือกไอคอนส่วนขยายในเบราว์เซอร์

เปิด popup.html และวางสิ่งต่อไปนี้

http: //popup.js

เครื่องมือวิเคราะห์หน้าเว็บโดยใช้ GTMetrix

ตรวจสอบความเร็วหน้า!

Popup.html คือสิ่งที่เรียกว่าเมื่อคุณเลือกไอคอนส่วนขยายในเบราว์เซอร์ เราได้ตั้งชื่อให้มันมีข้อความว่าป๊อปอัปและเพิ่มปุ่ม การเลือกปุ่มจะเรียก popup.js ซึ่งเป็นไฟล์ที่เราจะดำเนินการต่อไป

เปิด popup.js และวางต่อไปนี้:

document.addEventListener ('DOMContentLoaded', ฟังก์ชัน () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('คลิก', ฟังก์ชัน () {chrome.tabs.getSelected (null, ฟังก์ชั่น = document; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'โพสต์'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, เท็จ);}, เท็จ);

ฉันจะไม่แกล้งรู้จัก JavaScript ซึ่งเป็นสาเหตุที่ทำให้ SitePoint มีไฟล์อยู่แล้ว ทั้งหมดที่ฉันรู้คือมันบอกให้ GTmetrix วิเคราะห์หน้าเว็บในแท็บ Chrome ปัจจุบัน ตรงที่มันบอกว่า 'chrome.tabs.getSelected' ส่วนขยายจะใช้ URL จากแท็บที่ใช้งานอยู่และเข้าไปในเว็บฟอร์ม นั่นคือเท่าที่ฉันสามารถไปได้

ทดสอบส่วนขยาย Chrome ของคุณ

ตอนนี้เรามีกรอบการทำงานพื้นฐานแล้วเราต้องทดสอบเพื่อดูว่ามันทำงานอย่างไร

1. เปิด Chrome เลือกเครื่องมือและส่วนขยายเพิ่มเติม
2. ทำเครื่องหมายที่ช่องถัดจากโหมดนักพัฒนาซอฟต์แวร์เพื่อเปิดใช้งาน
3. เลือกโหลดส่วนขยายที่คลายการแพคแล้วนำทางไปยังไฟล์ที่คุณสร้างขึ้นสำหรับส่วนขยายนี้
4. เลือกตกลงเพื่อโหลดส่วนขยายและควรปรากฏในรายการส่วนขยายของคุณ
5. ทำเครื่องหมายที่ช่องถัดจากเปิดใช้งานในรายการและไอคอนควรปรากฏในเบราว์เซอร์ของคุณ
6. เลือกไอคอนในเบราว์เซอร์เพื่อให้ป๊อปอัปปรากฏขึ้น
7. เลือกปุ่มตรวจสอบหน้านี้ทันที!

คุณควรเห็นหน้ากำลังถูกตรวจสอบและรายงานประสิทธิภาพจาก GTmetrix อย่างที่คุณเห็นจากเว็บไซต์ของฉันในภาพหลักฉันมีงานเล็กน้อยที่ต้องทำเพื่อเร่งการออกแบบใหม่ของฉัน!

การขยายไปข้างหน้า

การสร้างส่วนขยาย Chrome ของคุณเองนั้นไม่ยากอย่างที่คิด ในขณะที่มันช่วยให้เริ่มต้นด้วยการรู้รหัสเพียงเล็กน้อยมีแหล่งข้อมูลออนไลน์นับร้อยที่จะแสดงให้คุณเห็น นอกจากนี้ Google ยังมีที่เก็บข้อมูลขนาดใหญ่บทแนะนำและคำแนะนำแบบต่างๆที่จะช่วยได้ ฉันใช้หน้านี้จากเว็บไซต์ Google Developer เพื่อช่วยฉันในส่วนขยายนี้ หน้านี้จะนำคุณไปสู่ทุกส่วนของการสร้างส่วนขยายและนำเสนอไอคอนที่เราใช้ก่อนหน้านี้

ด้วยการวิจัยที่เพียงพอคุณสามารถสร้างส่วนขยายที่ทำทุกอย่างที่เบราว์เซอร์สามารถทำได้ ส่วนขยายที่ดีที่สุดใน Chrome store มาจากส่วนบุคคลและไม่ใช่ บริษัท ซึ่งพิสูจน์ว่าคุณสามารถสร้างของคุณเองได้

ให้เครดิตกับ John Sonmez ทั้งหมดที่ SitePoint สำหรับคำแนะนำดั้งเดิม เขาทำงานหนักฉันเพิ่งจัดระเบียบใหม่และอัพเดทเล็กน้อย

คุณสร้างส่วนขยาย Chrome ของคุณเองหรือยัง ต้องการโปรโมตหรือแชร์หรือไม่ แจ้งให้เราทราบด้านล่างหากคุณทำ!