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. |
mkearney1
2015/02/17 19:08:02
Small nit - end </p>
| |
411 | 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 | |
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 |
421 <pre>// background.js | 424 <pre>// background.js |
(...skipping 35 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 |