Javascript 扩展中Chrome开发工具和内容脚本之间的通信

（我已经读过了，但没有用，我做了很多搜索和实验，但都没有用。）

我正在编写一个Chrome扩展（），目的是为Chrome开发工具构建一个更好的控制台选项卡。这意味着我希望在页面上下文中执行用户输入代码，并访问DOM和页面上的其他变量。为此，通信的结构如下：

• devtools

  创建一个

  面板

  ，用户在其中编写代码
• 当用户想要从

  面板

  执行代码时，

  面板

  用代码向

  后台

  脚本发送消息

• 后台

  脚本从

  面板

  接收消息/代码，并将其传递给

  内容

  脚本，该脚本被注入页面

• content

  脚本从

  background

  脚本接收消息/代码，并将

  script

  元素注入页面，然后运行代码
• 页面上的

  脚本

  的结果随后通过window.postMessage发布回

  内容

  脚本

• 内容

  脚本侦听来自页面的消息/结果，并将其传递到

  后台

  脚本

• 后台

  脚本从

  内容

  脚本接收消息/结果，并将其传递到

  面板

• 面板

  从

  后台

  脚本接收消息/结果，并将其插入结果日志

呼

现在，当用户试图运行代码时，什么都没有发生。我在代码中放入了一堆

console.log（）

s，但控制台中没有显示任何内容。我的主要问题是，我在传递导致什么都没有发生的消息时做错了什么？或者，我希望别人告诉我，我把这种方式弄得太复杂了，还有更好的方法。下面是简化的代码

panel.js:

    window.onload = function() {
      var port = chrome.runtime.connect({name: "Eval in context"});
      // Add the eval'd response to the console when the background page sends it back
      port.onMessage.addListener(function (msg) {
        addToConsole(msg, false);
      });
      document.getElementById('run').addEventListener('click', function() {
        var s = document.getElementById('console').value;
        try {
          // Ask the background page to ask the content script to inject a script
          // into the DOM that can finally eval `s` in the right context.
          port.postMessage(s);
          // Outputting `s` to the log in the panel works here,
          // but console.log() does nothing, and I can't observe any
          // results of port.postMessage
        }
        catch(e) {}
      });
    };

    chrome.runtime.onConnect.addListener(function (port) {
      // Listen for message from the panel and pass it on to the content
      port.onMessage.addListener(function (message) {
        // Request a tab for sending needed information
        chrome.tabs.query({'active': true,'currentWindow': true}, function (tabs) {
          // Send message to content script
          if (tab) {
            chrome.tabs.sendMessage(tabs[0].id, message);
          }
        });
      });
      // Post back to Devtools from content
      chrome.runtime.onMessage.addListener(function (message, sender) {
        port.postMessage(message);
      });
    });

    // Listen for the content to eval from the panel via the background page
    chrome.runtime.onMessage.addListener(function (message, sender) {
      executeScriptInPageContext(message);
    });
    function executeScriptInPageContext(m) { alert(m); }

background.js:

    window.onload = function() {
      var port = chrome.runtime.connect({name: "Eval in context"});
      // Add the eval'd response to the console when the background page sends it back
      port.onMessage.addListener(function (msg) {
        addToConsole(msg, false);
      });
      document.getElementById('run').addEventListener('click', function() {
        var s = document.getElementById('console').value;
        try {
          // Ask the background page to ask the content script to inject a script
          // into the DOM that can finally eval `s` in the right context.
          port.postMessage(s);
          // Outputting `s` to the log in the panel works here,
          // but console.log() does nothing, and I can't observe any
          // results of port.postMessage
        }
        catch(e) {}
      });
    };

    chrome.runtime.onConnect.addListener(function (port) {
      // Listen for message from the panel and pass it on to the content
      port.onMessage.addListener(function (message) {
        // Request a tab for sending needed information
        chrome.tabs.query({'active': true,'currentWindow': true}, function (tabs) {
          // Send message to content script
          if (tab) {
            chrome.tabs.sendMessage(tabs[0].id, message);
          }
        });
      });
      // Post back to Devtools from content
      chrome.runtime.onMessage.addListener(function (message, sender) {
        port.postMessage(message);
      });
    });

    // Listen for the content to eval from the panel via the background page
    chrome.runtime.onMessage.addListener(function (message, sender) {
      executeScriptInPageContext(message);
    });
    function executeScriptInPageContext(m) { alert(m); }

content.js:

    window.onload = function() {
      var port = chrome.runtime.connect({name: "Eval in context"});
      // Add the eval'd response to the console when the background page sends it back
      port.onMessage.addListener(function (msg) {
        addToConsole(msg, false);
      });
      document.getElementById('run').addEventListener('click', function() {
        var s = document.getElementById('console').value;
        try {
          // Ask the background page to ask the content script to inject a script
          // into the DOM that can finally eval `s` in the right context.
          port.postMessage(s);
          // Outputting `s` to the log in the panel works here,
          // but console.log() does nothing, and I can't observe any
          // results of port.postMessage
        }
        catch(e) {}
      });
    };

    chrome.runtime.onConnect.addListener(function (port) {
      // Listen for message from the panel and pass it on to the content
      port.onMessage.addListener(function (message) {
        // Request a tab for sending needed information
        chrome.tabs.query({'active': true,'currentWindow': true}, function (tabs) {
          // Send message to content script
          if (tab) {
            chrome.tabs.sendMessage(tabs[0].id, message);
          }
        });
      });
      // Post back to Devtools from content
      chrome.runtime.onMessage.addListener(function (message, sender) {
        port.postMessage(message);
      });
    });

    // Listen for the content to eval from the panel via the background page
    chrome.runtime.onMessage.addListener(function (message, sender) {
      executeScriptInPageContext(message);
    });
    function executeScriptInPageContext(m) { alert(m); }

---

正如Alex所指出的，您的代码中有一个打字错误，它会阻止它工作

删除当前代码并使用直接运行代码并解析结果。这将您复杂的逻辑简化为：

• devtools创建一个面板，用户在其中编写代码
• devtools运行代码
• devtools处理结果

---

另外，有一种方法可以操纵现有的控制台，但我建议不要使用它，除非它是供个人使用的。中显示了两种不同的方法。

太棒了，谢谢！奖励积分不仅向我展示了一种更好的官方方式，也为我展示了一种更好的非正式方式。：）