วิธีแก้ไข 'Unchecked runtime.lastError: พอร์ตข้อความปิดก่อนได้รับการตอบกลับ' ปัญหา chrome?

ฉันใช้ VueJS และ Laravel สำหรับโครงการของฉัน ปัญหานี้เริ่มแสดงเมื่อไม่นานมานี้และยังปรากฏในสาขาคอมไพล์เก่า

ข้อผิดพลาดนี้แสดงเฉพาะในเบราว์เซอร์ Chrome

ฉันปิดการใช้งานส่วนขยายที่ติดตั้งทั้งหมดใน Chrome - ใช้ได้กับฉัน ตอนนี้ฉันล้างคอนโซลโดยไม่มีข้อผิดพลาดแล้ว

ในกรณีที่คุณเป็นนักพัฒนาส่วนขยายที่ googled คุณมาที่นี่โดยพยายามหยุดทำให้เกิดข้อผิดพลาดนี้:

ปัญหาไม่ใช่ CORB เนื่องจาก CORB ที่ถูกบล็อกแสดงเป็นคำเตือนเช่น -

Cross-Origin Read Blocking (CORB) บล็อกการตอบกลับข้ามแหล่งที่มา https://www.example.com/example.htmlด้วยข้อความประเภท MIME / html ดู https://www.chromestatus.com/feature/5629709824032768สำหรับรายละเอียดเพิ่มเติม

ปัญหานี้มักเกิดจากการตอบสนองแบบ async ที่ไม่ถูกต้องสำหรับ runtime.sendMessage ดังที่MDN กล่าวว่า :

ในการส่งการตอบกลับแบบอะซิงโครนัสมีสองตัวเลือก:

• คืนค่าจริงจากผู้ฟังเหตุการณ์ ซึ่งจะช่วยให้ฟังก์ชัน sendResponse ใช้ได้หลังจากที่ listener ส่งคืนดังนั้นคุณสามารถเรียกใช้งานได้ในภายหลัง
• ส่งคืนสัญญาจากผู้ฟังเหตุการณ์และแก้ไขเมื่อคุณได้รับคำตอบ (หรือปฏิเสธในกรณีที่มีข้อผิดพลาด)

เมื่อคุณส่งการตอบสนองแบบ async แต่ไม่สามารถใช้กลไกเหล่านี้ได้sendResponseอาร์กิวเมนต์ที่ให้sendMessageมาจะไม่อยู่ในขอบเขตและผลลัพธ์จะตรงตามที่ข้อความแสดงข้อผิดพลาดระบุไว้: พอร์ตข้อความของคุณ (อุปกรณ์ส่งผ่านข้อความ) จะถูกปิดก่อนที่การตอบกลับจะเป็น ที่ได้รับ

ผู้เขียน Webextension-polyfill ได้เขียนไว้แล้วเกี่ยวกับมันในมิถุนายน 2018

ดังนั้นสิ่งที่สำคัญที่สุดหากคุณเห็นว่าส่วนขยายของคุณทำให้เกิดข้อผิดพลาดเหล่านี้ให้ตรวจสอบผู้ฟัง onMessage ทั้งหมดของคุณ บางคนอาจจำเป็นต้องเริ่มคืนสัญญา(ทำเครื่องหมาย async ก็น่าจะเพียงพอแล้ว) [ขอบคุณ @vdegenne]

หากคุณไปที่chrome: // extensions /คุณสามารถสลับทีละส่วนขยายและดูว่าส่วนขยายใดเป็นสาเหตุของปัญหา

เมื่อคุณปิดส่วนขยายแล้วให้รีเฟรชหน้าที่คุณเห็นข้อผิดพลาดแล้วกระดิกเมาส์ไปรอบ ๆ หรือคลิก การใช้เมาส์เป็นสิ่งที่ทำให้เกิดข้อผิดพลาด

ฉันจึงสามารถระบุได้ว่าส่วนขยายใดเป็นสาเหตุของปัญหาและปิดใช้งาน

โพสต์ค่อนข้างเก่าและไม่เกี่ยวข้องกับการพัฒนาส่วนขยาย Chrome อย่างใกล้ชิด แต่ปล่อยให้มันอยู่ที่นี่

ฉันมีปัญหาเดียวกันเมื่อตอบกลับข้อความในการโทรกลับ วิธีแก้ปัญหาคือการคืนค่าจริงในตัวฟังข้อความพื้นหลัง

นี่คือตัวอย่างง่ายๆของbackground.js มันตอบสนองต่อข้อความใด ๆ จาก popup.js

chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) {
    // setTimeout to simulate any callback (even from storage.sync)
    setTimeout(function() {
        sendResponse({status: true});
    }, 1);
    // return true;  // uncomment this line to fix error
});

นี่คือpopup.jsซึ่งส่งข้อความในป๊อปอัป คุณจะได้รับข้อยกเว้นจนกว่าคุณจะยกเลิกการแสดงความคิดเห็นบรรทัด "return true" ในไฟล์background.js

