ส่วนขยาย Hello World

เรียนรู้พื้นฐานการพัฒนาส่วนขยาย Chrome โดยการสร้างส่วนขยาย Hello World แรกของคุณ

ภาพรวม

คุณจะได้สร้างตัวอย่าง " Hello World" ขึ้นมา โหลดส่วนขยายในเครื่อง ค้นหาบันทึก และสำรวจคำแนะนำอื่นๆ

Hello World

ส่วนขยายนี้จะแสดง "สวัสดีส่วนขยาย" เมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือของส่วนขยาย

ส่วนขยาย Hello
ป๊อปอัป Hello Extension

เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่เพื่อจัดเก็บไฟล์ส่วนขยาย คุณจะดาวน์โหลดซอร์สโค้ดแบบเต็มได้จาก 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 ได้ด้วยการโหลดในเครื่อง ตรวจสอบว่าได้บันทึกไฟล์ทั้งหมดแล้ว

โหลดส่วนขยายที่คลายการแพคแล้ว

วิธีโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์

  1. ไปที่หน้าส่วนขยายโดยป้อน chrome://extensions ในแท็บใหม่ (โดยการออกแบบ URL chrome:// จะไม่สามารถลิงก์ได้)
    • หรือคลิกปุ่มปริศนาเมนูส่วนขยาย และเลือกจัดการส่วนขยายที่ด้านล่างของเมนู
    • หรือคลิกเมนู Chrome จากนั้นวางเมาส์เหนือเครื่องมือเพิ่มเติมแล้วเลือกส่วนขยาย
  2. เปิดใช้โหมดนักพัฒนาซอฟต์แวร์โดยคลิกสวิตช์เปิด/ปิดข้างโหมดนักพัฒนาซอฟต์แวร์
  3. คลิกปุ่มโหลดข้อมูลที่คลายการแพคแล้ว และเลือกไดเรกทอรีของส่วนขยาย
    หน้าส่วนขยาย
    หน้าส่วนขยาย (chrome://extensions)

นี่ไง! ติดตั้งส่วนขยายสำเร็จแล้ว หากไม่มีไอคอนส่วนขยายอยู่ในไฟล์ Manifest ระบบจะสร้างไอคอนทั่วไปสำหรับส่วนขยาย

ปักหมุดส่วนขยาย

โดยค่าเริ่มต้น เมื่อคุณโหลดส่วนขยายไว้ในเครื่อง ส่วนขยายจะปรากฏในเมนูส่วนขยาย (ปริศนา) ปักหมุดส่วนขยายไว้ที่แถบเครื่องมือเพื่อเข้าถึงส่วนขยายอย่างรวดเร็วในระหว่างการพัฒนา

การปักหมุดส่วนขยาย
การปักหมุดส่วนขยาย

คลิกไอคอนการทำงานของส่วนขยาย (ไอคอนแถบเครื่องมือ) จากนั้นคุณจะเห็นป๊อปอัป

ส่วนขยาย Hello World
ส่วนขยาย Hello World

โหลดส่วนขยายซ้ำ

กลับไปที่โค้ดและเปลี่ยนชื่อส่วนขยายเป็น " 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!")

หากต้องการดูข้อความที่บันทึกในคอนโซล ให้ทำดังนี้

  1. เปิดป๊อปอัป
  2. คลิกขวาที่ป๊อปอัป
  3. เลือกตรวจสอบ
    กำลังตรวจสอบป๊อปอัป
    การตรวจสอบป๊อปอัป
  4. ในDevTools ให้ไปที่แผงคอนโซล
    แผงโค้ดสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ
    การตรวจสอบป๊อปอัป

บันทึกข้อผิดพลาด

ทีนี้เรามาดูรายละเอียดของส่วนขยาย โดยนําเครื่องหมายคําพูดปิดใน popup.js ออก

console.log("This is a popup!) // ❌ broken code

ไปที่หน้าส่วนขยายแล้วเปิดป๊อปอัป ปุ่มข้อผิดพลาดจะปรากฏขึ้น

หน้าส่วนขยายที่มีปุ่มข้อผิดพลาด

คลิกปุ่มข้อผิดพลาดเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาด

รายละเอียดข้อผิดพลาดของส่วนขยาย

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขข้อบกพร่องของโปรแกรมทำงานของบริการ หน้าตัวเลือก และสคริปต์เนื้อหา โปรดดูส่วนขยายการแก้ไขข้อบกพร่อง

วางโครงสร้างโปรเจ็กต์ส่วนขยาย

การจัดโครงสร้างโปรเจ็กต์ส่วนขยายทำได้หลายวิธี แต่ข้อกำหนดเบื้องต้นเพียงอย่างเดียวคือการวางไฟล์ Manifest.json ในไดเรกทอรีรูทของส่วนขยายตามตัวอย่างต่อไปนี้

เนื้อหาของโฟลเดอร์ส่วนขยาย: Manifest.json, background.js, โฟลเดอร์สคริปต์, โฟลเดอร์ป๊อปอัป และโฟลเดอร์รูปภาพ

ใช้ TypeScript

หากคุณพัฒนาโดยใช้ตัวแก้ไขโค้ด เช่น VSCode หรือ Atom คุณจะใช้แพ็กเกจ npm chrome-types เพื่อใช้ประโยชน์จากการเติมข้อมูลอัตโนมัติสำหรับ Chrome API ได้ แพ็กเกจ npm นี้จะอัปเดตโดยอัตโนมัติเมื่อซอร์สโค้ด Chromium มีการเปลี่ยนแปลง

🚀 พร้อมที่จะเริ่มสร้างแล้วใช่ไหม

เลือกบทแนะนำใดก็ได้ต่อไปนี้เพื่อเริ่มเส้นทางการเรียนรู้ส่วนขยาย

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