Javascript 如何将数据从内容脚本传递到popup.html？

我正在学习如何制作chrome扩展。我有一个内容脚本，可以获取一些数据，我想将它们传递到popup.html页面，在popup DOM上显示它们。我已经阅读了Chrome文档中传递的消息，但我无法让它工作。有人能帮我吗

我的代码：

内容脚本文件：main.js

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    var el = $(document).find('#stories_tray');
      var child = el.find('._827c');
        $.each(child, function(i){
          var div = $(child[i])
            .find('._7h4p')
            .attr('data-onkeypress');
          var d = JSON.parse(div);
          if( typeof d[0].a != 'undefined' ){
            console.log(d[0].a[0].preloadImageURIs[0]);
            var l = d[0].a[0].preloadImageURIs[0];

            chrome.runtime.sendMessage({imageURIs: l}, function(response) {
              console.log(response.farewell);
            });
          }
        });
  });
}(jQuery));

弹出javascript文件：popup.js

// window.onload = function(){
//   $('.spinner-grow').delay('300')
//     .css({'transition':'ease-out','display':'none'});
// }

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    chrome.runtime.onMessage.addListner(function(request, sender, sendResponse){
      console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
      console.log(request.imageURIs);
      sendResponse({farwell: "ok"});
    });
  });
}(jQuery));

也许我的代码有问题

我在控制台中发现以下错误：

//内容脚本控制台错误 错误处理响应：TypeError:无法读取未定义的属性“Foreed”

//popup.js控制台错误 jQuery.Deferred exception:chrome.runtime.onMessage.addListner不是函数类型错误：chrome.runtime.onMessage.addListner不是函数：

未捕获的TypeError:chrome.runtime.onMessage.addListner不是函数

使现代化

---

我已经设法将消息从内容脚本传递到popup.js，但是我需要一种方法来保存消息，直到用户单击扩展图标。我怎样才能做到这一点呢？

Chrome runtime没有onMessage方法请看这个，希望这能帮助您

一般来说，从内容脚本向弹出窗口发送消息是不起作用的，除非您知道弹出窗口已打开：只有打开它，弹出窗口才会存在

考虑到这一点，让您的内容脚本将其消息发送到默认的btw，并作为您的消息的存储库，直到弹出窗口请求它们，这可能是最不耦合的

background.js 现在，从内容脚本发送chrome.runtime.sendMessage{imageURIs:l，键入：'from_content_script'}。。。从弹出窗口发送

chrome.runtime.sendMessage({type: 'from_popup'}, (response) => {
  // do stuff with response (which will be the value of messageQueue
  // sent from background.js).
});

当然，字符串“from_popup”和“from_content_script”没有任何意义；它们只是为了清晰起见

如果需要弹出窗口来启动流程，则需要：

从弹出窗口发送消息 到后台，向内容脚本发送消息 这应该与背景相适应 哪个应该响应弹出窗口

---

我已经读过这个问题，这和我遇到的问题不一样，因为我需要从与页面交互的内容脚本和弹出窗口传递消息，如果没有打开，弹出窗口将不会接收消息。你一般都不熟悉编程吗？我认为这可能是一个有点难开始的话题buddy@Panomosh我有php方面的经验，但我对js的前端部分还不熟悉。这就是为什么我在开发chrome扩展时遇到了一些问题。我正在做一项训练来提高我的技能。Listner似乎拼错了。我不确定弹出窗口是否会听到来自内容脚本的消息；如果没有，您可能必须通过后台页面弹出窗口将消息发送到后台、将消息发送到选项卡、将消息发送回后台、返回到弹出窗口。@Jagthebellet主要问题是，只有用户打开弹出窗口，弹出窗口才会起作用。我想从内容脚本传递的数据在匹配的页面加载后被抓取。我已经测试过了，数据通过了，但是需要先打开弹出窗口。我不知道如何将te message o background.js传递给popup。例如appreciated@jihuuNI关于如何将扩展内的消息从页面传递到后台，有很多示例。您应该使用消息将数据传递到后台，并将其存储在一个变量中以保留它，然后使用弹出窗口中的另一条消息到后台请求此类数据。谢谢，您的回答非常清楚，我将修改我的代码以实现您建议的工作流。

chrome.runtime.sendMessage({type: 'from_popup'}, (response) => {
  // do stuff with response (which will be the value of messageQueue
  // sent from background.js).
});