ส่วนขยาย Hello World

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

ภาพรวม

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

สวัสดีทุกคน

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

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

เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่เพื่อจัดเก็บไฟล์ส่วนขยาย หากต้องการ คุณสามารถดาวน์โหลดข้อมูล ซอร์สโค้ดจาก 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 ในแท็บใหม่ (ตามการออกแบบ chrome:// URL ไม่สามารถลิงก์ได้)
    • หรือคลิกปุ่มปริศนาเมนูส่วนขยาย แล้วเลือกจัดการส่วนขยายที่ด้านล่างของเมนู
    • หรือคลิกเมนู 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-type เพื่อใช้การเติมข้อความอัตโนมัติสำหรับ Chrome API แพ็กเกจ npm นี้จะอัปเดตโดยอัตโนมัติเมื่อซอร์สโค้ด Chromium การเปลี่ยนแปลง

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

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

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