如何将消息从后台脚本发送到内容脚本，然后发送到注入脚本？

将消息从后台脚本发送到内容脚本，然后发送到注入脚本

问题陈述

任务at hand的目的是在后台脚本和内容脚本之间建立通信通道。内容脚本负责将另一个脚本注入到网页中，注入的脚本是消息的接收者。然而，这种通信被证明是不成功的，特别是从后台脚本到内容脚本的初始消息传输。

理解问题

问题的根源在于内容脚本注入的本质。加载或重新加载扩展程序时，Chrome 不会自动将内容脚本注入现有选项卡。相反，注入仅在后续选项卡导航或打开与指定 URL 模式匹配的新选项卡时发生。

解决方案

解决方案 1：确保内容脚本准备就绪

<code class="js">// Background
function ensureSendMessage(tabId, message, callback){
  chrome.tabs.sendMessage(tabId, {ping: true}, function(response){
    if(response && response.pong) { // Content script ready
      chrome.tabs.sendMessage(tabId, message, callback);
    } else { // No listener on the other end
      chrome.tabs.executeScript(tabId, {file: "content_script.js"}, function(){
        if(chrome.runtime.lastError) { console.error(chrome.runtime.lastError); }
        else { chrome.tabs.sendMessage(tabId, message, callback); }
      });
    }
  });
}

// Content script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.ping) { sendResponse({pong: true}); return; }
  /* Content script action */
});</code>

解决方案 2：始终通过运行时检查注入脚本

<code class="js">// Background
function ensureSendMessage(tabId, message, callback){
  chrome.tabs.executeScript(tabId, {file: "content_script.js"}, function(){
    if(chrome.runtime.lastError) { console.error(chrome.runtime.lastError); }
    else { chrome.tabs.sendMessage(tabId, message, callback); }
  });
}

// Content script
var injected;

if(!injected){
  injected = true;
  /* your toplevel code */
}</code>

解决方案 3：初始化时不加区分地注入

<code class="js">chrome.tabs.query({}, function(tabs) {
  for(var i in tabs) { chrome.tabs.executeScript(tabs[i].id, {file: "content_script.js"}); }
}); </code>

以上是如何将消息从后台脚本发送到内容脚本，然后发送到注入脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！