ส่วนขยายการแก้ไขข้อบกพร่อง

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

ก่อนเริ่มต้น

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

หยุดส่วนขยาย

บทแนะนำนี้จะแยกคอมโพเนนต์ของส่วนขยายทีละ 1 รายการไปใช้ และจะสาธิตวิธีแก้ไข อย่าลืมเลิกทำข้อบกพร่องที่อธิบายไว้ในส่วนหนึ่งก่อนที่จะไปยังส่วนถัดไป เริ่มด้วยการดาวน์โหลดตัวอย่างสีเสียใน GitHub

แก้ไขข้อบกพร่องของไฟล์ Manifest

ก่อนอื่น ให้แบ่งไฟล์ Manifest โดยเปลี่ยนคีย์ "version" เป็น "versions" ดังนี้

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

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

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

กล่องโต้ตอบข้อผิดพลาดเกี่ยวกับคีย์ไฟล์ Manifest ไม่ถูกต้อง

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

เลิกทำการเปลี่ยนแปลงนั้นและป้อนสิทธิ์ที่ไม่ถูกต้องเพื่อดูว่าเกิดอะไรขึ้น เปลี่ยนสิทธิ์ "activeTab" ให้เป็นตัวพิมพ์เล็ก "activetab":

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

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

Permission 'activetab' is unknown or URL pattern is malformed.

การค้นหาข้อความแสดงข้อผิดพลาดโดยคลิกปุ่ม "ข้อผิดพลาด"

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

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

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

แก้ไขข้อบกพร่อง Service Worker

การค้นหาบันทึก

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

บันทึก Service Worker ในแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ประเด็นหลัก: การตรวจสอบ Service Worker จะทำให้โปรแกรมทำงานอยู่ตลอดเวลา อย่าลืมปิดเครื่องมือสำหรับนักพัฒนาเว็บเพื่อให้ส่วนขยายทำงานได้อย่างถูกต้องเมื่อสิ้นสุดการให้บริการ

ข้อผิดพลาดในการค้นหา

มาลองแบ่ง Service Worker โดยเปลี่ยน onInstalled เป็นตัวพิมพ์เล็ก oninstalled ดังนี้

service-worker.js

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

รีเฟรชและคลิกข้อผิดพลาดเพื่อดูบันทึกข้อผิดพลาด ข้อผิดพลาดแรกช่วยให้คุณทราบว่า Service Worker ลงทะเบียนไม่สำเร็จ หมายความว่าเกิดข้อผิดพลาดระหว่างการเริ่มต้น:

Service worker registration failed. Status code: 15.

ข้อความแสดงข้อผิดพลาดในการลงทะเบียน Service Worker

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

ข้อผิดพลาดที่เกิดขึ้นจริงจะเกิดขึ้นหลังจากนี้

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

ข้อความ TypeError ที่ไม่ถูกตรวจจับ

เลิกทำข้อบกพร่องที่เราแนะนำ คลิกล้างทั้งหมดที่มุมขวาบน แล้วโหลดส่วนขยายซ้ำ

ตรวจสอบสถานะ Service Worker

คุณจะระบุได้ว่าโปรแกรมทำงานของบริการตื่นขึ้นมาเมื่อใดเพื่อทำงานโดยทําตามขั้นตอนต่อไปนี้

1. คัดลอกรหัสส่วนขยายที่อยู่เหนือ "ตรวจสอบมุมมอง"

   

   รหัสส่วนขยายในหน้าการจัดการส่วนขยาย

2. เปิดไฟล์ Manifest ในเบราว์เซอร์ ตัวอย่างเช่น text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. ตรวจสอบไฟล์
4. ไปที่แผงแอปพลิเคชัน
5. ไปที่แผง Service Workers

หากต้องการทดสอบรหัส ให้เริ่มหรือหยุด Service Worker โดยใช้ลิงก์ที่อยู่ข้างสถานะ

