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 |