เรียนรู้พื้นฐานการพัฒนาส่วนขยาย Chrome โดยการสร้างส่วนขยาย Hello World แรกของคุณ
ภาพรวม
คุณจะได้สร้างตัวอย่าง " Hello World" ขึ้นมา โหลดส่วนขยายในเครื่อง ค้นหาบันทึก และสำรวจคำแนะนำอื่นๆ
Hello World
ส่วนขยายนี้จะแสดง "สวัสดีส่วนขยาย" เมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือของส่วนขยาย
![ส่วนขยาย Hello](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=5&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
ในแท็บใหม่ (โดยการออกแบบ URLchrome://
จะไม่สามารถลิงก์ได้)- หรือคลิกปุ่มปริศนาเมนูส่วนขยาย และเลือกจัดการส่วนขยายที่ด้านล่างของเมนู
- หรือคลิกเมนู Chrome จากนั้นวางเมาส์เหนือเครื่องมือเพิ่มเติมแล้วเลือกส่วนขยาย
- เปิดใช้โหมดนักพัฒนาซอฟต์แวร์โดยคลิกสวิตช์เปิด/ปิดข้างโหมดนักพัฒนาซอฟต์แวร์
- คลิกปุ่มโหลดข้อมูลที่คลายการแพคแล้ว และเลือกไดเรกทอรีของส่วนขยาย
หน้าส่วนขยาย (chrome://extensions)
นี่ไง! ติดตั้งส่วนขยายสำเร็จแล้ว หากไม่มีไอคอนส่วนขยายอยู่ในไฟล์ Manifest ระบบจะสร้างไอคอนทั่วไปสำหรับส่วนขยาย
ปักหมุดส่วนขยาย
โดยค่าเริ่มต้น เมื่อคุณโหลดส่วนขยายไว้ในเครื่อง ส่วนขยายจะปรากฏในเมนูส่วนขยาย () ปักหมุดส่วนขยายไว้ที่แถบเครื่องมือเพื่อเข้าถึงส่วนขยายอย่างรวดเร็วในระหว่างการพัฒนา
![การปักหมุดส่วนขยาย](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=5&hl=th)
คลิกไอคอนการทำงานของส่วนขยาย (ไอคอนแถบเครื่องมือ) จากนั้นคุณจะเห็นป๊อปอัป
![ส่วนขยาย Hello World](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=5&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-types เพื่อใช้ประโยชน์จากการเติมข้อมูลอัตโนมัติสำหรับ Chrome API ได้ แพ็กเกจ npm นี้จะอัปเดตโดยอัตโนมัติเมื่อซอร์สโค้ด Chromium มีการเปลี่ยนแปลง
🚀 พร้อมที่จะเริ่มสร้างแล้วใช่ไหม
เลือกบทแนะนำใดก็ได้ต่อไปนี้เพื่อเริ่มเส้นทางการเรียนรู้ส่วนขยาย
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
เรียกใช้สคริปต์ในทุกหน้า | แทรกองค์ประกอบในทุกหน้าโดยอัตโนมัติ |
แทรกสคริปต์ลงในแท็บที่ใช้งานอยู่ | หากต้องการเรียกใช้โค้ดบนหน้าปัจจุบันหลังจากคลิกการทำงานของส่วนขยาย |
จัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
จัดการเหตุการณ์ด้วย Service Worker | วิธีที่โปรแกรมทำงานของบริการส่วนขยายจัดการกับเหตุการณ์ |