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. View <a href="https://developer.chrome.com/devtools/
docs/extensions-gallery">featured DevTools extensions</a>. DevTools extensions h
ave 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> |
(...skipping 191 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
202 chrome.runtime.onConnect.addListener(function(devToolsConnection) { | 202 chrome.runtime.onConnect.addListener(function(devToolsConnection) { |
203 // assign the listener function to a variable so we can remove it later | 203 // assign the listener function to a variable so we can remove it later |
204 var devToolsListener = function(message, sender, sendResponse) { | 204 var devToolsListener = function(message, sender, sendResponse) { |
205 // Inject a content script into the identified tab | 205 // Inject a content script into the identified tab |
206 chrome.tabs.executeScript(message.tabId, | 206 chrome.tabs.executeScript(message.tabId, |
207 { file: message.scriptToInject }); | 207 { file: message.scriptToInject }); |
208 } | 208 } |
209 // add the listener | 209 // add the listener |
210 devToolsConnection.onMessage.addListener(devToolsListener); | 210 devToolsConnection.onMessage.addListener(devToolsListener); |
211 | 211 |
212 devToolsConnection.onDisconnect(function() { | 212 devToolsConnection.onDisconnect.addListener(function() { |
213 devToolsConnection.onMessage.removeListener(devToolsListener); | 213 devToolsConnection.onMessage.removeListener(devToolsListener); |
214 }); | 214 }); |
215 } | 215 } |
216 </pre> | 216 </pre> |
217 | 217 |
218 <h3 id="evaluating-js">Evaluating JavaScript in the Inspected Window</h3> | 218 <h3 id="evaluating-js">Evaluating JavaScript in the Inspected Window</h3> |
219 | 219 |
220 <p>You can use the <code>$(ref:inspectedWindow.eval)</code> method to execute | 220 <p>You can use the <code>$(ref:inspectedWindow.eval)</code> method to execute |
221 JavaScript code in the context of the inspected page. You can invoke the | 221 JavaScript code in the context of the inspected page. You can invoke the |
222 <code>eval</code> method from a DevTools page, panel or sidebar pane.</p> | 222 <code>eval</code> method from a DevTools page, panel or sidebar pane.</p> |
(...skipping 275 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
498 <p> | 498 <p> |
499 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve | 499 <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Gi
ve |
500 us feedback!</a> | 500 us feedback!</a> |
501 Your comments and suggestions help us improve the APIs.</p> | 501 Your comments and suggestions help us improve the APIs.</p> |
502 | 502 |
503 <h2 id="examples">Examples</h2> | 503 <h2 id="examples">Examples</h2> |
504 | 504 |
505 <p>You can find examples that use DevTools APIs in | 505 <p>You can find examples that use DevTools APIs in |
506 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</
a>. | 506 <a href="http://developer.chrome.com/extensions/samples.html#devtools">Samples</
a>. |
507 </p> | 507 </p> |
OLD | NEW |