เรียนรู้พื้นฐานการพัฒนาส่วนขยาย Chrome ด้วยการสร้างส่วนขยาย Hello World แรกของคุณ
ภาพรวม
คุณจะสร้างป้าย "สวัสดีชาวโลก" เช่น โหลดส่วนขยายในเครื่อง ค้นหาบันทึก และสำรวจคำแนะนำอื่นๆ
สวัสดีทุกคน
ส่วนขยายนี้จะแสดง "สวัสดีส่วนขยาย" เมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือส่วนขยาย
![ส่วนขยาย Hello](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=9&hl=th)
เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่เพื่อจัดเก็บไฟล์ส่วนขยาย หากต้องการ คุณสามารถดาวน์โหลดข้อมูล ซอร์สโค้ดจาก GitHub
จากนั้นให้สร้างไฟล์ใหม่ในไดเรกทอรีนี้ชื่อ manifest.json
ไฟล์ JSON นี้อธิบายถึง
ความสามารถและการกำหนดค่า ตัวอย่างเช่น ไฟล์ Manifest ส่วนใหญ่มีคีย์ "action"
ซึ่งแจ้งว่า
รูปภาพที่ Chrome ควรใช้เป็นไอคอนการทำงานของส่วนขยาย และหน้า HTML เพื่อแสดงในป๊อปอัปเมื่อ
ผู้ใช้คลิกไอคอนการดำเนินการของส่วนขยาย
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
ดาวน์โหลดไอคอนลงในไดเรกทอรีและเปลี่ยนชื่อให้ตรงกับสิ่งที่อยู่ในคีย์ "default_icon"
สำหรับป๊อปอัป ให้สร้างไฟล์ชื่อ hello.html
และเพิ่มโค้ดต่อไปนี้
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
ตอนนี้ส่วนขยายจะแสดงป๊อปอัปเมื่อมีการคลิกไอคอนการทำงานของส่วนขยาย (ไอคอนแถบเครื่องมือ) โดยคุณสามารถทดสอบ ไว้ใน Chrome โดยการโหลดในเครื่อง ตรวจสอบว่าได้บันทึกไฟล์ทั้งหมดแล้ว
โหลดส่วนขยายที่คลายการแพคแล้ว
วิธีโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์
- ไปที่หน้าส่วนขยายโดยป้อน
chrome://extensions
ในแท็บใหม่ (ตามการออกแบบchrome://
URL ไม่สามารถลิงก์ได้)- หรือคลิกปุ่มปริศนาเมนูส่วนขยาย แล้วเลือกจัดการส่วนขยายที่ด้านล่างของเมนู
- หรือคลิกเมนู Chrome วางเมาส์เหนือเครื่องมือเพิ่มเติม แล้วเลือกส่วนขยาย
- เปิดใช้โหมดนักพัฒนาซอฟต์แวร์โดยคลิกสวิตช์เปิด/ปิดข้างโหมดนักพัฒนาซอฟต์แวร์
- คลิกปุ่มโหลดข้อมูลที่คลายการแพคแล้วและเลือกไดเรกทอรีส่วนขยาย
วันที่ หน้าส่วนขยาย (chrome://extensions)
นี่ไง! ติดตั้งส่วนขยายสำเร็จแล้ว หากไม่มีไอคอนส่วนขยายอยู่ใน ไฟล์ Manifest จะมีการสร้างไอคอนทั่วไปสำหรับส่วนขยาย
ปักหมุดส่วนขยาย
โดยค่าเริ่มต้น เมื่อคุณโหลดส่วนขยายในเครื่อง ส่วนขยายจะปรากฏในเมนูส่วนขยาย () ปักหมุดส่วนขยายไว้ที่แถบเครื่องมือเพื่อให้เข้าถึงส่วนขยายได้อย่างรวดเร็วในระหว่างการพัฒนา
![การปักหมุดส่วนขยาย](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=9&hl=th)
คลิกไอคอนการทำงานของส่วนขยาย (ไอคอนแถบเครื่องมือ) คุณจะเห็นป๊อปอัป
![ส่วนขยาย Hello World](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=9&hl=th)
โหลดส่วนขยายซ้ำ
กลับไปที่โค้ดและเปลี่ยนชื่อส่วนขยายเป็น " Hello Extensions of the world!" ในไฟล์ Manifest
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
หลังจากบันทึกไฟล์แล้ว คุณยังต้องรีเฟรชส่วนขยายเพื่อดูการเปลี่ยนแปลงนี้ในเบราว์เซอร์ เริ่ม ไปที่หน้าส่วนขยาย และคลิกไอคอนรีเฟรชข้างปุ่มสลับเปิด/ปิด ดังนี้
ควรโหลดส่วนขยายซ้ำเมื่อใด
ตารางต่อไปนี้แสดงคอมโพเนนต์ที่ต้องโหลดซ้ำเพื่อดูการเปลี่ยนแปลง
คอมโพเนนต์ส่วนขยาย | ต้องโหลดส่วนขยายซ้ำ |
---|---|
ไฟล์ Manifest | ใช่ |
Service Worker | ใช่ |
สคริปต์เนื้อหา | มี (รวมถึงหน้าโฮสต์) |
ป๊อปอัป | ไม่ได้ |
หน้าตัวเลือก | ไม่ได้ |
หน้า HTML ของส่วนขยายอื่นๆ | ไม่ได้ |
ค้นหาบันทึกและข้อผิดพลาดของคอนโซล
บันทึกของคอนโซล
ระหว่างการพัฒนา คุณจะดีบักโค้ดได้โดยเข้าถึงบันทึกของคอนโซลเบราว์เซอร์ ในกรณีนี้ เราจะ
จะค้นหาบันทึกสำหรับป๊อปอัป เริ่มต้นด้วยการเพิ่มแท็กสคริปต์ลงใน hello.html
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
สร้างไฟล์ popup.js
และเพิ่มโค้ดต่อไปนี้
console.log("This is a popup!")
หากต้องการดูข้อความนี้ที่บันทึกไว้ในคอนโซล ให้ทำดังนี้
- เปิดป๊อปอัป
- คลิกขวาที่ป๊อปอัป
- เลือกตรวจสอบ
วันที่ กำลังตรวจสอบป๊อปอัป - ในDevTools ให้ไปที่แผงคอนโซล
วันที่ ตรวจสอบป๊อปอัป
บันทึกข้อผิดพลาด
ตอนนี้เรามาแตกส่วนขยายกัน ซึ่งทำได้โดยนำเครื่องหมายคำพูดปิดใน popup.js
ออก
console.log("This is a popup!) // ❌ broken code
ไปที่หน้าส่วนขยายและเปิดป๊อปอัป ปุ่มข้อผิดพลาดจะปรากฏขึ้น
คลิกปุ่มข้อผิดพลาดเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดต่อไปนี้
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อบกพร่องของโปรแกรมทำงานของบริการ หน้าตัวเลือก และสคริปต์เนื้อหา โปรดดูการแก้ไขข้อบกพร่อง ส่วนขยาย
จัดโครงสร้างโปรเจ็กต์ส่วนขยาย
การจัดโครงสร้างโปรเจ็กต์ส่วนขยายทำได้หลายวิธี แต่ข้อกำหนดเบื้องต้นเพียงอย่างเดียวคือ Manifest.json ในไดเรกทอรีรากของส่วนขยายตามตัวอย่างต่อไปนี้
ใช้ TypeScript
หากคุณพัฒนาโดยใช้ตัวแก้ไขโค้ด เช่น VSCode หรือ Atom คุณสามารถใช้ npm สร้างแพ็กเกจ chrome-type เพื่อใช้การเติมข้อความอัตโนมัติสำหรับ Chrome API แพ็กเกจ npm นี้จะอัปเดตโดยอัตโนมัติเมื่อซอร์สโค้ด Chromium การเปลี่ยนแปลง
🚀 พร้อมเริ่มสร้างแล้วใช่ไหม
เลือกบทแนะนำต่อไปนี้เพื่อเริ่มต้นเส้นทางการเรียนรู้ส่วนขยายของคุณ
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
เรียกใช้สคริปต์ในทุกหน้า | เพื่อแทรกองค์ประกอบในทุกหน้าโดยอัตโนมัติ |
แทรกสคริปต์ลงในแท็บที่ใช้งานอยู่ | หากต้องการเรียกใช้โค้ดในหน้าปัจจุบันหลังจากคลิกการดำเนินการของส่วนขยาย |
จัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
จัดการเหตุการณ์ต่างๆ ด้วย Service Worker | วิธีที่โปรแกรมทำงานของบริการส่วนขยายจัดการกับเหตุการณ์ |