ข้อความส่วนขยายของ Chrome กำลังผ่านไป: ไม่ตอบสนอง

ฉันพยายามส่งข้อความระหว่างสคริปต์เนื้อหาและส่วนขยาย

นี่คือสิ่งที่ฉันมีในเนื้อหาสคริปต์

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

และในสคริปต์พื้นหลังฉันมี

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})
    }
  });

}

ตอนนี้ถ้าฉันส่งการตอบกลับก่อนการโทร ajax ในgetUrlsฟังก์ชั่นการตอบสนองจะถูกส่งเรียบร้อยแล้ว แต่ในวิธีการที่ประสบความสำเร็จของการโทร ajax เมื่อฉันส่งการตอบกลับมันไม่ได้ส่งเมื่อฉันเข้าสู่การดีบักฉันจะเห็นว่า พอร์ตนั้นเป็นโมฆะภายในโค้ดของsendResponseฟังก์ชัน

จากเอกสารสำหรับchrome.runtime.onMessage.addListener :

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

ดังนั้นคุณต้องเพิ่มreturn true;หลังจากการเรียกgetUrlsเพื่อระบุว่าคุณจะเรียกใช้ฟังก์ชันการตอบสนองแบบอะซิงโครนัส

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

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

ฉันจะรู้ได้อย่างไรว่าhandleMethod1การโทรลึกจะเป็นแบบซิงค์หรือไม่? คนที่แก้ไขจะhandleMethod1รู้ได้อย่างไรว่ามันจะทำให้ผู้โทรเสียโดยการแนะนำบางอย่างให้เป็น async

ทางออกของฉันคือ:

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;
    }

});

การดำเนินการนี้จะจัดการค่าส่งคืนโดยอัตโนมัติไม่ว่าคุณจะจัดการกับข้อความอย่างไร โปรดทราบว่านี่ถือว่าคุณไม่เคยลืมที่จะเรียกฟังก์ชั่นการตอบสนอง โปรดทราบว่าโครเมียมอาจมีสิ่งนี้โดยอัตโนมัติสำหรับเราฉันไม่เห็นสาเหตุที่พวกเขาไม่ได้

คุณสามารถใช้ห้องสมุดของฉันhttps://github.com/lawlietmester/webextensionเพื่อให้การทำงานนี้ทั้งใน Chrome และ FF ด้วยวิธี Firefox โดยไม่ต้องโทรกลับ

รหัสของคุณจะมีลักษณะดังนี้:

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 }); });
}) );