标签：javascript google-chrome google-chrome-extension dom-events

在this question之后,可以通过以下方式在注入的脚本和内容脚本之间进行通信：

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

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

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

解决方法:

通过事件再次进行通信.您可以使用一次性监听器来实现基于承诺的响应.

我将传递一个额外的请求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属性,它不是任意属性.

标签：javascript,google-chrome,google-chrome-extension,dom-events
来源： https://codeday.me/bug/20191008/1871021.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。