Chrome扩展多个端口导致Disconnected Port错误

Chrome extension multiple ports gives Disconnected Port error

本文关键字：Disconnected Port 错误 扩展 Chrome      更新时间：2023-10-09

我正在开发一个Chrome扩展，其中我使用了两个不同的内容脚本。一个加载在主页中，另一个加载到iframe中加载的外部页面（由我控制）中。这两个脚本需要双向通信，这就是我尝试实现Messaging API的原因。

据我所知，最好让每个页面都与background.js进行通信。这就是我正在尝试实现的。目前，我只是想看看这些信息是否到达。但我得到的错误是：

Error: Attempting to use a disconnected port object

它指的是background.js中的"page_post.postMessage（msg）"。问题可能是我使用了多个端口吗？

menu.js

var port = chrome.runtime.connect({name: "menuport"});
port.postMessage({source: "menu", status: "ready", id: menu_id});
port.onMessage.addListener(function(msg) {
    console.log('MenuJS')
    console.log(msg)
});

page.js

var page_port = chrome.runtime.connect({name: "pageport"});
page_port.postMessage({source: "page", status: "ready"});
page_port.onMessage.addListener(function(msg) {
  console.log('PageJS')
  console.log(msg)
});

background.js

var menu_port = chrome.runtime.connect({name: "menuport"});
var page_port = chrome.runtime.connect({name: "pageport"});
chrome.runtime.onConnect.addListener(function(menu_port) {
  menu_port.onMessage.addListener(function(msg) {
      console.log('BGJS')
      console.log(msg)
      page_port.postMessage(msg);
  });
});
chrome.runtime.onConnect.addListener(function(page_port) {
  page_port.onMessage.addListener(function(msg) {
      console.log(msg)
  });
});

您的background page应该注册一次runtime.onConnect侦听器，并通过port.name区分不同的端口。

background.js

chrome.runtime.onConnect.addListener(function(port) {
  if(port.name === "menuport") {
    // menu port logic
  } else if (port.name === "pageport") {
    // page port logic
  }
});

用不同的公式再次问了这个问题，很快就得到了答案。诀窍是在连接后存储端口。请参阅Chrome扩展-多端口消息传递

相关文章：