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> |
6 the inspected window: obtain tab ID for the inspected page, evaluate the code | 6 to interact with the inspected window: |
7 in the context of inspected window, reload the page. | 7 obtain the tab ID for the inspected page, |
| 8 evaluate the code in the context of inspected window, |
| 9 reload the page, |
| 10 or obtain the list of resources within the page. |
8 </p><p> | 11 </p><p> |
9 See <a href="experimental.devtools.html">DevTools APIs summary</a> for | 12 See <a href="experimental.devtools.html">DevTools APIs summary</a> for |
10 general introduction to using Developer Tools APIs. | 13 general introduction to using Developer Tools APIs. |
11 </p> | 14 </p> |
12 | 15 |
13 <h2>Notes</h2> | 16 <h2>Overview</h2> |
14 <p> | 17 <p> |
15 The <a href="#property-tabId"><code>tabId</code></a> property | 18 The <a href="#property-tabId"><code>tabId</code></a> property |
16 provides tab identifier that may be used with the <a href="tabs.html"> | 19 provides the tab identifier that you can use with the |
17 <code>chrome.tabs.*</code></a> API calls. | 20 <a href="tabs.html"><code>chrome.tabs.*</code></a> API calls. |
18 However, please note that <code>chrome.tabs.*</code> API is not | 21 However, please note that <code>chrome.tabs.*</code> API is not |
19 exposed to the Developer Tools extension pages due to security considerations | 22 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 | 23 — you will need to pass the tab ID to the background page and invoke |
21 the <code>chrome.tabs.*</code> API functions from there. | 24 the <code>chrome.tabs.*</code> API functions from there. |
22 </p></p> | 25 </p> |
| 26 <p> |
23 The <code>eval()</code> method provides the ability for extensions to execute | 27 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. | 28 JavaScript code in the context of the main frame of the inspected page. |
25 This method is different from | 29 This method is powerful when used in the right context |
26 <code>chrome.tabs.executeScript()</code> in the following aspects: | 30 and dangerous when used inappropriately. |
| 31 Use the <code>chrome.tabs.executeScript()</code> method |
| 32 unless you need the specific functionality |
| 33 that the <code>eval()</code> method provides. |
| 34 </p> |
| 35 <p>Here are the main differences between the |
| 36 <code>eval()</code> and <code>chrome.tabs.executeScript()</code> methods: |
27 </p><ul> | 37 </p><ul> |
28 <li>The <code>eval()</code> method does not | 38 <li>The <code>eval()</code> method does not |
29 use an isolated world for the code being evaluated, so the JavaScript state | 39 use an isolated world for the code being evaluated, so the JavaScript state |
30 of the inspected window is accessible to the code. | 40 of the inspected window is accessible to the code. |
| 41 Use this method when access to the JavaScript state of the inspected page |
| 42 is required. |
| 43 </li><li> |
| 44 The execution context of the code being evaluated includes the |
| 45 <a href="http://code.google.com/chrome/devtools/docs/console.html">Developer |
| 46 Tools console API</a>. |
| 47 For example, |
| 48 the code can use <code>inspect()</code> and <code>$0</code>. |
31 </li><li> | 49 </li><li> |
32 The evaluated code may return a value that is passed to the extension callback. | 50 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 | 51 The returned value has to be a valid JSON object (it may contain only |
34 primitive JavaScript types and acyclic references to other JSON | 52 primitive JavaScript types and acyclic references to other JSON |
35 objects). | 53 objects). |
36 | 54 |
37 <em>Please observe extra care while processing the data received from the | 55 <em>Please observe extra care while processing the data received from the |
38 inspected page — the execution context is essentially controlled by the | 56 inspected page — the execution context is essentially controlled by the |
39 inspected page; a malicious page may affect the data being returned to the | 57 inspected page; a malicious page may affect the data being returned to the |
40 extension.</em> | 58 extension.</em> |
41 </li><li> | 59 </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"> | 60 <p class="caution"> |
48 <strong>Important:</strong> | 61 <strong>Important:</strong> |
49 Due to the security considerations explained above, the | 62 Due to the security considerations explained above, the |
50 <a href="tabs.html#method-executeScript"><code | 63 <a href="tabs.html#method-executeScript"><code |
51 >chrome.tabs.executeScript()</code></a> method is the preferred way for an | 64 >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 | 65 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> | 66 JavaScript state of the inspected page is not required.</em> |
54 </p><p> | 67 </p><p> |
55 The <code>reload()</code> method may be used to reload the inspected page. | 68 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, | 69 Additionally, the caller can specify an override for the user agent string, |
57 a script that will be injected early upon page load, and an option to force | 70 a script that will be injected early upon page load, and an option to force |
58 reload of cached resources. | 71 reload of cached resources. |
59 </p><p> | 72 </p><p> |
60 Use the <code>getResources()</code> call and the <code>onResourceContent</code> | 73 Use the <code>getResources()</code> call and the <code>onResourceContent</code> |
61 event to obtain the list of resources (documents, stylesheets, scripts, images | 74 event to obtain the list of resources (documents, stylesheets, scripts, images |
62 etc) within the inspected page. The <code>getContent()</code> and <code | 75 etc) within the inspected page. The <code>getContent()</code> and <code |
63 >setContent()</code> methods of the <code>Resource</code> class along with the | 76 >setContent()</code> methods of the <code>Resource</code> class along with the |
64 <code>onResourceContentCommitted</code> event may be used to support | 77 <code>onResourceContentCommitted</code> event may be used to support |
65 modification of the resource content, e.g. by an external editor. | 78 modification of the resource content, for example, by an external editor. |
66 </p> | 79 </p> |
67 | 80 |
68 <h2 id="overview-examples">Examples</h2> | 81 <h2 id="overview-examples">Examples</h2> |
69 <p>The following code checks for the version of jQuery used by the inspected | 82 <p>The following code checks for the version of jQuery used by the inspected |
70 page: | 83 page: |
71 | 84 |
72 <pre> | 85 <pre> |
73 chrome.experimental.devtools.inspectedWindow.eval( | 86 chrome.experimental.devtools.inspectedWindow.eval( |
74 "jQuery.fn.jquery", | 87 "jQuery.fn.jquery", |
75 function(result, isException) { | 88 function(result, isException) { |
76 if (isException) | 89 if (isException) |
77 console.log("the page is not using jQuery"); | 90 console.log("the page is not using jQuery"); |
78 else | 91 else |
79 console.log("The page is using jQuery v" + result); | 92 console.log("The page is using jQuery v" + result); |
80 } | 93 } |
81 ); | 94 ); |
82 </pre> | 95 </pre> |
83 | 96 |
84 <p> | 97 <p> |
85 You can find more examples that use Developer Tools APIs in | 98 You can find more examples that use Developer Tools APIs in |
86 <a href="samples.html#devtools">Samples</a>. | 99 <a href="samples.html#devtools">Samples</a>. |
87 </p> | 100 </p> |
OLD | NEW |