ส่วนขยายสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ไม่ถูกต้อง ส่วนขยายจะไม่สามารถโหลดได้ แต่ 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
คุณจะระบุได้ว่าโปรแกรมทำงานของบริการตื่นขึ้นมาเมื่อใดเพื่อทำงานโดยทําตามขั้นตอนต่อไปนี้
- คัดลอกรหัสส่วนขยายที่อยู่เหนือ "ตรวจสอบมุมมอง"
- เปิดไฟล์ Manifest ในเบราว์เซอร์ ตัวอย่างเช่น
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- ตรวจสอบไฟล์
- ไปที่แผงแอปพลิเคชัน
- ไปที่แผง Service Workers
หากต้องการทดสอบรหัส ให้เริ่มหรือหยุด Service Worker โดยใช้ลิงก์ที่อยู่ข้างสถานะ
นอกจากนี้ หากคุณได้ทำการเปลี่ยนแปลงโค้ด Service Worker คุณสามารถคลิก Update หรือ skipWaiting เพื่อนำการเปลี่ยนแปลงไปใช้ได้ทันที
ดีบักป๊อปอัป
เมื่อส่วนขยายเริ่มต้นอย่างถูกต้องแล้ว เราจะคั่นป๊อปอัปด้วยการแสดงความคิดเห็นเกี่ยวกับบรรทัดที่ไฮไลต์ด้านล่าง:
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 โดยอ่านเอกสารประกอบ