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