Question

我正在学习如何制作Chrome扩展程序。我有一个内容脚本，它将获取一些数据，我想将它们传递到popup.html页面以在弹出的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));

也许我的代码做错了。我在控制台中收到此错误：

// content script consolle error
Error handling response: TypeError: Cannot read property 'farewell' of undefined

//popup.js consolle error
jQuery.Deferred exception: chrome.runtime.onMessage.addListner is not a function TypeError: chrome.runtime.onMessage.addListner is not a function:

Uncaught TypeError: chrome.runtime.onMessage.addListner is not a function

更新

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

Answer 1

Chrome运行时没有onMessage方法，请参阅此link，希望这会帮助您

Answer 2

通常，除非您知道弹出窗口是打开的，否则从内容脚本向弹出窗口发送消息是不起作用的：弹出窗口不存在，直到您将其打开。

鉴于此，最有可能使您的内容脚本将其消息发送到persistent background（这是默认的btw）并用作消息的存储库，直到弹出窗口请求它们为止。

background.js

const messageQueue = [];
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Arbitrary string allowing the background to distinguish
  // message types. You might also be able to determine this
  // from the `sender`.
  if (message.type === 'from_content_script') {
    messageQueue.push(message);
  } else if (message.type === 'from_popup') {
    sendResponse(messageQueue);
  }
});

现在从内容脚本中，发送chrome.runtime.sendMessage({imageURIs: l, type: '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”没有任何意义；它们只是为了清楚起见。

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

从弹出窗口发送消息
在后台，向内容脚本发送消息
应该对背景做出反应
应该对弹出窗口做出反应

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

更新

2 个答案:

background.js