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

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

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

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

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

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