chrome/common/extensions/docs/templates/intros/devtools_inspectedWindow.html

   1 <p>
   2 Use <code>chrome.devtools.inspectedWindow</code>
   3 to interact with the inspected window:
   4 obtain the tab ID for the inspected page,
   5 evaluate the code in the context of inspected window,
   6 reload the page,
   7 or obtain the list of resources within the page.
   8 </p><p>
   9 See <a href="devtools">DevTools APIs summary</a> for
  10 general introduction to using Developer Tools APIs.
  11 </p>
  12
  13 <h2 id="overview">Overview</h2>
  14 <p>
  15 The <code>$(ref:devtools.inspectedWindow.tabId tabId)</code> property
  16 provides the tab identifier that you can use with the
  17 <a href="tabs"><code>chrome.tabs.*</code></a> API calls.
  18 However, please note that <code>chrome.tabs.*</code> API is not
  19 exposed to the Developer Tools extension pages due to security considerations
  20 &mdash; 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 </p>
  23 <p>
  24 The <code>reload</code> method may be used to reload the inspected page.
  25 Additionally, the caller can specify an override for the user agent string,
  26 a script that will be injected early upon page load, or an option to force
  27 reload of cached resources.
  28 </p><p>
  29 Use the <code>getResources</code> call and the <code>onResourceContent</code>
  30 event to obtain the list of resources (documents, stylesheets, scripts, images
  31 etc) within the inspected page. The <code>getContent</code> and <code
  32 >setContent</code> methods of the <code>Resource</code> class along with the
  33 <code>onResourceContentCommitted</code> event may be used to support
  34 modification of the resource content, for example, by an external editor.
  35 </p>
  36 <h2 id="executing-code">Executing Code in the Inspected Window</h2>
  37 <p>
  38 The <code>eval</code> method provides the ability for extensions to execute
  39 JavaScript code in the context of the inspected page.
  40 This method is powerful when used in the right context
  41 and dangerous when used inappropriately.
  42 Use the <code>$(ref:tabs.executeScript)</code> method
  43 unless you need the specific functionality
  44 that the <code>eval</code> method provides.
  45 </p>
  46 <p>Here are the main differences between the
  47 <code>eval</code> and <code>tabs.executeScript</code> methods:
  48 </p><ul>
  49 <li>The <code>eval</code> method does not
  50 use an isolated world for the code being evaluated, so the JavaScript state
  51 of the inspected window is accessible to the code.
  52 Use this method when access to the JavaScript state of the inspected page
  53 is required.
  54 </li><li>
  55 The execution context of the code being evaluated includes the
  56 <a href="http://code.google.com/chrome/devtools/docs/console.html">Developer
  57 Tools console API</a>.
  58 For example,
  59 the code can use <code>inspect</code> and <code>$0</code>.
  60 </li><li>
  61 The evaluated code may return a value that is passed to the extension callback.
  62 The returned value has to be a valid JSON object (it may contain only
  63 primitive JavaScript types and acyclic references to other JSON
  64 objects).
  65
  66 <em>Please observe extra care while processing the data received from the
  67 inspected page &mdash; the execution context is essentially controlled by the
  68 inspected page; a malicious page may affect the data being returned to the
  69 extension.</em>
  70 </li></ul>
  71 <p class="caution">
  72 <strong>Important:</strong>
  73 Due to the security considerations explained above, the
  74 <code>$(ref:tabs.executeScript)</code> method is the preferred way for an
  75 extension to access DOM data of the inspected page in cases where the access to
  76 JavaScript state of the inspected page is not required.
  77 </p>
  78
  79 <p>Note that a page can include multiple different JavaScript execution contexts. Each frame has
  80 its own context, plus an additional context for each extension that has content scripts running
  81 in that frame.</p>
  82 <p>
  83 By default, the <code>eval</code> method executes in the context of the main frame of the
  84 inspected page. </p>
  85
  86 <p>The <code>eval</code> method takes an optional second argument that you can use to specify
  87 the context in which the code is evaluated. This <em>options</em> object can contain one or more of the
  88 following keys:</p>
  89
  90 <dl>
  91 <dt><code>frameURL</code></dt>
  92 <dd>Use to specify a frame other than the inspected page's main frame.</dd>
  93 <dt><code>contextSecurityOrigin</code></dt>
  94 <dd>Use to select a context within the specified frame
  95 according to its <a href="http://www.ietf.org/rfc/rfc6454.txt">web origin</a>.</dd>
  96 <dt><code>useContentScriptContext</code></dt>
  97 <dd>If true, execute the script in the same context
  98 as the extensions's content scripts. (Equivalent to specifying the extensions's own web orgin
  99 as the context security origin.)
 100 This can be used to exchange data with the content script.</dd>
 101 </dl>
 102
 103
 104 <h2 id="overview-examples">Examples</h2>
 105 <p>The following code checks for the version of jQuery used by the inspected
 106 page:
 107
 108 <pre>
 109 chrome.devtools.inspectedWindow.eval(
 110     "jQuery.fn.jquery",
 111      function(result, isException) {
 112        if (isException)
 113          console.log("the page is not using jQuery");
 114        else
 115          console.log("The page is using jQuery v" + result);
 116      }
 117 );
 118 </pre>
 119
 120 <p>
 121 You can find more examples that use Developer Tools APIs in
 122 <a href="samples#search:devtools">Samples</a>.
 123 </p>