在Chrome DevTools和扩展程序中的内容脚本之间进行通信 [英] Communicating between Chrome DevTools and content script in extension

问题描述

（我已经阅读过这个，它没有）

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

• devtools 创建一个 panel 用户编写代码的位置


• 当用户想从面板执行代码，面板将消息发送到背景脚本，代码


• background 脚本从面板接收消息/代码，并将它传递给内容脚本被注入页面


• content 脚本从 background 脚本并将脚本元素注入页面，然后运行代码


• 页面上的脚本的结果然后通过window.postMessage返回到 content 脚本
>

• content 脚本侦听来自页面的消息/结果并将它传递给背景脚本


• background 脚本接收来自 content 脚本的消息/结果并将其传递给面板


• 面板接收来自 background 脚本并将其插入结果日志中

Whew。

现在，当用户尝试运行代码时，什么都不会发生。我在代码中放入了一堆 console.log（） s，但控制台中没有显示任何内容。我的主要问题是，我在这里做了什么错误的消息传递，导致什么都没有发生？或者，我很乐意被告知我这样做太复杂，并且有更好的做事方式。以下简化代码...

panel.js：

  window.onload = function（）{
 var port = chrome.runtime.connect（{name：Eval in context}）; 
 //当后台页面返回时，将eval'd响应添加到控制台
 port.onMessage.addListener（function（msg）{
 addToConsole（msg，false）; 
}）; 
 document.getElementById（'run'）。addEventListener（'click'，function（）{
 var s = document.getElementById（'console'）。value; 
 try {
 //请求后台页面要求内容脚本将脚本
 //插入到最终可以在正确的上下文中评估`s`的DOM中。
 port.postMessage（s）; 
 //将`s`输出到面板中的日志中，
 //但是console.log（）什么都不做，我不能观察任何
 //结果port.postMessage 
} 
 catch（e）{} 
}）; 
}; 
  

background.js：

  chrome.runtime.onConnect.addListener（function（port）{
 //监听来自面板的消息并将其传递给内容
 port.onMessage.addListener（function（message）{
 //请求一个发送所需信息的标签
 chrome.tabs.query（{'active'：true，'currentWindow'：true}，function标签）{
 //发送消息到内容脚本
 if（tab）{
 chrome.tabs.sendMessage（tabs [0] .id，message）; 
} 
 $ b））; 
 //从内容返回Devtools 
 chrome.runtime.onMessage.addListener（function（message，sender）{
 port.postMessage （message）; 
}）; 
}）; 
  

content.js：

  //通过背景页面监听面板中的内容
 chrome.runtime.onMessage.addListener（function（message，sender）{
 executeScriptInPageContext（message）; 
}）; 
函数executeScriptInPageContext（m）{alert（m）;正如Alex所指出的那样，这里有一个输入错误你的代码阻止它的工作。
 
 
 
删除当前代码并使用  chrome.devtools.inspectedWindow.eval  直接运行代码并解析结果。这简化了您复杂的逻辑：
 
 
 
 
 devtools创建一个面板，用户在其中编写代码
 
 
 devtools运行代码
 
 
 devtools处理结果
 
 
 
 
 
 PS。  是操纵现有控制台的一种方式，但我建议不要使用它，除非它是供个人使用的。 这个答案显示了两种不同的方式。
 
(I have already read this and it didn't work, and I've done a lot of searching and experimentation to no avail.)

I am writing a Chrome extension (BigConsole) with the goal of building a better Console tab for the Chrome developer tools. This means I would like to execute user-inputted code in the context of the page with access to the DOM and other variables on the page. To do this, the communication is structured as follows:


devtools creates a panel where the user writes code
When the user wants to execute code from the panel, the panel sends a message to a background script with the code
The background script receives the message/code from panel and passes it on to the content script which is injected into the page
The content script receives the message/code from the background script and injects a script element into the page which then runs the code
The result of the script on the page is then posted back to the content script with window.postMessage
The content script listens for the message/result from the page and passes it on to the background script
The background script receives the message/result from the content script and passes it on to the panel
The panel receives the message/result from the background script and inserts it into the log of results


Whew.

Right now, when the user tries to run the code, nothing happens. I put a bunch of console.log()s into the code but nothing appears in the console. My main question is, what have I done wrong here with the message passing that results in nothing happening? Alternatively, I would love to be told that I am making this way too complicated and there is a better way of doing things. Simplified code below...

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) {}
      });
    };
background.js:
    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);
      });
    });
content.js:
    // 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); }

解决方案
As pointed out by Alex, here's a typo in your code which prevents it from working.

Drop your current code and use chrome.devtools.inspectedWindow.eval to directly run the code and parse the results. This simplifies your complicated logic to:


devtools creates a panel where the user writes code
devtools runs code
devtools handles result


PS. There is a way to manipulate the existing console, but I recommend against using it, unless it's for personal use. Two different ways to do this are shown in this answer.

                        
这篇关于在Chrome DevTools和扩展程序中的内容脚本之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！