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

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

อัปเดตโค้ด คลิกปุ่มล้างทั้งหมดที่มุมขวาบน แล้วโหลดส่วนขยายซ้ำ

สคริปต์เนื้อหา

รีเฟรชหน้าเว็บ เปิดป๊อปอัป แล้วคลิกช่องสีเขียว และ... ไม่ สีพื้นหลังก็ยังไม่เปลี่ยน อยู่ดี กลับไปที่หน้าการจัดการส่วนขยาย แล้วคุณจะไม่เห็นปุ่มข้อผิดพลาด สาเหตุที่เป็นไปได้มากที่สุดคือ Content Script ซึ่งทำงานภายในหน้าเว็บ

เปิดแผงเครื่องมือสำหรับนักพัฒนาเว็บของหน้าเว็บที่ส่วนขยายพยายามแก้ไข

ระบบจะบันทึกเฉพาะข้อผิดพลาดรันไทม์ console.warning และ console.error ในหน้าการจัดการส่วนขยาย

หากต้องการใช้ DevTools จากภายใน Content Script ให้คลิกลูกศรเมนูแบบเลื่อนลงข้างบนสุด แล้วเลือกส่วนขยาย

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

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

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

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

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

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

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

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