OLD | NEW |
| 1 <div id="pageData-name" class="pageData" |
| 2 >chrome.devtools.inspectedWindow.* APIs</div> |
1 <p> | 3 <p> |
2 Use <code>chrome.devtools.inspectedWindow</code> | 4 Use <code>chrome.devtools.inspectedWindow</code> |
3 to interact with the inspected window: | 5 to interact with the inspected window: |
4 obtain the tab ID for the inspected page, | 6 obtain the tab ID for the inspected page, |
5 evaluate the code in the context of inspected window, | 7 evaluate the code in the context of inspected window, |
6 reload the page, | 8 reload the page, |
7 or obtain the list of resources within the page. | 9 or obtain the list of resources within the page. |
8 </p><p> | 10 </p><p> |
9 See <a href="devtools.html">DevTools APIs summary</a> for | 11 See <a href="devtools.html">DevTools APIs summary</a> for |
10 general introduction to using Developer Tools APIs. | 12 general introduction to using Developer Tools APIs. |
11 </p> | 13 </p> |
12 | |
13 <h2>Overview</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 the tab identifier that you can use with the | 17 provides the tab identifier that you can use with the |
17 <a href="tabs.html"><code>chrome.tabs.*</code></a> API calls. | 18 <a href="tabs.html"><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> | 23 </p> |
(...skipping 18 matching lines...) Expand all Loading... |
41 The execution context of the code being evaluated includes the | 42 The execution context of the code being evaluated includes the |
42 <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 |
43 Tools console API</a>. | 44 Tools console API</a>. |
44 For example, | 45 For example, |
45 the code can use <code>inspect()</code> and <code>$0</code>. | 46 the code can use <code>inspect()</code> and <code>$0</code>. |
46 </li><li> | 47 </li><li> |
47 The evaluated code may return a value that is passed to the extension callback. | 48 The evaluated code may return a value that is passed to the extension callback. |
48 The returned value has to be a valid JSON object (it may contain only | 49 The returned value has to be a valid JSON object (it may contain only |
49 primitive JavaScript types and acyclic references to other JSON | 50 primitive JavaScript types and acyclic references to other JSON |
50 objects). | 51 objects). |
51 | |
52 <em>Please observe extra care while processing the data received from the | 52 <em>Please observe extra care while processing the data received from the |
53 inspected page — the execution context is essentially controlled by the | 53 inspected page — the execution context is essentially controlled by the |
54 inspected page; a malicious page may affect the data being returned to the | 54 inspected page; a malicious page may affect the data being returned to the |
55 extension.</em> | 55 extension.</em> |
56 </li></ul> | 56 </li></ul> |
57 <p class="caution"> | 57 <p class="caution"> |
58 <strong>Important:</strong> | 58 <strong>Important:</strong> |
59 Due to the security considerations explained above, the | 59 Due to the security considerations explained above, the |
60 <a href="tabs.html#method-executeScript"><code | 60 <a href="tabs.html#method-executeScript"><code |
61 >chrome.tabs.executeScript()</code></a> method is the preferred way for an | 61 >chrome.tabs.executeScript()</code></a> method is the preferred way for an |
62 extension to access DOM data of the inspected page in cases where the access to | 62 extension to access DOM data of the inspected page in cases where the access to |
63 JavaScript state of the inspected page is not required.</em> | 63 JavaScript state of the inspected page is not required.</em> |
64 </p><p> | 64 </p><p> |
65 The <code>reload()</code> method may be used to reload the inspected page. | 65 The <code>reload()</code> method may be used to reload the inspected page. |
66 Additionally, the caller can specify an override for the user agent string, | 66 Additionally, the caller can specify an override for the user agent string, |
67 a script that will be injected early upon page load, and an option to force | 67 a script that will be injected early upon page load, and an option to force |
68 reload of cached resources. | 68 reload of cached resources. |
69 </p><p> | 69 </p><p> |
70 Use the <code>getResources()</code> call and the <code>onResourceContent</code> | 70 Use the <code>getResources()</code> call and the <code>onResourceContent</code> |
71 event to obtain the list of resources (documents, stylesheets, scripts, images | 71 event to obtain the list of resources (documents, stylesheets, scripts, images |
72 etc) within the inspected page. The <code>getContent()</code> and <code | 72 etc) within the inspected page. The <code>getContent()</code> and <code |
73 >setContent()</code> methods of the <code>Resource</code> class along with the | 73 >setContent()</code> methods of the <code>Resource</code> class along with the |
74 <code>onResourceContentCommitted</code> event may be used to support | 74 <code>onResourceContentCommitted</code> event may be used to support |
75 modification of the resource content, for example, by an external editor. | 75 modification of the resource content, for example, by an external editor. |
76 </p> | 76 </p> |
77 | |
78 <h2 id="overview-examples">Examples</h2> | 77 <h2 id="overview-examples">Examples</h2> |
79 <p>The following code checks for the version of jQuery used by the inspected | 78 <p>The following code checks for the version of jQuery used by the inspected |
80 page: | 79 page: |
81 | |
82 <pre> | 80 <pre> |
83 chrome.devtools.inspectedWindow.eval( | 81 chrome.devtools.inspectedWindow.eval( |
84 "jQuery.fn.jquery", | 82 "jQuery.fn.jquery", |
85 function(result, isException) { | 83 function(result, isException) { |
86 if (isException) | 84 if (isException) |
87 console.log("the page is not using jQuery"); | 85 console.log("the page is not using jQuery"); |
88 else | 86 else |
89 console.log("The page is using jQuery v" + result); | 87 console.log("The page is using jQuery v" + result); |
90 } | 88 } |
91 ); | 89 ); |
92 </pre> | 90 </pre> |
93 | |
94 <p> | 91 <p> |
95 You can find more examples that use Developer Tools APIs in | 92 You can find more examples that use Developer Tools APIs in |
96 <a href="samples.html#devtools">Samples</a>. | 93 <a href="samples.html#devtools">Samples</a>. |
97 </p> | 94 </p> |
OLD | NEW |