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

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

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

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

นำส่วนขยายออก

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

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

manifest.json:

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

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

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

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

วันที่

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

ค้นหาบันทึก

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

วันที่

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

มาดูตัวอย่างการทำงานของ 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.

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

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

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

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

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

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

   วันที่

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

หากต้องการทดสอบโค้ด ให้เริ่มหรือหยุด Service Worker โดยใช้ลิงก์ข้าง status

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

แก้ไขข้อบกพร่องของป๊อปอัป

ตอนนี้ส่วนขยายเริ่มทำงานได้ถูกต้องแล้ว ลองแตกป๊อปอัปนี้ด้วยการใส่บรรทัดที่ไฮไลต์ด้านล่าง

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

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

วันที่

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

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

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

วันที่

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

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

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

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

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