document.addEventListener("DOMContentLoaded", () => {
    chrome.extension.sendMessage({action: "ping"}, function(resp) {
        console.log(JSON.stringify(resp));
    });
});

manifest.jsonในกรณีนี้ :) ให้ความสนใจกับส่วนสิทธิ์การเตือน!

{
  "name": "TestMessages",
  "version": "0.1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "scripts": ["src/background.js"],
    "persistent": false
  },
  "permissions": [
    "alarms"
  ]
}

ฉันได้ตอบเรื่องนี้แล้ว

ในกรณีของฉันปัญหาเกิดจากVideo Downloader professionalและAdBlock

ในระยะสั้นปัญหานี้เกิดขึ้นเนื่องจากปลั๊กอิน Google Chrome บางตัว

ถ้าเหตุผลข้อผิดพลาดคือการใช้ส่วนขยายไม่ระบุตัวตน Ctrl+ +Shift Nในโหมดไม่ระบุตัวตน Chrome ไม่มีส่วนขยาย

UPD หากคุณต้องการส่วนขยายบางอย่างในโหมดไม่ระบุตัวตนเช่น ReduxDevTools หรืออื่น ๆ ในการตั้งค่าส่วนขยายให้เปิด "อนุญาตในโหมดไม่ระบุตัวตน"

สำหรับผู้ที่มาที่นี่เพื่อแก้ไขข้อผิดพลาดนี้ใน Chrome 73 ความเป็นไปได้อย่างหนึ่งคือเนื่องจาก Chrome 73 เป็นต้นไปไม่อนุญาตคำขอข้ามแหล่งที่มาในสคริปต์เนื้อหา

อ่านเพิ่มเติม:

1. https://www.chromestatus.com/feature/5629709824032768
2. https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

สิ่งนี้ส่งผลกระทบต่อผู้เขียนส่วนขยาย Chrome จำนวนมากซึ่งตอนนี้ต้องแย่งกันแก้ไขส่วนขยายเนื่องจาก Chrome คิดว่า "ข้อมูลของเราแสดงให้เห็นว่าส่วนขยายส่วนใหญ่จะไม่ได้รับผลกระทบจากการเปลี่ยนแปลงนี้"

(ไม่มีส่วนเกี่ยวข้องกับรหัสแอปของคุณ)

UPDATE : ฉันแก้ไขปัญหา CORs แล้ว แต่ยังคงเห็นข้อผิดพลาดนี้ ฉันสงสัยว่าเป็นความผิดของ Chrome ที่นี่

ข้อผิดพลาดนี้มักเกิดจากส่วนขยาย Chrome ของคุณ

ฉันแนะนำให้ติดตั้งOne-Click Extension Disablerนี้ฉันใช้กับแป้นพิมพ์ลัดCOMMAND (⌘)+ SHIFT (⇧)+ D- เพื่อปิด / เปิดใช้งานส่วนขยายทั้งหมดของฉันอย่างรวดเร็ว

เมื่อปิดใช้งานส่วนขยายแล้วข้อความแสดงข้อผิดพลาดนี้จะหายไป

ความสงบ! ✌️

ในกรณีของฉันมันเป็นส่วนขยาย Chrome OneTab

ตรวจสอบให้แน่ใจว่าคุณใช้ไวยากรณ์ที่ถูกต้อง

เราควรใช้เมธอด sendMessage ()หลังจากฟังเสร็จ

นี่คือตัวอย่างง่ายๆของcontentScript.jsมัน SendRequest เพื่อapp.js

contentScript.js

chrome.extension.sendRequest({
    title: 'giveSomeTitle', params: paramsToSend
  }, function(result) { 
    // Do Some action
});

app.js

chrome.extension.onRequest.addListener( function(message, sender, 
 sendResponse) {
  if(message.title === 'giveSomeTitle'){
    // Do some action with message.params
    sendResponse(true);
  }
});

ปิดใช้งานหากมีการติดตั้งส่วนขยายป้องกันไวรัสบนเบราว์เซอร์ ในกรณีของฉันส่วนขยายการป้องกันไวรัสเป็นตัวการ

สำหรับฉันมันเป็นAuto Tab Discardสิ่งที่ทำให้เกิดข้อผิดพลาดในแท็บที่ตรึงไว้ ฉันสร้างรายงานข้อผิดพลาด, https://github.com/rNeomy/auto-tab-discard/issues/101

ในกรณีของฉันมันเป็นเบรกพอยต์ที่ตั้งไว้ในแหล่งที่มาของเพจของฉันเอง หากฉันลบหรือปิดการใช้งานเบรกพอยต์ข้อผิดพลาดจะชัดเจนขึ้น

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

ฉันส่งข้อมูลบันทึกคอนโซลจากแท็บหนึ่งไปยังอีกแท็บหนึ่งและไม่ต้องการคอนโซลแรกจริงๆ อย่างไรก็ตามข้อความแสดงข้อผิดพลาดทำให้ฉันติดขัดดังนั้นฉันจึงคลิกขวาและเลือก "ไม่แสดงข้อความจาก x เว็บไซต์" บางทีนี่อาจเป็นการแก้ไขที่ง่ายที่สุด :)