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

ส่วนขยายใช้ประโยชน์จากการแก้ไขข้อบกพร่องได้เช่นเดียวกับที่ เครื่องมือสำหรับนักพัฒนาเว็บใน 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 ในหน้าการจัดการส่วนขยาย

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

Uncaught ReferenceError: tabs is not defined

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

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

แท็บส่วนขยาย

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

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

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

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

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

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