OLD | NEW |
1 <p id="classSummary"> | 1 <p id="classSummary"> |
2 Use the <code>chrome.devtools.panels</code> module to integrate | 2 Use the <code>chrome.devtools.panels</code> module to integrate |
3 your extension into Developer Tools window UI: create your own panels, access | 3 your extension into Developer Tools window UI: create your own panels, access |
4 existing panels, and add sidebars. | 4 existing panels, and add sidebars. |
5 </p><p> | 5 </p><p> |
6 See <a href="devtools.html">DevTools APIs summary</a> for | 6 See <a href="devtools.html">DevTools APIs summary</a> for |
7 general introduction to using Developer Tools APIs. | 7 general introduction to using Developer Tools APIs. |
8 </p> | 8 </p> |
9 | 9 |
10 <h2>Overview</h2> | 10 <h2 id="overview">Overview</h2> |
11 | 11 |
12 <p> | 12 <p> |
13 Each extension panel and sidebar is displayed as a separate HTML page. All | 13 Each extension panel and sidebar is displayed as a separate HTML page. All |
14 extension pages displayed in the Developer Tools window have access to all | 14 extension pages displayed in the Developer Tools window have access to all |
15 modules in <code>chrome.devtools</code> API, as well as to | 15 modules in <code>chrome.devtools</code> API, as well as to |
16 <a href="extension.html">chrome.extension</a> API. Other extension APIs are not | 16 <a href="extension.html">chrome.extension</a> API. Other extension APIs are not |
17 available to the pages within Developer Tools window, but you may invoke them | 17 available to the pages within Developer Tools window, but you may invoke them |
18 by sending a request to the background page of your extension, similarly to how | 18 by sending a request to the background page of your extension, similarly to how |
19 it's done in the <a href="overview.html#contentScripts">content scripts</a>. | 19 it's done in the <a href="overview.html#contentScripts">content scripts</a>. |
20 </p><p> | 20 </p><p> |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
54 | 54 |
55 <img src="{{static}}/images/devtools-panels.png" | 55 <img src="{{static}}/images/devtools-panels.png" |
56 style="margin-left: 20px" | 56 style="margin-left: 20px" |
57 width="686" height="289" | 57 width="686" height="289" |
58 alt="Extension icon panel on DevTools toolbar" /> | 58 alt="Extension icon panel on DevTools toolbar" /> |
59 </p> | 59 </p> |
60 | 60 |
61 <p> | 61 <p> |
62 You can find examples that use this API in | 62 You can find examples that use this API in |
63 <a href="samples.html#Chrome Query">Samples</a>. | 63 <a href="samples.html#Chrome Query">Samples</a>. |
64 </p> | 64 </p> |
OLD | NEW |