title: Chrome devtools extension background page to panel
body: <p>I am having no luck passing a message from the background page to the panel. There are plenty of examples and documentation but it appears to not work from an event.</p>
  
  <p>Here's the background page's listener - standard stuff.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>chrome.extension.onConnect.addListener(function (port) {
      
      var extensionListener = function (message, sender, sendResponse) {
  
          if(message.tabId &amp;&amp; message.content) {
  
                  //Evaluate script in inspectedPage
                  if(message.action === 'code') {
                      chrome.tabs.executeScript(message.tabId, {code: message.content});
  
                  //Attach script to inspectedPage
                  } else if(message.action === 'script') {
                      chrome.tabs.executeScript(message.tabId, {file: message.content});
  
                  //Pass message to inspectedPage
                  } else {
                      chrome.tabs.sendMessage(message.tabId, message, sendResponse);
                  }
  
          // This accepts messages from the inspectedPage and 
          // sends them to the panel
          } else {
              port.postMessage(message);
          }
          sendResponse(message);
      }
  
      // Listens to messages sent from the panel
      chrome.extension.onMessage.addListener(extensionListener);
  
      port.onDisconnect.addListener(function(port) {
          chrome.extension.onMessage.removeListener(extensionListener);
      });
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code works fine in all the "textbook" examples. But in this context, it sends a message and the event listener does not pick it up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
      if(changes.status &amp;&amp; changes.status === "complete") {
          if(tabObject.url) {
              var command = 'console.log("url is ' + tabObject.url + '");';
              chrome.tabs.executeScript(tabId, {code: command});
  
              //** Trying to trigger message in background, which will pass message to panel.html */
              // THIS DOES NOT WORK!!! //
              var message = {content: "hello console"};
              chrome.extension.sendMessage(message);
          }
      }    
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone see what I'm doing wrong or know why the messages are not picked up within the onUpdated event?</p>
  
  <p>This is the code in the panel that should be triggered. It works in other scenarios.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function createChannel() {
      //Create a port with background page for continous message communication
      var port = chrome.extension.connect({
          name: "Channel between inspected page" //Given a Name
      });
  
      // Listen to messages from the background page
      port.onMessage.addListener(function (message) {
  
        document.getElementById("textareaconsole").value = message.content;
      });
  
  }());</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you're curious, I'm attempting to disable the devtools extension if it isn't a specific domain. Thank you.</p>