Thông báo tiện ích mở rộng của Chrome: phản hồi không được gửi

Tôi đang cố gắng chuyển tin nhắn giữa tập lệnh nội dung và phần mở rộng

Đây là những gì tôi có trong kịch bản nội dung

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

Và trong kịch bản nền tôi có

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

}

Bây giờ nếu tôi gửi phản hồi trước lệnh gọi ajax trong getUrlshàm, phản hồi sẽ được gửi thành công, nhưng trong phương thức thành công của cuộc gọi ajax khi tôi gửi phản hồi thì nó không gửi, khi tôi gỡ lỗi, tôi có thể thấy rằng cổng là null bên trong mã cho sendResponsechức năng.

Từ tài liệu chochrome.runtime.onMessage.addListener :

Hàm này trở nên không hợp lệ khi trình lắng nghe sự kiện trả về, trừ khi bạn trả về true từ trình nghe sự kiện để cho biết bạn muốn gửi phản hồi không đồng bộ (điều này sẽ giữ cho kênh thông báo mở sang đầu kia cho đến khi sendResponse được gọi).

Vì vậy, bạn chỉ cần thêm return true;sau cuộc gọi để getUrlscho biết rằng bạn sẽ gọi chức năng trả lời không đồng bộ.

Câu trả lời được chấp nhận là chính xác, tôi chỉ muốn thêm mã mẫu đơn giản hóa việc này. Vấn đề là API (theo quan điểm của tôi) không được thiết kế tốt vì nó buộc các nhà phát triển phải biết liệu một thông điệp cụ thể có được xử lý không đồng bộ hay không. Nếu bạn xử lý nhiều thư khác nhau, điều này sẽ trở thành một nhiệm vụ bất khả thi vì bạn không bao giờ biết nếu sâu bên dưới một số chức năng, sendResponse được truyền vào sẽ được gọi là async hay không. Xem xét điều này:

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

Làm thế nào tôi có thể biết nếu sâu bên dưới handleMethod1cuộc gọi sẽ không đồng bộ hay không? Làm thế nào một người có thể sửa đổi handleMethod1biết rằng nó sẽ phá vỡ một người gọi bằng cách giới thiệu một cái gì đó không đồng bộ?

Giải pháp của tôi là thế này:

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

});

Điều này tự động xử lý giá trị trả về, bất kể bạn chọn cách xử lý tin nhắn như thế nào. Lưu ý rằng điều này giả định rằng bạn không bao giờ quên gọi hàm phản hồi. Cũng lưu ý rằng crom có ​​thể tự động hóa điều này cho chúng tôi, tôi không hiểu tại sao họ không làm vậy.

Bạn có thể sử dụng thư viện của tôi https://github.com/lawlietmester/webextension để làm cho điều này hoạt động trong cả Chrome và FF với Firefox mà không cần gọi lại.

Mã của bạn sẽ trông như sau:

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