Question

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

据我所知，最好让每个页面与background.js进行通信。这是我试图实施的内容。目前我只想查看邮件是否到达。但我得到的错误是：

Error: Attempting to use a disconnected port object

指的是＆＃34; page_post.postMessage（msg）＆＃34;在background.js。可能问题是我使用多个端口？

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)
  });
});

Answer 1

您的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
  }
});

Answer 2

用不同的表述再次问这个问题，并很快得到答案。诀窍是连接后存储端口。见Chrome extension - Messaging with multiple ports

Chrome扩展程序多个端口提供了断开连接端口错误

2 个答案: