Chrome拡張機能複数のポートでDisconnected Portエラーが発生する

Question

2つの異なるコンテンツスクリプトを使用しているChrome拡張機能を開発しています。 1つはメインページに読み込まれ、もう1つはiframeに読み込まれた外部ページ（私が制御する）に読み込まれます。 2つのスクリプトは両方向で互いに通信する必要があるため、Messaging APIを実装しようとしています。

私が理解する限り、各ページをbackground.jsと通信させるのが最善です。私はこれを実装しようとしています。現在、私はメッセージが到着しているかどうかを確認しようとしています。しかし、私は取得していますエラーがある：それはbackground.jsに "page_post.postMessage（MSG）" を参照している

Error: Attempting to use a disconnected port object 

。問題は複数のポートを使用していることでしょうか？

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

は異なる製剤を用いて、再びこの質問をしたし、かなり素早く答えを得ました。そのトリックは、接続後にポートを保存することです。 Chrome extension - Messaging with multiple ports

Answer 2

あなたbackground pageruntime.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 
    } 
});