สถานะของ Service Worker ในแผงแอปพลิเคชัน (คลิกเพื่อขยายรูปภาพ)

นอกจากนี้ หากคุณได้ทำการเปลี่ยนแปลงโค้ด Service Worker คุณสามารถคลิก Update หรือ skipWaiting เพื่อนำการเปลี่ยนแปลงไปใช้ได้ทันที

การรีเฟรช Service Worker ในแผงแอปพลิเคชัน (คลิกเพื่อขยายรูปภาพ)

หมายเหตุ: โปรดทราบว่าการดำเนินการนี้จะไม่โหลดคอมโพเนนต์ส่วนขยายอื่นๆ ซ้ำ

ดีบักป๊อปอัป

เมื่อส่วนขยายเริ่มต้นอย่างถูกต้องแล้ว เราจะคั่นป๊อปอัปด้วยการแสดงความคิดเห็นเกี่ยวกับบรรทัดที่ไฮไลต์ด้านล่าง:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

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

Uncaught ReferenceError: tabs is not defined

หน้าการจัดการส่วนขยายที่แสดงข้อผิดพลาดแบบป๊อปอัป

คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาเว็บของป๊อปอัปได้โดยตรวจสอบป๊อปอัป

เครื่องมือสำหรับนักพัฒนาเว็บแสดงข้อผิดพลาดเกี่ยวกับป๊อปอัป

ข้อผิดพลาด tabs is undefined บอกว่าส่วนขยายไม่ทราบว่าจะแทรกสคริปต์เนื้อหาไว้ที่ใด ซึ่งแก้ไขได้ด้วยการเรียกใช้ tabs.query() แล้วเลือกแท็บที่ใช้งานอยู่

หากต้องการอัปเดตโค้ด ให้คลิกปุ่มล้างทั้งหมดที่มุมขวาบน แล้วโหลดส่วนขยายซ้ำ

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

แก้ไขข้อบกพร่องของสคริปต์เนื้อหา

ตอนนี้เรามาแบ่งสคริปต์เนื้อหาโดยการเปลี่ยนตัวแปร "color" เป็น "colors" กัน

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

รีเฟรชหน้าเว็บ เปิดป๊อปอัป แล้วคลิกช่องสีเขียว ไม่มีอะไรเกิดขึ้น

ปุ่มข้อผิดพลาดจะไม่ปรากฏขึ้นหากคุณไปที่หน้าการจัดการส่วนขยาย เนื่องจากระบบจะบันทึกเฉพาะข้อผิดพลาดเกี่ยวกับรันไทม์เท่านั้น console.warning และ console.error ในหน้าการจัดการส่วนขยาย

สคริปต์เนื้อหาทำงานภายในเว็บไซต์ ดังนั้น ในการค้นหาข้อผิดพลาดเหล่านี้ เราจึงต้องตรวจสอบหน้าเว็บที่ส่วนขยายพยายามแก้ไข

Uncaught ReferenceError: colors is not defined

ข้อผิดพลาดของส่วนขยายแสดงในคอนโซลหน้าเว็บ

หากต้องการใช้เครื่องมือสำหรับนักพัฒนาเว็บจากภายในสคริปต์เนื้อหา ให้คลิกลูกศรแบบเลื่อนลงถัดจากด้านบน และเลือกส่วนขยาย

Uncaught ReferenceError: ไม่ได้กำหนดสี

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

ตรวจสอบคำขอเครือข่าย

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

รีเฟรชในแผงเครือข่ายเพื่อดูคำขอเครือข่ายป๊อปอัป

ประกาศสิทธิ์

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

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

ประเด็นสำคัญ: หากต้องการเรียก fetch() ไปยังเซิร์ฟเวอร์ภายนอก คุณต้องประกาศ URL เป็นสิทธิ์โฮสต์

อ่านเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome โดยอ่านเอกสารประกอบ