Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(78)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/devtools.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698