| OLD | NEW |
| 1 <div id="pageData-name" class="pageData" | 1 <div id="pageData-name" class="pageData" |
| 2 >chrome.experimental.devtools.inspectedWindow.* APIs</div> | 2 >chrome.experimental.devtools.inspectedWindow.* APIs</div> |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 Use <code>chrome.experimental.devtools.inspectedWindow</code> to interact with | 5 Use <code>chrome.experimental.devtools.inspectedWindow</code> to interact with |
| 6 the inspected window: obtain tab ID for the inspected page, evaluate the code | 6 the inspected window: obtain tab ID for the inspected page, evaluate the code |
| 7 in the context of inspected window, reload the page. | 7 in the context of inspected window, reload the page, |
| 8 obtain the list of resources within the page. |
| 8 </p><p> | 9 </p><p> |
| 9 See <a href="experimental.devtools.html">DevTools APIs summary</a> for | 10 See <a href="experimental.devtools.html">DevTools APIs summary</a> for |
| 10 general introduction to using Developer Tools APIs. | 11 general introduction to using Developer Tools APIs. |
| 11 </p> | 12 </p> |
| 12 | 13 |
| 13 <h2>Notes</h2> | 14 <h2>Overview</h2> |
| 14 <p> | 15 <p> |
| 15 The <a href="#property-tabId"><code>tabId</code></a> property | 16 The <a href="#property-tabId"><code>tabId</code></a> property |
| 16 provides tab identifier that may be used with the <a href="tabs.html"> | 17 provides the tab identifier that may be used with the <a href="tabs.html"> |
| 17 <code>chrome.tabs.*</code></a> API calls. | 18 <code>chrome.tabs.*</code></a> API calls. |
| 18 However, please note that <code>chrome.tabs.*</code> API is not | 19 However, please note that <code>chrome.tabs.*</code> API is not |
| 19 exposed to the Developer Tools extension pages due to security considerations | 20 exposed to the Developer Tools extension pages due to security considerations |
| 20 — you will need to pass the tab ID to the background page and invoke | 21 — you will need to pass the tab ID to the background page and invoke |
| 21 the <code>chrome.tabs.*</code> API functions from there. | 22 the <code>chrome.tabs.*</code> API functions from there. |
| 22 </p></p> | 23 </p> |
| 24 <p> |
| 23 The <code>eval()</code> method provides the ability for extensions to execute | 25 The <code>eval()</code> method provides the ability for extensions to execute |
| 24 JavaScript code in the context of the main frame of the inspected page. | 26 JavaScript code in the context of the main frame of the inspected page. |
| 25 This method is different from | 27 This method if powerful when used in the right context, |
| 26 <code>chrome.tabs.executeScript()</code> in the following aspects: | 28 and dangerous when used inappropriately. |
| 29 In key instances, |
| 30 the <code>chrome.tabs.executeScript()</code> should be used instead. |
| 31 </p> |
| 32 <p>Here are the main differences between the |
| 33 <code>eval()</code> and <code>chrome.tabs.executeScript()</code> methods: |
| 27 </p><ul> | 34 </p><ul> |
| 28 <li>The <code>eval()</code> method does not | 35 <li>The <code>eval()</code> method does not |
| 29 use an isolated world for the code being evaluated, so the JavaScript state | 36 use an isolated world for the code being evaluated, so the JavaScript state |
| 30 of the inspected window is accessible to the code. | 37 of the inspected window is accessible to the code. |
| 38 Use this method when access to the JavaScript state of the inspected page |
| 39 is required. |
| 40 </li><li> |
| 41 The execution context of the code being evaluated includes the |
| 42 <a href="http://code.google.com/chrome/devtools/docs/console.html">Developer |
| 43 Tools console API</a> (e.g. <code>inspect()</code>, <code>$0</code> etc). |
| 31 </li><li> | 44 </li><li> |
| 32 The evaluated code may return a value that is passed to the extension callback. | 45 The evaluated code may return a value that is passed to the extension callback. |
| 33 The returned value has to be a valid JSON object (i.e. may contain only | 46 The returned value has to be a valid JSON object (i.e. may contain only |
| 34 primitive JavaScript types and acyclic references to other JSON | 47 primitive JavaScript types and acyclic references to other JSON |
| 35 objects). | 48 objects). |
| 36 | 49 |
| 37 <em>Please observe extra care while processing the data received from the | 50 <em>Please observe extra care while processing the data received from the |
| 38 inspected page — the execution context is essentially controlled by the | 51 inspected page — the execution context is essentially controlled by the |
| 39 inspected page; a malicious page may affect the data being returned to the | 52 inspected page; a malicious page may affect the data being returned to the |
| 40 extension.</em> | 53 extension.</em> |
| 41 </li><li> | 54 </li></ul> |
| 42 The execution context of the code being evaluated includes the | |
| 43 <a href="http://code.google.com/chrome/devtools/docs/console.html">Developer | |
| 44 Tools console API</a> (e.g. <code>inspect()</code>, <code>$0</code> etc). | |
| 45 </li> | |
| 46 </ul> | |
| 47 <p class="caution"> | 55 <p class="caution"> |
| 48 <strong>Important:</strong> | 56 <strong>Important:</strong> |
| 49 Due to the security considerations explained above, the | 57 Due to the security considerations explained above, the |
| 50 <a href="tabs.html#method-executeScript"><code | 58 <a href="tabs.html#method-executeScript"><code |
| 51 >chrome.tabs.executeScript()</code></a> method is the preferred way for an | 59 >chrome.tabs.executeScript()</code></a> method is the preferred way for an |
| 52 extension to access DOM data of the inspected page in cases where the access to | 60 extension to access DOM data of the inspected page in cases where the access to |
| 53 JavaScript state of the inspected page is not required.</em> | 61 JavaScript state of the inspected page is not required.</em> |
| 54 </p><p> | 62 </p><p> |
| 55 The <code>reload()</code> method may be used to reload the inspected page. | 63 The <code>reload()</code> method may be used to reload the inspected page. |
| 56 Additionally, the caller can specify an override for the user agent string, | 64 Additionally, the caller can specify an override for the user agent string, |
| (...skipping 21 matching lines...) Expand all Loading... |
| 78 else | 86 else |
| 79 console.log("The page is using jQuery v" + result); | 87 console.log("The page is using jQuery v" + result); |
| 80 } | 88 } |
| 81 ); | 89 ); |
| 82 </pre> | 90 </pre> |
| 83 | 91 |
| 84 <p> | 92 <p> |
| 85 You can find more examples that use Developer Tools APIs in | 93 You can find more examples that use Developer Tools APIs in |
| 86 <a href="samples.html#devtools">Samples</a>. | 94 <a href="samples.html#devtools">Samples</a>. |
| 87 </p> | 95 </p> |
| OLD | NEW |