Docs: devtools extensions. Messaging flow from inject script to devtools

chrome/common/extensions/docs/templates/articles/devtools.html

 <h1>Extending DevTools</h1>
 
 <h2 id="overview">Overview</h2>
 
 <p>A DevTools extension adds functionality to the Chrome DevTools. It can add new
 UI panels and sidebars, interact with the inspected page, get information about
 network requests, and more. DevTools extensions have access to an additional set
 of DevTools-specific extension APIs:</p>
 
 <ul>
@@ skipping 343 matching lines @@
 var backgroundPageConnection = chrome.runtime.connect({
     name: "panel"
 });
 
 backgroundPageConnection.postMessage({
     name: 'init',
     tabId: chrome.devtools.inspectedWindow.tabId
 });
 </pre>
 
+
+<h3 id="evaluated-scripts-to-devtools">Messaging from Injected Scripts to the DevTools Page</h3>
+ 
+<p>While the above solution works for content scripts, code that is injected
+directly into the page (e.g. through appending a <code>&lt;script&gt;</code> tag
+or through <code>$(ref:inspectedWindow.eval)</code>) requires a different strategy.
+In this context, <code>$(ref:runtime.sendMessage)</code> will not pass messages
+to the background script as expected.</p>
+
+<p>As a workaround, you can combine your injected script with a content script
+that acts as an intermediary. To pass messages to the content script, you can
+use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage">
+<code>window.postMessage</code></a> API. Here's an example, assuming the
+background script from the previous section:</p>
+
+<pre>
+// injected-script.js
+
+window.postMessage({
+  greeting: 'hello there!',
+  source: 'my-devtools-extension'
+}, '*');
+</pre>
+
+<pre>
+// content-script.js
+
+window.addEventListener('message', function(event) {
+  // Only accept messages from the same frame
+  if (event.source !== window) {
+    return;
+  }
+
+  var message = event.data;
+
+  // Only accept messages that we know are ours
+  if (typeof message !== 'object' || message === null ||
+      !message.source === 'my-devtools-extension') {
+    return;
+  }
+
+  chrome.runtime.sendMessage(message);
+});
+</pre>
+
+Your message will now flow from the injected script, to the content script, to
+the background script, and finally to the DevTools page.
+
 <h3 id="detecting-open-close">Detecting When DevTools Opens and Closes</h3>
 
 <p>If your extension needs to track whether the DevTools window is open, you can
 add an $(ref:runtime.onConnect onConnect) listener to the background page, and call
 $(ref:runtime.connect connect) from the DevTools page. Since each tab can have its
 own DevTools window open, you may receive multiple connect events. To track whether
 any DevTools window is open, you need to count the connect and disconnect events as
 shown below:</p>
 
 <pre>// background.js
@@ skipping 35 matching lines @@
 <p>
 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Give
 us feedback!</a>
 Your comments and suggestions help us improve the APIs.</p>
 
 <h2 id="examples">Examples</h2>
 
 <p>You can find examples that use DevTools APIs in
 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</a>.
 </p>