| 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. DevTools extensions have 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> |
| (...skipping 29 matching lines...) Expand all Loading... |
| 40 | 40 |
| 41 <li>Get information about network requests using the <code>$(ref:devtools.networ
k)</code> | 41 <li>Get information about network requests using the <code>$(ref:devtools.networ
k)</code> |
| 42 APIs.</li> | 42 APIs.</li> |
| 43 | 43 |
| 44 </ul> | 44 </ul> |
| 45 | 45 |
| 46 <p>The DevTools page cannot use most of the extensions APIs directly. It has | 46 <p>The DevTools page cannot use most of the extensions APIs directly. It has |
| 47 access to the same subset of the <code>$(ref:extension)</code> | 47 access to the same subset of the <code>$(ref:extension)</code> |
| 48 and <code>$(ref:runtime)</code> | 48 and <code>$(ref:runtime)</code> |
| 49 APIs that a content script has access to. Like a content script, a DevTools page | 49 APIs that a content script has access to. Like a content script, a DevTools page |
| 50 can communicate with the background page using <a href="messaging.html">Message
Passing</a>. | 50 can communicate with the background page using <a href="messaging">Message Passi
ng</a>. |
| 51 For an example, see <a href="#injecting">Injecting a Content Script</a>.</p> | 51 For an example, see <a href="#injecting">Injecting a Content Script</a>.</p> |
| 52 | 52 |
| 53 <h2 id="creating">Creating a DevTools Extension</h2> | 53 <h2 id="creating">Creating a DevTools Extension</h2> |
| 54 | 54 |
| 55 <p>To create a DevTools page for your extension, add the <code>devtools_page</co
de> | 55 <p>To create a DevTools page for your extension, add the <code>devtools_page</co
de> |
| 56 field in the extension manifest:</p> | 56 field in the extension manifest:</p> |
| 57 | 57 |
| 58 <pre> | 58 <pre> |
| 59 { | 59 { |
| 60 "name": ... | 60 "name": ... |
| 61 "version": "1.0", | 61 "version": "1.0", |
| 62 "minimum_chrome_version": "10.0", | 62 "minimum_chrome_version": "10.0", |
| 63 "devtools_page": "devtools.html", | 63 "devtools_page": "devtools", |
| 64 ... | 64 ... |
| 65 } | 65 } |
| 66 </pre> | 66 </pre> |
| 67 | 67 |
| 68 <p>An instance of the <code>devtools_page</code> specified in your extension's | 68 <p>An instance of the <code>devtools_page</code> specified in your extension's |
| 69 manifest is created for every DevTools window opened. The page may add other | 69 manifest is created for every DevTools window opened. The page may add other |
| 70 extension pages as panels and sidebars to the DevTools window using the | 70 extension pages as panels and sidebars to the DevTools window using the |
| 71 <code>$(ref:devtools.panels)</code> API.</p> | 71 <code>$(ref:devtools.panels)</code> API.</p> |
| 72 | 72 |
| 73 <p class="note">The <code>devtools_page</code> field must point to an HTML page. | 73 <p class="note">The <code>devtools_page</code> field must point to an HTML page. |
| 74 This differs from the <code>background</code> field, used for specifying a backg
round page, | 74 This differs from the <code>background</code> field, used for specifying a backg
round page, |
| 75 which lets you specify JavaScript files directly.</p> | 75 which lets you specify JavaScript files directly.</p> |
| 76 | 76 |
| 77 <p>The <code>chrome.devtools.*</code> API modules are available only to the page
s | 77 <p>The <code>chrome.devtools.*</code> API modules are available only to the page
s |
| 78 loaded within the DevTools window. Content scripts and other extension pages do
not | 78 loaded within the DevTools window. Content scripts and other extension pages do
not |
| 79 have these APIs. Thus, the APIs are available only through the lifetime of the | 79 have these APIs. Thus, the APIs are available only through the lifetime of the |
| 80 DevTools window.</p> | 80 DevTools window.</p> |
| 81 | 81 |
| 82 <p> | 82 <p> |
| 83 There are also some DevTools APIs that are still experimental. | 83 There are also some DevTools APIs that are still experimental. |
| 84 Refer to <a href="http://developer.chrome.com/extensions/experimental.html">chro
me.experimental.* | 84 Refer to <a href="http://developer.chrome.com/extensions/experimental">chrome.ex
perimental.* |
| 85 APIs</a> for the list of | 85 APIs</a> for the list of |
| 86 experimental APIs and guidelines on how to use them.</p> | 86 experimental APIs and guidelines on how to use them.</p> |
| 87 | 87 |
| 88 <h2 id="devtools-ui">DevTools UI Elements: Panels and Sidebar Panes</h2> | 88 <h2 id="devtools-ui">DevTools UI Elements: Panels and Sidebar Panes</h2> |
| 89 | 89 |
| 90 <p> | 90 <p> |
| 91 In addition to the usual extension UI elements, such as browser actions, context | 91 In addition to the usual extension UI elements, such as browser actions, context |
| 92 menus and popups, a DevTools extension can add UI elements to the DevTools windo
w:</p> | 92 menus and popups, a DevTools extension can add UI elements to the DevTools windo
w:</p> |
| 93 | 93 |
| 94 <ul> | 94 <ul> |
| (...skipping 12 matching lines...) Expand all Loading... |
| 107 | 107 |
| 108 <img src="{{static}}/images/devtools-extension-ui.png" | 108 <img src="{{static}}/images/devtools-extension-ui.png" |
| 109 alt="DevTools window showing Elements panel and Styles sidebar pane." /> | 109 alt="DevTools window showing Elements panel and Styles sidebar pane." /> |
| 110 <p> | 110 <p> |
| 111 Each panel is its own HTML file, which can include other resources (JavaScript,
CSS, | 111 Each panel is its own HTML file, which can include other resources (JavaScript,
CSS, |
| 112 images, and so on). Creating a basic panel looks like this: | 112 images, and so on). Creating a basic panel looks like this: |
| 113 </p> | 113 </p> |
| 114 <pre> | 114 <pre> |
| 115 chrome.devtools.panels.create("My Panel", | 115 chrome.devtools.panels.create("My Panel", |
| 116 "MyPanelIcon.png", | 116 "MyPanelIcon.png", |
| 117 "Panel.html", | 117 "Panel", |
| 118 function(panel) { | 118 function(panel) { |
| 119 // code invoked on panel creation | 119 // code invoked on panel creation |
| 120 } | 120 } |
| 121 ); | 121 ); |
| 122 </pre> | 122 </pre> |
| 123 | 123 |
| 124 <p>JavaScript executed in a panel or sidebar pane has access to the the same API
s | 124 <p>JavaScript executed in a panel or sidebar pane has access to the the same API
s |
| 125 as the DevTools page.</p> | 125 as the DevTools page.</p> |
| 126 | 126 |
| 127 <p>Creating a basic sidebar pane for the Elements panel looks like this:</p> | 127 <p>Creating a basic sidebar pane for the Elements panel looks like this:</p> |
| (...skipping 267 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 395 | 395 |
| 396 // Create a connection to the background page | 396 // Create a connection to the background page |
| 397 var backgroundPageConnection = chrome.runtime.connect({ | 397 var backgroundPageConnection = chrome.runtime.connect({ |
| 398 name: "devtools-page" | 398 name: "devtools-page" |
| 399 }); | 399 }); |
| 400 </pre> | 400 </pre> |
| 401 | 401 |
| 402 <h2 id="more">More information</h2> | 402 <h2 id="more">More information</h2> |
| 403 | 403 |
| 404 <p>For information on the standard APIs that extensions can use, see | 404 <p>For information on the standard APIs that extensions can use, see |
| 405 <a href="http://developer.chrome.com/extensions/api_index.html">chrome.* APIs</a
> | 405 <a href="http://developer.chrome.com/extensions/api_index">chrome.* APIs</a> |
| 406 and <a href="http://developer.chrome.com/extensions/api_other.html">Other APIs</
a>. | 406 and <a href="http://developer.chrome.com/extensions/api_other">Other APIs</a>. |
| 407 </p> | 407 </p> |
| 408 | 408 |
| 409 <p> | 409 <p> |
| 410 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve | 410 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve |
| 411 us feedback!</a> | 411 us feedback!</a> |
| 412 Your comments and suggestions help us improve the APIs.</p> | 412 Your comments and suggestions help us improve the APIs.</p> |
| 413 | 413 |
| 414 <h2 id="examples">Examples</h2> | 414 <h2 id="examples">Examples</h2> |
| 415 | 415 |
| 416 <p>You can find examples that use DevTools APIs in | 416 <p>You can find examples that use DevTools APIs in |
| 417 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</
a>. | 417 <a href="http://developer.chrome.com/extensions/samples#devtools">Samples</a>. |
| 418 </p> | 418 </p> |
| OLD | NEW |