首页 > web前端 > js教程 > 如何解决 Chrome 扩展中从后台到注入后台的脚本间通信问题?

如何解决 Chrome 扩展中从后台到注入后台的脚本间通信问题?

DDD
发布: 2024-10-18 11:35:02
原创
742 人浏览过

How to Resolve Inter-Script Communication Issue in Chrome Extensions from Background to Injected Background?

Chrome 扩展程序中跨多个脚本的消息传递:从后台到注入

后台

中在 Chrome 扩展的上下文中,在不同环境中运行的脚本之间发送消息可能具有挑战性。以下是您在尝试将消息从后台脚本发送到内容脚本并随后发送到注入脚本时遇到的特定问题的详细分析和解决方案。

问题:

由于内容脚本注入目标的方式,您的代码无法发送消息。最初,内容脚本不会出现在现有选项卡中,除非页面专门触发它们的注入。这意味着当您的后台脚本尝试在扩展程序加载时向选项卡发送消息时,没有侦听器可以接收该消息。

解决方案:

解决方案1:按需发送消息

发送消息前检查内容脚本是否准备好:

// 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
      // Inject the script and then send the message
    }
  });
}
登录后复制
// Content
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.ping) { sendResponse({pong: true}); return; }
  // Process messages
});
登录后复制

解决方案2:注入并执行一次

注入内容脚本,但确保它只执行一次:

// Background
function injectAndSend(tabId, message, callback){
  // Inject script and send message
}
登录后复制
// Content
var executed; // Flag to prevent multiple executions

if(!executed){
  executed = true;
  // Process messages
}
登录后复制

解决方案 3:不加区别地注入

注入内容脚本而不使用依赖它们的存在:

// Background
chrome.tabs.query({}, function(tabs) {
  for(var i in tabs) {
    // Inject scripts and send messages
  }
});
登录后复制

解决方案 4:使用浏览器操作

将消息传递逻辑附加到特定用户交互的浏览器操作:

chrome.browserAction.onClicked.addListener(function() {
  // Process messages
});
登录后复制

孤立内容脚本

需要考虑的一个含义是孤立内容脚本的现象。当扩展重新加载时,内容脚本可能无法正确清理,留下可能干扰新注入脚本的事件监听器。

解决方案:

实现心跳机制检查内容脚本和后台脚本之间的连接。如果心跳失败,内容脚本应取消注册侦听器并推迟任何操作。

结论:

通过了解 Chrome 扩展程序中内容脚本的行为并采用适当的方法消息传递技术,您可以有效地将消息从后台脚本发送到内容脚本和注入脚本。

以上是如何解决 Chrome 扩展中从后台到注入后台的脚本间通信问题?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板