title: Chrome Devpanel Extension Communicating with Background Page
body: <p>I have an extension to the chrome devtools panel. I can send messages to the page using <code>chrome.devtools.inspectedWindow.eval</code> ... but how do I receive messages in the dev panel? Specifically, I need my devpanel to hook into events that happen on the page. I can't get it to listen to events on my content script, nor the background page. </p>
  
  <p>I've tried <code>chrome.extension.sendMessage</code> in the content script, along with <code>chrome.extension.onMessage.addListener</code> in the dev panel script. But <code>sendMessage</code> complains with <code>Port error: Could not establish connection. Receiving end does not exist.</code></p>
  
  <p>The issue persists with long-lived connections: </p>
  
  <p>In content script or background page:</p>
  
  <pre><code>var port = chrome.extension.connect({name: "test"});
  port.postMessage({msg: "testing"});
  </code></pre>
  
  <p>In dev tools panel javascript:</p>
  
  <pre><code>chrome.extension.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(msg) {
           // never gets here
      });
   });
  </code></pre>
  
  <p>How can I listen for events that are triggered in my content script-- in my dev tool panel? A diagram like this from Firefox's Add-On SDK would be great: <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/static-files/media/content-scripting-overview.png" rel="noreferrer">https://addons.mozilla.org/en-US/developers/docs/sdk/latest/static-files/media/content-scripting-overview.png</a></p>