javascript - chrome.runtime.onMessage 不存在

Question

我已经 asked为了帮助理解如何正确实现 chrome 扩展的消息 API，然后我在我的代码中实现了它。工作流程是 popup.js 将向我的后台脚本发送一条消息，让它知道弹出窗口已打开并且可以接收数据，然后后台脚本向将获取所需数据的内容脚本发送一条消息，然后发回这些数据的响应。我在 popup.js 控制台中收到错误消息:Uncaught TypeError: chrome.runtime.onMessage is not a function。我还注意到内容脚本未在消息上触发，是否有任何解决方法，代码有什么问题？

弹窗.js

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    chrome.runtime.sendMessage({type:'init_popup_feed'});
      chrome.runtime.onMessage(function(message, sender, response){
        console.log(sender);
        if( message.type == 'feed_data' ){
          console.log(message.data);
        }
      });
  });
}(jQuery));

背景.js

const s = [];
chrome.runtime.onMessage.addListener(function(message, sender, response){
  console.log(sender);
  console.log(message.type);
  if( message.type == 'init_popup_feed' ){
    chrome.runtime.sendMessage({type:'grab_feed'});
  }
  else if( message.type == 's_feed'){
    chrome.runtime.sendMessage({type:'feed_data',data:message.data});
  }
  //chrome.runtime.sendMessage({});
});

main.js - 内容脚本

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    const l = [];
    var d;
    chrome.runtime.onMessage.addListener(function(message, sender, response){
      console.log(message.type);
      if( message.type == 'grab_feed' ){
        // ... code stuff here ...
          sendResponse({type:'s_feed',data:l});
          console.log(l);
      }
    });
  });
}(jQuery));

更新

我已经根据评论中的建议修改了代码。现在我在后台脚本控制台日志中有一个错误:事件处理程序中的错误:TypeError:调用 tabs.sendMessage(整数 tabId，任何消息，可选对象选项，可选函数 responseCallback)时出错:没有匹配的签名。 chrome.tabs.sendMessage() 有什么问题？

背景.js

var id;
chrome.runtime.onMessage.addListener(function(message, sender, response){
  console.log(message.type);
  if( message.type == 'extension_started'){
    console.log(sender);
    id = sender.tab.tabId;
  }
  else if( message.type == 'init_popup_feed' ){
    chrome.tabs.sendMessage(id, {type:'grab_stories'}, function(response){
        console.log(response);
        chrome.runtime.sendMessage({type:'stories_feed_data',data:response.data});
    });
  }
});

Answer 1

当我使用 <script type="module"> 从内容脚本加载内容脚本时遇到此错误标签。

找到的解决方案here是使用 import import('path/your js file')函数导入脚本而不是脚本标签。