ส่วนขยายสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ที่ไม่ถูกต้องซึ่งเรียกกล่องโต้ตอบแสดงข้อผิดพลาดเมื่อพยายามโหลด](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/an-extension-an-invalid-9ab91f867f94c.png?authuser=19&hl=th)
เมื่อคีย์ไฟล์ Manifest ไม่ถูกต้อง ส่วนขยายจะไม่โหลด แต่ Chrome ให้คำแนะนำแก่คุณว่า วิธีแก้ไขปัญหา
เลิกทำการเปลี่ยนแปลงและป้อนสิทธิ์ที่ไม่ถูกต้องเพื่อดูสิ่งที่เกิดขึ้น
เปลี่ยนสิทธิ์ "activeTab"
ให้เป็น "activetab"
ตัวพิมพ์เล็ก:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
บันทึกส่วนขยายแล้วลองโหลดอีกครั้ง ในครั้งนี้ควรโหลดได้สำเร็จ ในส่วนขยาย ในหน้าการจัดการ คุณจะเห็นปุ่ม 3 ปุ่ม ได้แก่ รายละเอียด นำออก และข้อผิดพลาด ข้อผิดพลาด ป้ายกำกับของปุ่มจะเปลี่ยนเป็นสีแดงเมื่อมีข้อผิดพลาด คลิกปุ่มข้อผิดพลาดเพื่อดู ข้อผิดพลาดต่อไปนี้
Permission 'activetab' is unknown or URL pattern is malformed.
![คลิกปุ่มข้อผิดพลาดและแสดงข้อผิดพลาด](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/error-button-is-clicked-a7713a11553a.gif?authuser=19&hl=th)
ก่อนดำเนินการต่อ ให้เปลี่ยนสิทธิ์อีกครั้ง คลิกล้างทั้งหมดที่มุมขวาบนเพื่อล้างบันทึกและโหลดส่วนขยายซ้ำ
![ปุ่มล้างทั้งหมด](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/clear-button-2f67dd9230519.png?authuser=19&hl=th)
แก้ไขข้อบกพร่องของ Service Worker
ค้นหาบันทึก
Service Worker จะตั้งค่าสีเริ่มต้นให้กับพื้นที่เก็บข้อมูลและบันทึกไปยังคอนโซล หากต้องการดูบันทึกนี้ ให้เปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยเลือกลิงก์สีน้ำเงินข้างตรวจสอบมุมมอง
![กำลังเปิดเครื่องมือสำหรับนักพัฒนาเว็บสำหรับโปรแกรมทำงานของบริการส่วนขยาย](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/opening-devtools-the-ex-685e204e20773.png?authuser=19&hl=th)
ข้อผิดพลาดในการค้นหา
มาดูตัวอย่างการทำงานของ 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 ไม่สำเร็จ รหัสสถานะ: ข้อความแสดงข้อผิดพลาด 15](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/service-worker-registrati-9791df79120e6.png?authuser=19&hl=th)
ข้อผิดพลาดจริงจะเกิดขึ้นหลังจาก
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
![Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติของข้อความแสดงข้อผิดพลาดที่ไม่ได้ระบุ](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-typeerror-canno-45ae014961338.png?authuser=19&hl=th)
เลิกทำข้อบกพร่องที่เราได้แนะนำไป คลิกล้างทั้งหมดที่มุมขวาบน แล้วโหลดส่วนขยายซ้ำ
ตรวจสอบสถานะของ Service Worker
คุณสามารถระบุเมื่อโปรแกรมทำงานของบริการตื่นขึ้นมาเพื่อทำงาน โดยทำตามขั้นตอนต่อไปนี้
- คัดลอกรหัสส่วนขยายที่อยู่เหนือ "ตรวจสอบการแสดงผล"
วันที่ รหัสส่วนขยายในหน้าการจัดการส่วนขยาย - เปิดไฟล์ Manifest ในเบราว์เซอร์ ตัวอย่างเช่น
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- ตรวจสอบไฟล์
- ไปที่แผงแอปพลิเคชัน
- ไปที่แผง Service Workers
หากต้องการทดสอบโค้ด ให้เริ่มหรือหยุด Service Worker โดยใช้ลิงก์ข้าง status
![สถานะโปรแกรมทำงานของบริการในแผงแอปพลิเคชัน](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/start-stop-service-worker.png?auto=format&w=845&authuser=19&hl=th)
นอกจากนี้ หากคุณได้เปลี่ยนแปลงรหัสโปรแกรมทำงานของบริการ คุณสามารถคลิกอัปเดตหรือข้ามรอเพื่อใช้การเปลี่ยนแปลงได้ทันที
![สถานะโปรแกรมทำงานของบริการในแผงแอปพลิเคชัน](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/update-or-skipwaiting.png?auto=format&w=845&authuser=19&hl=th)
แก้ไขข้อบกพร่องของป๊อปอัป
ตอนนี้ส่วนขยายเริ่มทำงานได้ถูกต้องแล้ว ลองแตกป๊อปอัปนี้ด้วยการใส่บรรทัดที่ไฮไลต์ด้านล่าง
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
![หน้าการจัดการส่วนขยายที่แสดงข้อผิดพลาดแบบป๊อปอัป](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extensions-management-pag-00a0f48a76239.png?authuser=19&hl=th)
คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาเว็บของป๊อปอัปได้โดยตรวจสอบป๊อปอัป
![เครื่องมือสำหรับนักพัฒนาเว็บแสดงข้อผิดพลาดแบบป๊อปอัป](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/devtools-displaying-popup-0ed24fd80361a.png?authuser=19&hl=th)
ข้อผิดพลาด 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
![ข้อผิดพลาดของส่วนขยายแสดงในคอนโซลหน้าเว็บ](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extension-error-displayed-ca9d8c6c336b.png?authuser=19&hl=th)
หากต้องการใช้เครื่องมือสำหรับนักพัฒนาเว็บจากภายในสคริปต์เนื้อหา ให้คลิกลูกศรแบบเลื่อนลงถัดจากด้านบน และเลือกส่วนขยาย
![Uncaught ReferenceError: ไม่ได้ระบุสี](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-referenceerror-e5847be3a7de9.png?authuser=19&hl=th)
ข้อผิดพลาดระบุว่าไม่ได้กำหนด colors
ส่วนขยายต้องไม่ส่งผ่านตัวแปรอย่างถูกต้อง
แก้ไขสคริปต์ที่แทรกไว้เพื่อส่งตัวแปรสีไปยังโค้ด
ตรวจสอบคำขอเครือข่าย
ป๊อปอัปนี้มักส่งคำขอเครือข่ายที่จำเป็นทั้งหมดก่อนที่จะ ก็สามารถเปิดเครื่องมือสำหรับนักพัฒนาเว็บได้ หากต้องการดูคำขอเหล่านี้ ให้รีเฟรชจากภายในแผงเครือข่าย ทั้งนี้ โหลดป๊อปอัปซ้ำโดยไม่ต้องปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บ
![รีเฟรชภายในแผงเครือข่ายเพื่อดูคำขอเครือข่ายแบบป๊อปอัป](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/refresh-inside-network-p-43993068e650e.gif?authuser=19&hl=th)
ประกาศสิทธิ์
API ส่วนขยายบางรายการ ต้องการสิทธิ์ โปรดอ่านบทความสิทธิ์และบทความ Chrome API เพื่อตรวจสอบว่าส่วนขยายจะขอสิทธิ์ที่ถูกต้องในไฟล์ Manifest
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
อ่านเพิ่มเติม
อ่านเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome