Perpanjangan Pesan Ekstensi Chrome: respons tidak terkirim

Saya mencoba menyampaikan pesan antara skrip konten dan ekstensi

Inilah yang saya miliki dalam skrip konten

chrome.runtime.sendMessage({type: "getUrls"}, function(response) {
  console.log(response)
});

Dan dalam skrip latar belakang yang saya miliki

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type == "getUrls"){
      getUrls(request, sender, sendResponse)
    }
});

function getUrls(request, sender, sendResponse){
  var resp = sendResponse;
  $.ajax({
    url: "http://localhost:3000/urls",
    method: 'GET',
    success: function(d){
      resp({urls: d})
    }
  });

}

Sekarang jika saya mengirim respons sebelum panggilan ajax dalam getUrlsfungsi, respons berhasil dikirim, tetapi dalam metode keberhasilan panggilan ajax ketika saya mengirim respons, ia tidak mengirimnya, ketika saya masuk ke debugging saya bisa melihat bahwa porta null di dalam kode untuk sendResponsefungsi.

Dari dokumentasi untukchrome.runtime.onMessage.addListener :

Fungsi ini menjadi tidak valid ketika pendengar acara kembali, kecuali jika Anda mengembalikan true dari pendengar acara untuk menunjukkan Anda ingin mengirim tanggapan secara tidak sinkron (ini akan membuat saluran pesan terbuka ke ujung yang lain sampai sendResponse dipanggil).

Jadi, Anda hanya perlu menambahkan return true;setelah panggilan getUrlsuntuk menunjukkan bahwa Anda akan memanggil fungsi respons secara tidak sinkron.

Jawaban yang diterima benar, saya hanya ingin menambahkan kode sampel yang menyederhanakan ini. Masalahnya adalah bahwa API (dalam pandangan saya) tidak dirancang dengan baik karena memaksa kita pengembang untuk mengetahui apakah pesan tertentu akan ditangani async atau tidak. Jika Anda menangani banyak pesan berbeda, ini menjadi tugas yang mustahil karena Anda tidak pernah tahu apakah jauh di dalam suatu fungsi, sebuah sendResponse yang diteruskan akan disebut async atau tidak. Pertimbangkan ini:

chrome.extension.onMessage.addListener(function (request, sender, sendResponseParam) {
if (request.method == "method1") {
    handleMethod1(sendResponse);
}

Bagaimana saya bisa tahu apakah handleMethod1panggilan itu async atau tidak? Bagaimana seseorang yang memodifikasi handleMethod1tahu bahwa itu akan merusak penelepon dengan memperkenalkan sesuatu async?

Solusi saya adalah ini:

chrome.extension.onMessage.addListener(function (request, sender, sendResponseParam) {

    var responseStatus = { bCalled: false };

    function sendResponse(obj) {  //dummy wrapper to deal with exceptions and detect async
        try {
            sendResponseParam(obj);
        } catch (e) {
            //error handling
        }
        responseStatus.bCalled= true;
    }

    if (request.method == "method1") {
        handleMethod1(sendResponse);
    }
    else if (request.method == "method2") {
        handleMethod2(sendResponse);
    }
    ...

    if (!responseStatus.bCalled) { //if its set, the call wasn't async, else it is.
        return true;
    }

});

Ini secara otomatis menangani nilai kembali, terlepas dari bagaimana Anda memilih untuk menangani pesan. Perhatikan bahwa ini mengasumsikan bahwa Anda tidak pernah lupa memanggil fungsi respons. Perhatikan juga bahwa kromium dapat mengotomatisasi ini untuk kita, saya tidak mengerti mengapa mereka tidak melakukannya.

Anda dapat menggunakan perpustakaan saya https://github.com/lawlietmester/webextension untuk menjadikan ini berfungsi di Chrome dan FF dengan cara Firefox tanpa panggilan balik.

Kode Anda akan terlihat seperti:

Browser.runtime.onMessage.addListener( request => new Promise( resolve => {
    if( !request || typeof request !== 'object' || request.type !== "getUrls" ) return;

    $.ajax({
        'url': "http://localhost:3000/urls",
        'method': 'GET'
    }).then( urls => { resolve({ urls }); });
}) );