| OLD | NEW |
| 1 <h1>Extending DevTools</h1> | 1 <h1>Extending DevTools</h1> |
| 2 | 2 |
| 3 <h2 id="overview">Overview</h2> | 3 <h2 id="overview">Overview</h2> |
| 4 | 4 |
| 5 <p>A DevTools extension adds functionality to the Chrome DevTools. It can add ne
w | 5 <p>A DevTools extension adds functionality to the Chrome DevTools. It can add ne
w |
| 6 UI panels and sidebars, interact with the inspected page, get information about | 6 UI panels and sidebars, interact with the inspected page, get information about |
| 7 network requests, and more. DevTools extensions have access to an additional set | 7 network requests, and more. View <a href="https://developer.chrome.com/devtools/
docs/extensions-gallery">featured DevTools extensions</a>. DevTools extensions h
ave access to an additional set |
| 8 of DevTools-specific extension APIs:</p> | 8 of DevTools-specific extension APIs:</p> |
| 9 | 9 |
| 10 <ul> | 10 <ul> |
| 11 <li><code>$(ref:devtools.inspectedWindow)</code></li> | 11 <li><code>$(ref:devtools.inspectedWindow)</code></li> |
| 12 <li><code>$(ref:devtools.network)</code></a></li> | 12 <li><code>$(ref:devtools.network)</code></a></li> |
| 13 <li><code>$(ref:devtools.panels)</code></a></li> | 13 <li><code>$(ref:devtools.panels)</code></a></li> |
| 14 </ul> | 14 </ul> |
| 15 | 15 |
| 16 <p>A DevTools extension is structured like any other extension: it can have a | 16 <p>A DevTools extension is structured like any other extension: it can have a |
| 17 background page, content scripts, and other items. In addition, each DevTools | 17 background page, content scripts, and other items. In addition, each DevTools |
| (...skipping 381 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 399 // Only accept messages that we know are ours | 399 // Only accept messages that we know are ours |
| 400 if (typeof message !== 'object' || message === null || | 400 if (typeof message !== 'object' || message === null || |
| 401 !message.source === 'my-devtools-extension') { | 401 !message.source === 'my-devtools-extension') { |
| 402 return; | 402 return; |
| 403 } | 403 } |
| 404 | 404 |
| 405 chrome.runtime.sendMessage(message); | 405 chrome.runtime.sendMessage(message); |
| 406 }); | 406 }); |
| 407 </pre> | 407 </pre> |
| 408 | 408 |
| 409 Your message will now flow from the injected script, to the content script, to | 409 <p>Your message will now flow from the injected script, to the content script, t
o |
| 410 the background script, and finally to the DevTools page. | 410 the background script, and finally to the DevTools page.</p> |
| 411 |
| 412 <p>You can also consider <a href="https://github.com/GoogleChrome/devtools-docs/
issues/143">two alternative message passing techniques here</a>.</p> |
| 413 |
| 411 | 414 |
| 412 <h3 id="detecting-open-close">Detecting When DevTools Opens and Closes</h3> | 415 <h3 id="detecting-open-close">Detecting When DevTools Opens and Closes</h3> |
| 413 | 416 |
| 414 <p>If your extension needs to track whether the DevTools window is open, you can | 417 <p>If your extension needs to track whether the DevTools window is open, you can |
| 415 add an $(ref:runtime.onConnect onConnect) listener to the background page, and c
all | 418 add an $(ref:runtime.onConnect onConnect) listener to the background page, and c
all |
| 416 $(ref:runtime.connect connect) from the DevTools page. Since each tab can have i
ts | 419 $(ref:runtime.connect connect) from the DevTools page. Since each tab can have i
ts |
| 417 own DevTools window open, you may receive multiple connect events. To track whet
her | 420 own DevTools window open, you may receive multiple connect events. To track whet
her |
| 418 any DevTools window is open, you need to count the connect and disconnect events
as | 421 any DevTools window is open, you need to count the connect and disconnect events
as |
| 419 shown below:</p> | 422 shown below:</p> |
| 420 | 423 |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 457 <p> | 460 <p> |
| 458 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve | 461 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve |
| 459 us feedback!</a> | 462 us feedback!</a> |
| 460 Your comments and suggestions help us improve the APIs.</p> | 463 Your comments and suggestions help us improve the APIs.</p> |
| 461 | 464 |
| 462 <h2 id="examples">Examples</h2> | 465 <h2 id="examples">Examples</h2> |
| 463 | 466 |
| 464 <p>You can find examples that use DevTools APIs in | 467 <p>You can find examples that use DevTools APIs in |
| 465 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</
a>. | 468 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</
a>. |
| 466 </p> | 469 </p> |
| OLD | NEW |