ส่วนขยายสามารถใช้ประโยชน์จากการแก้ไขข้อบกพร่องแบบเดียวกันที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีให้สำหรับหน้าเว็บ แต่จะมีคุณสมบัติด้านลักษณะการทำงานที่ไม่เหมือนใคร การจะเป็นโปรแกรมแก้ไขข้อบกพร่องของส่วนขยายหลักได้นั้น ต้องอาศัยความเข้าใจเกี่ยวกับลักษณะการทำงานเหล่านี้ การทำงานร่วมกันของคอมโพเนนต์ต่างๆ ของส่วนขยาย และมุมที่ควรแก้ไขข้อบกพร่อง บทแนะนำนี้จะช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจพื้นฐานการแก้ไขข้อบกพร่องของส่วนขยาย
ค้นหาบันทึก
ส่วนขยายสร้างจากคอมโพเนนต์ที่แตกต่างกัน และคอมโพเนนต์เหล่านี้มีหน้าที่ของตัวเอง ดาวน์โหลดส่วนขยายที่ใช้งานไม่ได้ที่นี่เพื่อเริ่มค้นหาบันทึกข้อผิดพลาดสำหรับคอมโพเนนต์ส่วนขยายต่างๆ
สคริปต์ที่ทำงานอยู่เบื้องหลัง
ไปที่หน้าการจัดการส่วนขยาย Chrome ที่ chrome://extensions
และตรวจสอบว่าโหมดนักพัฒนาซอฟต์แวร์เปิดอยู่ คลิกปุ่มโหลดข้อมูลที่คลายการแพคข้อมูล และเลือกไดเรกทอรีส่วนขยายที่เสีย หลังจากโหลดส่วนขยายแล้ว ส่วนขยายจะมีปุ่ม 3 ปุ่ม ได้แก่ รายละเอียด นำออก และข้อผิดพลาดเป็นตัวอักษรสีแดง
คลิกปุ่มข้อผิดพลาดเพื่อดูบันทึกข้อผิดพลาด ระบบส่วนขยายพบปัญหาใน สคริปต์พื้นหลัง
Uncaught TypeError: Cannot read property 'addListener' of undefined
นอกจากนี้ คุณยังเปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูสคริปต์เบื้องหลังได้ด้วยการเลือกลิงก์สีน้ำเงินข้างตรวจสอบมุมมอง
กลับไปที่รหัส
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
สคริปต์ที่ทำงานอยู่เบื้องหลังพยายามตรวจจับเหตุการณ์ onInstalled
แต่ชื่อพร็อพเพอร์ตี้ต้องเป็น "I" ตัวพิมพ์ใหญ่ อัปเดตรหัสเพื่อให้แสดงการโทรที่ถูกต้อง คลิกปุ่มล้างทั้งหมดที่มุมบนขวา แล้วโหลดส่วนขยายซ้ำ
ป๊อปอัป
เมื่อส่วนขยายเริ่มต้นอย่างถูกต้องแล้ว จึงทดสอบคอมโพเนนต์อื่นๆ ได้ รีเฟรชหน้านี้ หรือเปิดแท็บใหม่แล้วไปยังหน้าใดก็ได้ใน developer.chrome.com จากนั้นเปิดป๊อปอัปและคลิกสี่เหลี่ยมจัตุรัสสีเขียว และ... ไม่มีอะไรเกิดขึ้น
กลับไปที่หน้าการจัดการส่วนขยาย ปุ่มข้อผิดพลาดจะปรากฏขึ้นอีกครั้ง คลิกไอคอนเพื่อดูบันทึกใหม่
Uncaught ReferenceError: tabs is not defined
คุณยังสามารถดูข้อผิดพลาดเกี่ยวกับป๊อปอัปได้โดยการตรวจสอบป๊อปอัป
ข้อผิดพลาด tabs is undefined
กล่าวว่าส่วนขยายไม่ทราบตำแหน่งที่จะแทรกสคริปต์เนื้อหา
ซึ่งแก้ไขได้โดยเรียกใช้เมธอด tabs.query()
แล้วเลือกแท็บที่ใช้งานอยู่
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
อัปเดตรหัส คลิกปุ่มล้างทั้งหมดที่มุมบนขวา แล้วโหลดส่วนขยายซ้ำ
สคริปต์เนื้อหา
รีเฟรชหน้าเว็บ เปิดป๊อปอัป แล้วคลิกช่องสีเขียว และ... ไม่ พื้นหลัง ยังไม่เปลี่ยนสีนะ กลับไปที่หน้าการจัดการส่วนขยาย แล้ว... จะไม่มีปุ่มข้อผิดพลาด สาเหตุที่เป็นไปได้คือสคริปต์เนื้อหาที่ทำงานภายในหน้าเว็บ
เปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บของหน้าเว็บที่ส่วนขยายพยายามแก้ไข
เฉพาะข้อผิดพลาดรันไทม์เท่านั้นที่จะบันทึก console.warning
และ console.error
ในหน้าการจัดการส่วนขยาย
หากต้องการใช้เครื่องมือสำหรับนักพัฒนาเว็บจากภายในสคริปต์เนื้อหา ให้คลิกลูกศรแบบเลื่อนลงถัดจากด้านบน และเลือกส่วนขยาย
ข้อผิดพลาดระบุว่าไม่ได้กำหนด color
ส่วนขยายต้องไม่ส่งตัวแปรอย่างถูกต้อง
แก้ไขสคริปต์ที่แทรกไว้เพื่อส่งตัวแปรสีไปยังโค้ด
{code: 'document.body.style.backgroundColor = "' + color + '";'});
แท็บส่วนขยาย
บันทึกสำหรับหน้าส่วนขยายที่แสดงเป็นแท็บ เช่น หน้าลบล้างและตัวเลือกหน้าเต็ม ได้ในคอนโซลหน้าเว็บและในหน้าการจัดการส่วนขยาย
ตรวจสอบคำขอเครือข่าย
ป๊อปอัปมักจะสร้างคำขอเครือข่ายที่จำเป็นทั้งหมดก่อนที่นักพัฒนาซอฟต์แวร์คนสำคัญที่สุดจะสามารถเปิดเครื่องมือสำหรับนักพัฒนาเว็บได้ หากต้องการดูคำขอเหล่านี้ ให้รีเฟรชจากแผงเครือข่าย ซึ่งจะเป็นการโหลดป๊อปอัปซ้ำโดยไม่ต้องปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บ
ประกาศสิทธิ์
แม้ว่าส่วนขยายมีความสามารถที่คล้ายกับหน้าเว็บ แต่มักจะต้องได้รับสิทธิ์ในการใช้ฟีเจอร์ เช่น คุกกี้ พื้นที่เก็บข้อมูล และ XMLHttpRequsts แบบข้ามต้นทาง โปรดดูบทความเกี่ยวกับสิทธิ์และ Chrome API ที่พร้อมใช้งานเพื่อตรวจสอบว่าส่วนขยายกำลังขอสิทธิ์ที่ถูกต้องในไฟล์ Manifest
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
ขั้นตอนถัดไป
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนขยายการแก้ไขข้อบกพร่อง โปรดดูการพัฒนาและการแก้ไขข้อบกพร่อง ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome โดยอ่านเอกสารประกอบ