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

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

ข้อผิดพลาดระบุว่าไม่ได้กำหนด 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 โดยอ่านเอกสารประกอบ