在 chrome 中开发调试器答案

【问题标题】：Developing debugger in chrome在 chrome 中开发调试器
【发布时间】：2017-03-09 03:23:31
【问题描述】：

我正在为 Javascript 库开发扩展（调试器）。初步结果很好，我遇到了一个错误（不确定它是否是错误）。问题是“当代码运行时打开多个选项卡（对于每个选项卡，开发工具也打开），并且开发工具从所有打开的选项卡接收消息，这不应该是这种情况。如何防止它发生？任何建议会很有帮助。如果我需要放置与任何其他文件相关的代码，请告诉我。

//Manifest.json的一部分

{
"manifest_version": 2,
"name": "debugger",
"version": "1.0",
"description": "some",
"author": "some",
"devtools_page": "devtools.html",
"background": {
    "scripts": [
        "background.js"
    ]
},
"permissions": [
    "tabs",
    "storage",
    "<all_urls>"
]
}

// content-script.js

chrome.extension.sendMessage(message, function (message) {
      console.log("message sent");
});
chrome.extension.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.action == 'debug') {
        console.log("Message: " + msg.content);
    }
});

// 背景.js

chrome.extension.onConnect.addListener(function (port) {
    var extensionListener = function (message, sender, sendResponse) {
        if (message.destination == "panel") {
            port.postMessage(message);
            // chrome.tabs.sendMessage(sender.tab.id, message, sendResponse);
        }
});

// panel.js

var port = chrome.extension.connect({
    name: "my-extension"
});

port.onMessage.addListener(function (message) { 
   // do something with message
});

【问题讨论】：

你能显示你用于消息传递的代码吗？
在您的代码中，根据sender 过滤消息。
@Makyen 你能给我一个同样的例子吗？

标签： javascript google-chrome-extension google-chrome-devtools

【解决方案1】：

在您的情况下，来自后台消息侦听器的对象 sender 包含属性 tab（带有 tab.id），因此您可以识别哪个选项卡发送了此消息。

然后您可以使用以下方法获取当前标签：

chrome.tabs.query({active: true, currentWindow: true}, function(foundTabs){
  //foundTabs[0].id //current tab id
});

这意味着您只能过滤来自当前标签的消息。

【讨论】：