Google chrome 在chrome扩展开发中限制与所选选项卡的通信

我是chrome扩展开发的新手。我学习了一些教程，后来我在玩。这个分机有什么问题困扰着我

复制步骤：

• 并排打开两页中的devtools
• 按照github页面中提到的步骤操作
• 当您单击面板中的（页面的任何一个）“插入”按钮将消息从页面发送到devtools”按钮时，您可以看到Html页面发生了更改
• 然后单击页面中显示的按钮。您可以看到，在两个面板中，按钮/文本都发生了更改

是否有任何筛选器限制此操作并仅更改单击页面上的按钮/文本？我知道这是因为

port.postMessage（message）在background.js页面中

我找到了，但我没能让它工作

任何帮助都将不胜感激：）
通信方案很简单：

您的devtools面板将打开一个到后台页面的端口
后台页面侦听该端口并存储tabId到端口映射的查找表
后台页面还侦听来自内容脚本的消息，并使用上面的查找表将消息路由到相应的端口通道
devtools panel.js

var-port=chrome.runtime.connect（）；
port.onMessage.addListener（消息=>{
$id（'insertmessagebutton'）。innerHTML=message.content；
});
$id（'executescript'）。onclick=（）=>
runContentScript（{code:'console.log（'contentscript executed'）”）；
$id（'insertscript'）。onclick=（）=>
runContentScript（{file:“inserted script.js”}）；
$id（'insertmessagebutton'）。onclick=（）=>{
runContentScript（{code:'document.body.innerHTML='Send to panel'''}）；
runContentScript（{file:“messageback script.js”}）；
};
函数runContentScript（参数）{
港口邮递(
Object.assign({
tabId:chrome.devtools.inspectedWindow.tabId，
}，参数）
);
}
函数$id（id）{
返回文档.getElementById（id）；
}

background.js

var tabPorts={}；
chrome.runtime.onConnect.addListener（端口=>{
让塔比德；
port.onMessage.addListener（消息=>{
如果（！tabId）{
//这是来自devtools的第一条消息，因此让我们设置tabId端口映射
tabId=message.tabId；
tabPorts[tabId]=端口；
}
if（message.code | | message.file）{
删除message.tabId；
chrome.tabs.executeScript（tabId，message）；
}
});
port.onDisconnect.addListener（（）=>{
删除tabPorts[tabId]；
});
});
chrome.runtime.onMessage.addListener（（消息、发送者、发送响应）=>{
const-port=sender.tab&&tabPorts[sender.tab.id]；
如果（端口）{
port.postMessage（消息）；
}
});
chrome.tabs.onRemoved.addListener（tabId=>{
删除tabPorts[tabId]；
});
chrome.tabs.onReplaced.addListener（（newTabId，oldTabId）=>{
删除选项卡端口[oldTabId]；
});
通信方案很简单：

您的devtools面板将打开一个到后台页面的端口
后台页面侦听该端口并存储tabId到端口映射的查找表
后台页面还侦听来自内容脚本的消息，并使用上面的查找表将消息路由到相应的端口通道
devtools panel.js

var-port=chrome.runtime.connect（）；
port.onMessage.addListener（消息=>{
$id（'insertmessagebutton'）。innerHTML=message.content；
});
$id（'executescript'）。onclick=（）=>
runContentScript（{code:'console.log（'contentscript executed'）”）；
$id（'insertscript'）。onclick=（）=>
runContentScript（{file:“inserted script.js”}）；
$id（'insertmessagebutton'）。onclick=（）=>{
runContentScript（{code:'document.body.innerHTML='Send to panel'''}）；
runContentScript（{file:“messageback script.js”}）；
};
函数runContentScript（参数）{
港口邮递(
Object.assign({
tabId:chrome.devtools.inspectedWindow.tabId，
}，参数）
);
}
函数$id（id）{
返回文档.getElementById（id）；
}

background.js

var tabPorts={}；
chrome.runtime.onConnect.addListener（端口=>{
让塔比德；
port.onMessage.addListener（消息=>{
如果（！tabId）{
//这是来自devtools的第一条消息，因此让我们设置tabId端口映射
tabId=message.tabId；
tabPorts[tabId]=端口；
}
if（message.code | | message.file）{
删除message.tabId；
chrome.tabs.executeScript（tabId，message）；
}
});
port.onDisconnect.addListener（（）=>{
删除tabPorts[tabId]；
});
});
chrome.runtime.onMessage.addListener（（消息、发送者、发送响应）=>{
const-port=sender.tab&&tabPorts[sender.tab.id]；
如果（端口）{
port.postMessage（消息）；
}
});
chrome.tabs.onRemoved.addListener（tabId=>{
删除tabPorts[tabId]；
});
chrome.tabs.onReplaced.addListener（（newTabId，oldTabId）=>{
删除选项卡端口[oldTabId]；
});
您的代码添加了三个onMessage侦听器，因为chrome.runtime.onMessage是取代chrome.extension.onMessage的实际首选API。三个侦听器中的两个是那些向devtools面板发送消息的侦听器，它们都由来自选项卡的消息触发。重新编写代码。@wOxxOm谢谢您的建议。你能给我一些更多的提示吗？因为我是新手，代码不是我写的，但那只是我正在使用的一个示例/参考。我可能不得不完全重写它，因为我不喜欢这里的方式。你读过吗？实现似乎很简单。啊，好的。是的，我确实读过，但现在我要再读一遍。无论如何，谢谢你的时间：）请把问题放在主题上：包括一个重复的问题。对于Ch