วิธีการ: การพัฒนาส่วนขยาย Chrome แรกของฉัน

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

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

ไอเดีย 💡

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

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

การตรวจสอบเล็กน้อยก่อนที่จะเริ่ม...

ดังนั้นก่อนที่จะเริ่มต้น ฉันจำเป็นต้องทราบข้อมูลเล็กน้อยเกี่ยวกับไฟล์สำคัญของส่วนขยาย Chrome ฉันจะแสดงรายการและพยายามอธิบาย (อย่างน้อยฉันก็เข้าใจพวกเขา):

รายการ.json

มันเป็นไฟล์งานของทุกส่วนขยายและจำเป็น และจะบอก Chrome ถึงวิธีเรียกใช้และจัดการส่วนขยายของคุณ

ไฟล์ Manifest ประกอบด้วยข้อมูลที่สำคัญเกี่ยวกับส่วนขยายของคุณ เช่น ชื่อ คำอธิบาย หมายเลขเวอร์ชัน และไฟล์ใดที่ต้องเข้าถึง นอกจากนี้ยังระบุด้วยว่าส่วนขยายของคุณต้องการสิทธิ์ใดบ้าง เช่น ความสามารถในการเข้าถึงประวัติการเข้าชมหรือบุ๊กมาร์กของคุณ

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

โปรดทราบว่าเวอร์ชันที่ใช้อยู่ในปัจจุบันคือ 3 สำหรับ manifest_version

ป๊อปอัป.html

โดยพื้นฐานแล้วเป็นไฟล์ HTML ที่กำหนดอินเทอร์เฟซผู้ใช้สำหรับหน้าต่างป๊อปอัปของส่วนขยายของคุณ

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

ในกรณีของเรา ไฟล์ HTML ของเราจะแสดงสามแถวโดยที่เราจะแสดงสีแบบอักษร พื้นหลัง และตระกูลแบบอักษร ในกรณีของเรา เราจะแสดงรายการที่ใช้มากที่สุดสามรายการในแต่ละหมวดหมู่

popup.css

มันไปพร้อมกับ popup.html และกำหนดรูปแบบของส่วนขยายของคุณ มันจะเป็นการออกแบบโค้ด HTML ของคุณและทำให้ส่วนขยายของคุณโดดเด่น Flexbox ตลอดทาง...

popup.js

เป็นตรรกะ JS ที่คุณต้องการเรียกใช้บนส่วนขยายของคุณและรองรับไฟล์ทั้งสองที่กล่าวถึงข้างต้น

สิ่งที่ต้องจำไว้คือมันไม่สามารถเข้าถึงแท็บ DOM ที่ใช้งานอยู่ แต่สามารถเข้าถึงได้จากไฟล์ popup.html เท่านั้น อาจดูเหมือนชัดเจน แต่เป็นสิ่งที่ฉันตระหนักได้ตลอดทาง

เนื้อหา js

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

ไอคอน/

นี่คือโฟลเดอร์ที่เราจะจัดเก็บไอคอนทั้งหมด (ที่มีขนาดต่างกัน) ของส่วนขยายของคุณ ไอคอนนี้เป็นไอคอนที่แสดงในแถบเบราว์เซอร์ของคุณ

… และไฟล์อื่นๆ อีกมากมาย

มีไฟล์หลายประเภทเมื่อพัฒนาส่วนขยาย Chrome แต่ฉันต้องการเน้นไปที่ไฟล์ที่ใช้ในคู่มือนี้ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับไฟล์อื่นๆ เหล่านี้ (เช่น ไฟล์พื้นหลัง …) ฉันขอแนะนำให้คุณไปที่ เอกสารประกอบ จากเจ้าหน้าที่ของ Google

ถึงเวลาเขียนโค้ด 🧑‍💻

ฉันพยายามวาดภาพว่ากระแสจะเป็นอย่างไรในส่วนขยายของเรา แต่เมื่อภาพวาดของฉันห่วย ฉันจะอธิบายด้วยคำพูดของฉันเอง

โดยพื้นฐานแล้ว เมื่อเพจใหม่ถูกเรนเดอร์ (เหตุการณ์จะถูกฟังโดยไฟล์ popup.js) เราจำเป็นต้องเรียกสคริปต์เนื้อหา (content.js) เพื่อขูด DOM ของเพจของแท็บ และจัดเรียงตามหมวดหมู่ที่ใช้มากที่สุดสามหมวดหมู่: ตระกูลแบบอักษร สีพื้นหลัง และสีแบบอักษร เมื่อมันถูกคัดลอกและเรามีข้อมูลนี้แล้ว เราจะต้องส่งมันกลับไปยังไฟล์ popup.js ซึ่งจะเป็นผู้รับผิดชอบการวาดภาพข้อมูลนี้ในป๊อปอัป

เรามาอธิบายว่าไฟล์ popup.js ของเราจะมีลักษณะอย่างไร:

ที่ด้านล่างของไฟล์ ตามที่กล่าวไว้ เราจะเริ่มฟังเมื่อเหตุการณ์ที่ DOM ถูกโหลดโดยใช้เหตุการณ์ DOMContentLoaded จากนั้นเราจะค้นหาแท็บที่ใช้งานอยู่ซึ่งมีผู้ใช้อยู่ และเราจะเรียกฟังก์ชัน injectContentScript ซึ่งอธิบายได้ในตัว ด้วยผลลัพธ์เหล่านั้น เราจะแก้ไข DOM ของป๊อปอัปโดยเพิ่มผลลัพธ์ในองค์ประกอบ HTML ที่เกี่ยวข้อง

ตอนนี้เรามาดูรายละเอียดเพิ่มเติมว่าไฟล์ content.js กำลังทำอะไรอยู่:

กระบวนการประกอบด้วย:

1. อ่านสไตล์องค์ประกอบทั้งหมดจากเฟรมหลักของหน้า DOM
2. แมปแอตทริบิวต์ทั้งสามที่เราสนใจ และแปลงรหัสสี (ซึ่งป้อนด้วย RGB หรือ RGBA) เป็นรหัสสีฐานสิบหกด้วยฟังก์ชันตัวช่วยแบบกำหนดเอง
3. จัดเรียงตามจำนวนครั้ง ทิ้งทั้งสีดำและสีขาว (เนื่องจากฉันไม่คิดว่ามันมีประโยชน์สำหรับจุดประสงค์ของเรา)
4. ส่งกลับผลลัพธ์เป็นวัตถุที่มีสามอาร์เรย์

นี่คือลักษณะของโครงสร้างโฟลเดอร์ที่จะเป็นอย่างไร...

บทสรุป

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

ขอย้ำอีกครั้งว่าฉันไม่ใช่ผู้เชี่ยวชาญ และนี่เป็นเพียงวิธีการเล่นและเรียนรู้สิ่งใหม่ๆ :)

🙌 🙌 🙌 ขอบคุณที่อ่านมาจนถึงตอนนี้!

คุณสามารถดูรหัสเต็มได้ที่นี่.