从注入脚本到带有响应的内容脚本的通信

Question

遵循，注入脚本和内容脚本之间的通信可以这样进行：

// Content script
window.addEventListener("getChromeData", function(data) {
  // do Chrome things;
}, false);

// Injected script
window.dispatchEvent(new CustomEvent("getChromeData", {data: 'whatever'}));

我想知道是否有办法使用承诺或回调机制将返回的数据用于注入的脚本？

Answer 1

返回的通信再次通过一个事件完成。您可以使用一次性侦听器来实现基于承诺的响应。

我将传递一个额外的请求 ID，以免一次性侦听器意外混淆；也许这是一个矫枉过正。

内容脚本：

window.addEventListener("getChromeData", function(evt) {
  var request = evt.detail;
  var response = {requestId: request.id};
  // do Chrome things with request.data, add stuff to response.data
  window.dispatchEvent(new CustomEvent("sendChromeData", {detail: response}));
}, false);

注入的脚本：

var ChromeRequest = (function(){
  var requestId = 0;

  function getData(data) {
    var id = requestId++;

    return new Promise(function(resolve, reject) {
      var listener = function(evt) {
        if(evt.detail.requestId == id) {
          // Deregister self
          window.removeEventListener("sendChromeData", listener);
          resolve(evt.detail.data);
        }
      }

      window.addEventListener("sendChromeData", listener);

      var payload = { data: data, id: id };

      window.dispatchEvent(new CustomEvent("getChromeData", {detail: payload}));
    });        
  }

  return { getData: getData };
})();

ChromeRequest.getData("whatever").then(function(data){/* ... */});

请注意，您必须使用 CustomEvent 的 detail 属性，这不是任意的属性。

从注入脚本到带有响应的内容脚本的通信

Communication from an injected script to the content script with a response

javascript

google-chrome

google-chrome-extension

dom-events