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

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

Issue 836153004: [docs] better links in devtools api docs (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: end p tag Created 5 years, 10 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
« no previous file with comments | « chrome/common/extensions/api/debugger.json ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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. 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
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.</p>
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
411 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
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
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>
OLDNEW
« no previous file with comments | « chrome/common/extensions/api/debugger.json ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698