Bagaimana cara memperbaiki 'Unchecked runtime.lastError: Port pesan ditutup sebelum respons diterima' masalah chrome?

Saya menggunakan VueJS dan Laravel untuk proyek saya. Masalah ini mulai muncul belakangan ini dan terlihat bahkan di cabang git lama.

Kesalahan ini hanya muncul di browser Chrome.

Saya menonaktifkan semua ekstensi yang dipasang di Chrome - berfungsi untuk saya. Saya sekarang memiliki konsol yang jelas tanpa kesalahan.

Jika Anda adalah pengembang ekstensi yang mencari cara Anda di sini mencoba untuk berhenti menyebabkan kesalahan ini:

Masalahnya bukan CORB, karena COR yang diblokir bermanifestasi sebagai peringatan seperti -

Cross-Origin Read Blocking (CORB) memblokir respons lintas-sumber https://www.example.com/example.html dengan jenis teks MIME / html. Lihat https://www.chromestatus.com/feature/5629709824032768 untuk lebih jelasnya.

Masalahnya kemungkinan besar adalah respons asinkron yang salah penanganan terhadap runtime.sendMessage. Seperti yang dikatakan MDN :

Untuk mengirim respons asinkron, ada dua opsi:

• mengembalikan true dari event listener. Ini membuat fungsi sendResponse tetap valid setelah pendengar kembali, jadi Anda bisa memanggilnya nanti.
• mengembalikan Promise dari event listener, dan menyelesaikannya saat Anda memiliki respons (atau menolaknya jika terjadi error).

Jika Anda mengirim respons asinkron tetapi gagal menggunakan salah satu mekanisme ini, sendResponseargumen yang diberikan kesendMessage akan keluar dari cakupan dan hasilnya persis seperti yang dikatakan pesan kesalahan: port pesan Anda (aparat penyalur pesan) ditutup sebelum responsnya diterima.

Penulis webextension-polyfill telah menulis tentang hal itu pada Juni 2018 .

Jadi intinya, jika Anda melihat ekstensi Anda menyebabkan kesalahan ini - periksa dengan cermat semua pendengar onMessage Anda. Beberapa dari mereka mungkin perlu mulai mengembalikan janji (menandainya sebagai asinkron sudah cukup). [Terima kasih @vdegenne]

Jika Anda membuka chrome: // extensions / , Anda dapat mengalihkan setiap ekstensi satu per satu dan melihat mana yang sebenarnya memicu masalah.

Setelah Anda menonaktifkan ekstensi, segarkan halaman tempat Anda melihat kesalahan dan gerakkan mouse, atau klik. Tindakan mouse adalah hal-hal yang menimbulkan kesalahan.

Jadi saya dapat menentukan ekstensi mana yang sebenarnya menyebabkan masalah dan menonaktifkannya.

Posting agak lama dan tidak terkait erat dengan pengembangan ekstensi Chrome, tetapi biarkan saja di sini.

Saya memiliki masalah yang sama saat menanggapi pesan di panggilan balik. Solusinya adalah mengembalikan true di pendengar pesan latar belakang.

Berikut adalah contoh sederhana background.js . Ini menanggapi pesan apa pun dari 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
});

Berikut adalah popup.js , yang mengirim pesan melalui popup. Anda akan mendapatkan pengecualian sampai Anda menghapus komentar "return true" di file background.js .

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

manifest.json , untuk berjaga-jaga :) Perhatikan bagian izin alarm!

{
  "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"
  ]
}

Saya telah menjawab ini .

Dalam kasus saya, masalahnya adalah karena Video Downloader professionaldanAdBlock

Singkatnya, masalah ini terjadi karena beberapa plugin google chrome

Jika alasan kesalahan adalah ekstensi gunakan penyamaran Ctrl+ Shift+N . Dalam mode penyamaran, Chrome tidak memiliki ekstensi.

UPD. Jika Anda memerlukan beberapa ekstensi dalam mode penyamaran misalnya ReduxDevTools atau lainnya, dalam pengaturan ekstensi aktifkan "Izinkan dalam mode penyamaran"

Bagi mereka yang datang ke sini untuk men-debug kesalahan ini di Chrome 73, salah satu kemungkinannya adalah karena Chrome 73 dan seterusnya melarang permintaan lintas sumber dalam skrip konten.

Bacaan lainnya:

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

Hal ini memengaruhi banyak penulis ekstensi Chrome, yang sekarang perlu berebut untuk memperbaiki ekstensi karena Chrome berpikir "Data kami menunjukkan bahwa sebagian besar ekstensi tidak akan terpengaruh oleh perubahan ini".

(ini tidak ada hubungannya dengan kode aplikasi Anda)

PEMBARUAN : Saya memperbaiki masalah COR tetapi saya masih melihat kesalahan ini. Saya menduga ini adalah kesalahan Chrome di sini.

Kesalahan ini biasanya disebabkan oleh salah satu ekstensi Chrome Anda.

Saya sarankan menginstal Disabler Ekstensi Satu Klik ini , saya menggunakannya dengan pintasan keyboard COMMAND (⌘)+ SHIFT (⇧)+ D- untuk menonaktifkan / mengaktifkan semua ekstensi saya dengan cepat.

Setelah ekstensi dinonaktifkan, pesan kesalahan ini akan hilang.

Perdamaian! ✌️

Dalam kasus saya, itu adalah ekstensi chrome OneTab.

Pastikan Anda menggunakan sintaks yang benar.

Kita harus menggunakan metode sendMessage () setelah mendengarkannya.

Berikut ini adalah contoh sederhana dari contentScript.js Ini sendRequest untuk 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);
  }
});

Nonaktifkan jika ada ekstensi anti-virus yang diinstal di browser. Dalam kasus saya, ekstensi anti-virus adalah penyebabnya.

Bagi saya itu Auto Tab Discard, yang melempar kesalahan itu pada tab yang disematkan. Saya membuat laporan bug, https://github.com/rNeomy/auto-tab-discard/issues/101 .

Dalam kasus saya, itu adalah breakpoint yang ditetapkan di sumber halaman saya sendiri. Jika saya menghapus atau menonaktifkan breakpoint maka kesalahan akan hilang.

Breakpoint berada dalam bagian kode rendering yang cukup kompleks. Titik henti lain di bagian halaman yang berbeda tidak memiliki efek seperti itu. Saya tidak dapat mengerjakan kasus uji sederhana yang selalu memicu kesalahan ini.

Saya mengirim data log konsol dari satu tab ke tab lain dan tidak terlalu membutuhkan konsol pertama. Namun pesan kesalahan itu mengganggu saya jadi saya mengklik kanan dan memilih "jangan tampilkan pesan dari situs x". Mungkin ini perbaikan termudah :)