diff options
Diffstat (limited to 'chrome/common/extensions/docs/static')
8 files changed, 250 insertions, 293 deletions
diff --git a/chrome/common/extensions/docs/static/devguide.html b/chrome/common/extensions/docs/static/devguide.html index c2e2c9f..17f79ee 100644 --- a/chrome/common/extensions/docs/static/devguide.html +++ b/chrome/common/extensions/docs/static/devguide.html @@ -60,6 +60,10 @@ applies to packaged apps, as well as extensions. <td> Explore and modify the browser's cookie system </td> </tr> <tr> + <td> <a href="devtools.html">Developer Tools</a> </td> + <td> Add features to Chrome Developer Tools </td> + </tr> + <tr> <td> <a href="events.html">Events</a> </td> <td> Detect when something interesting happens </td> </tr> diff --git a/chrome/common/extensions/docs/static/devtools.inspectedWindow.html b/chrome/common/extensions/docs/static/devtools.inspectedWindow.html new file mode 100644 index 0000000..b6267fc --- /dev/null +++ b/chrome/common/extensions/docs/static/devtools.inspectedWindow.html @@ -0,0 +1,100 @@ +<div id="pageData-name" class="pageData" +>chrome.devtools.inspectedWindow.* APIs</div> + +<p> +Use <code>chrome.devtools.inspectedWindow</code> +to interact with the inspected window: +obtain the tab ID for the inspected page, +evaluate the code in the context of inspected window, +reload the page, +or obtain the list of resources within the page. +</p><p> +See <a href="devtools.html">DevTools APIs summary</a> for +general introduction to using Developer Tools APIs. +</p> + +<h2>Overview</h2> +<p> +The <a href="#property-tabId"><code>tabId</code></a> property +provides the tab identifier that you can use with the +<a href="tabs.html"><code>chrome.tabs.*</code></a> API calls. +However, please note that <code>chrome.tabs.*</code> API is not +exposed to the Developer Tools extension pages due to security considerations +— you will need to pass the tab ID to the background page and invoke +the <code>chrome.tabs.*</code> API functions from there. +</p> +<p> +The <code>eval()</code> method provides the ability for extensions to execute +JavaScript code in the context of the main frame of the inspected page. +This method is powerful when used in the right context +and dangerous when used inappropriately. +Use the <code>chrome.tabs.executeScript()</code> method +unless you need the specific functionality +that the <code>eval()</code> method provides. +</p> +<p>Here are the main differences between the +<code>eval()</code> and <code>chrome.tabs.executeScript()</code> methods: +</p><ul> +<li>The <code>eval()</code> method does not +use an isolated world for the code being evaluated, so the JavaScript state +of the inspected window is accessible to the code. +Use this method when access to the JavaScript state of the inspected page +is required. +</li><li> +The execution context of the code being evaluated includes the +<a href="http://code.google.com/chrome/devtools/docs/console.html">Developer +Tools console API</a>. +For example, +the code can use <code>inspect()</code> and <code>$0</code>. +</li><li> +The evaluated code may return a value that is passed to the extension callback. +The returned value has to be a valid JSON object (it may contain only +primitive JavaScript types and acyclic references to other JSON +objects). + +<em>Please observe extra care while processing the data received from the +inspected page — the execution context is essentially controlled by the +inspected page; a malicious page may affect the data being returned to the +extension.</em> +</li></ul> +<p class="caution"> +<strong>Important:</strong> +Due to the security considerations explained above, the +<a href="tabs.html#method-executeScript"><code +>chrome.tabs.executeScript()</code></a> method is the preferred way for an +extension to access DOM data of the inspected page in cases where the access to +JavaScript state of the inspected page is not required.</em> +</p><p> +The <code>reload()</code> method may be used to reload the inspected page. +Additionally, the caller can specify an override for the user agent string, +a script that will be injected early upon page load, and an option to force +reload of cached resources. +</p><p> +Use the <code>getResources()</code> call and the <code>onResourceContent</code> +event to obtain the list of resources (documents, stylesheets, scripts, images +etc) within the inspected page. The <code>getContent()</code> and <code +>setContent()</code> methods of the <code>Resource</code> class along with the +<code>onResourceContentCommitted</code> event may be used to support +modification of the resource content, for example, by an external editor. +</p> + +<h2 id="overview-examples">Examples</h2> +<p>The following code checks for the version of jQuery used by the inspected +page: + +<pre> +chrome.devtools.inspectedWindow.eval( + "jQuery.fn.jquery", + function(result, isException) { + if (isException) + console.log("the page is not using jQuery"); + else + console.log("The page is using jQuery v" + result); + } +); +</pre> + +<p> +You can find more examples that use Developer Tools APIs in +<a href="samples.html#devtools">Samples</a>. +</p> diff --git a/chrome/common/extensions/docs/static/devtools.network.html b/chrome/common/extensions/docs/static/devtools.network.html new file mode 100644 index 0000000..d05ab4b --- /dev/null +++ b/chrome/common/extensions/docs/static/devtools.network.html @@ -0,0 +1,58 @@ +<!-- BEGIN AUTHORED CONTENT --> +<div id="pageData-name" class="pageData">chrome.devtools.network +API</div> +<p id="classSummary"> +Use the <code>chrome.devtools.network</code> module to retrieve +the information about network requests displayed by the Developer Tools +in the Network panel. +</p><p> +See <a href="devtools.html">DevTools APIs summary</a> for +general introduction to using Developer Tools APIs</a>. +</p> + +<h2>Overview</h2> + +<p> +Network requests information is represented in the HTTP Archive format +(<em>HAR</em>). The description of HAR is outside of scope of this document, +please refer to <a href= +"http://www.softwareishard.com/blog/har-12-spec/"> +HAR v1.2 Specification</a>. +</p><p> +In terms of HAR, the +<code>chrome.devtools.network.getHAR()</code> method returns +entire <em>HAR log</em>, while +<code>chrome.devtools.network.onRequestFinished</code> event +provides <em>HAR entry</em> as an argument to the event callback. +</p> +<p>Note that request content is not provided as part of HAR for efficieny +reasons. You may call request's <code>getContent()</code> method to retrieve +content. +<p>If the Developer Tools window is opened after the page is loaded, +some requests may be missing +in the array of entries returned by <code>getHAR()</code>. +Reload the page to get all requests. +In general, the list of +requests returned by <code>getHAR()</code> should match that displayed in +the Network panel. +<h2 id="overview-examples">Examples</h2> + +<p>The following code logs URLs of all images larger than 40KB as they are +loaded:</p> + +<pre> +chrome.devtools.network.onRequestFinished.addListener( + function(request) { + if (request.response.bodySize > 40*1024) + chrome.experimental.devtools.console.addMessage( + chrome.experimental.devtools.console.Severity.Warning, + "Large image: " + request.request.url); +}); +</pre> + +<p> +You can find more examples that use this API in +<a href="samples.html#devtools.network">Samples</a>. +</p> + +<!-- END AUTHORED CONTENT --> diff --git a/chrome/common/extensions/docs/static/devtools.panels.html b/chrome/common/extensions/docs/static/devtools.panels.html new file mode 100644 index 0000000..3a0d773 --- /dev/null +++ b/chrome/common/extensions/docs/static/devtools.panels.html @@ -0,0 +1,66 @@ +<!-- BEGIN AUTHORED CONTENT --> +<p id="classSummary"> +Use the <code>chrome.devtools.panels</code> module to integrate +your extension into Developer Tools window UI: create your own panels, access +existing panels, and add sidebars. +</p><p> +See <a href="devtools.html">DevTools APIs summary</a> for +general introduction to using Developer Tools APIs. +</p> + +<h2>Overview</h2> + +<p> +Each extension panel and sidebar is displayed as a separate HTML page. All +extension pages displayed in the Developer Tools window have access to all +modules in <code>chrome.devtools</code> API, as well as to +<a href="extension.html">chrome.extension</a> API. Other extension APIs are not +available to the pages within Developer Tools window, but you may invoke them +by sending a request to the background page of your extension, similarly to how +it's done in the <a href="overview.html#contentScripts">content scripts</a>. +</p><p> +You can use the <code><a href="#method-setOpenResourceHandler" +>setOpenResourceHandler()</a></code> method to install a +callback function that handles user requests to open a resource (typically, +a click on a resource link in the Developer Tools window). At most one of the +installed handlers gets called; users can specify (using the Developer Tools +Settings dialog) either the default behavior or an extension to handle resource +open requests. If an extension calls <code>setOpenResourceHandler()</code> +multiple times, only the last handler is retained. +</p> +<h2 id="overview-examples">Examples</h2> +<p>The following code adds a panel contained in <code>Panel.html</code>, +represented by <code>FontPicker.png</code> on the Developer Tools toolbar +and labeled as <em>Font Picker</em>:</p> + +<pre> +chrome.devtools.panels.create("Font Picker", + "FontPicker.png", + "Panel.html" + function(panel) { ... }); +</pre> +<p>The following code adds a sidebar pane contained in +<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements +panel, then sets its height to <code>8ex</code>: +<pre> +chrome.devtools.panels.elements.createSidebarPane("Font Properties", + function(sidebar) { + sidebar.setPage("Sidebar.html"); + sidebar.setHeight("8ex"); + }); +</pre> +<p> +This screenshot demonstrates the effect the above examples would have on +Developer Tools window: + +<img src="images/devtools-panels.png" + style="margin-left: 20px" + width="686" height="289" + alt="Extension icon panel on DevTools toolbar" /> +</p> + +<p> +You can find examples that use this API in +<a href="samples.html#Chrome Query">Samples</a>. +</p> +<!-- END AUTHORED CONTENT --> diff --git a/chrome/common/extensions/docs/static/experimental.devtools.html b/chrome/common/extensions/docs/static/experimental.devtools.html index 16e1677..cfeb4d5 100644 --- a/chrome/common/extensions/docs/static/experimental.devtools.html +++ b/chrome/common/extensions/docs/static/experimental.devtools.html @@ -1,87 +1,9 @@ <div id="pageData-name" class="pageData">chrome.experimental.devtools.* APIs</div> <p> -The following API modules provide support for extending -Chrome Developer Tools: -</p> - -<a name="api-list"></a> -<ul> - <li jsselect="devtoolsAPIs();"> - <a jsvalues=".href: $this + '.html'" jscontent="$this"></a></li> -</ul> - -<p class="warning"> -<b>Caution:</b> -Don't depend on these experimental APIs. They might disappear, and they -<em>will</em> change. -Also, the Chrome Developer Dashboard doesn't allow you to -upload extensions that use experimental APIs. -</p> - -<h2 id="using">How to use DevTools APIs</h2> - -<ol> - <li> - Developer Tools APIs are currently experimental, so please start with - <a href="experimental.html">the steps for using experimental extension - APIs</a>. - </li> - <li> - Specify the "devtools_page" field in your extension's manifest and make - sure you have "experimental" permission: -<pre> -{ - "name": ... - "version": "1.0", - "minimum_chrome_version": "10.0", - <b>"devtools_page": "devtools.html"</b>, - "permissions": [ <b>"experimental"</b> ... ], - ... -} -</pre> - </li> - <li> - An instance of the devtools_page specified in your extension's manifest - will be created for every Developer Tools window opened. The page may add - other extension pages as panels and sidebars to the Developer Tools window - using <a href="experimental.devtools.panels.html" - >experimental.devtools.panels</a> - API. - </li> - <li> - The chrome.experimental.devtools.* API modules are available only to the - pages loaded within the Developer Tools window. Content scripts and other - extension pages do not have these APIs. Thus, the APIs are available only - through the lifetime of the Developer Tools window. - </li> - <li>The APIs available to extension pages within the Developer Tools - window include all <a href="#api-list">experimental.devtools modules - listed above</a> and <a href="extension.html">chrome.extension</a> API. - Other extension APIs are not available to the Developer Tools pages, but - you may invoke them by sending a request to the background page of your - extension, similarly to how it's done in the - <a href="overview.html#contentScripts">content scripts</a>. - <li> - <a href="http://groups.google.com/group/google-chrome-developer-tools/topics" - >Give us feedback!</a> - Your comments and suggestions help us improve the APIs and decide which - ones should move from experimental to supported. - </li> -</ol> - -<h2 id="other">More information</h2> - -<p> -For information on the standard APIs that extensions can use, see -<a href="api_index.html">chrome.* APIs</a> and -<a href="api_other.html">Other APIs</a>. -</p> - -<h2 id="examples">Examples</h2> - -<p> -You can find examples that use Developer Tools APIs in -<a href="samples.html#devtools">Samples</a>. +Some of the Developer Tools APIs are no longer experimental. Please see <a +href="devtools.html">chrome.devtools.* APIs</a> for the guidelines on how to use +these. For the list of Developer Tools APIs that are still experimental, +please refer to <a href="experimental.html">chrome.experimental.* APIs</a>. </p> diff --git a/chrome/common/extensions/docs/static/experimental.devtools.inspectedWindow.html b/chrome/common/extensions/docs/static/experimental.devtools.inspectedWindow.html index aaf6f8e..f61f623 100644 --- a/chrome/common/extensions/docs/static/experimental.devtools.inspectedWindow.html +++ b/chrome/common/extensions/docs/static/experimental.devtools.inspectedWindow.html @@ -1,100 +1,11 @@ <div id="pageData-name" class="pageData" ->chrome.experimental.devtools.inspectedWindow.* APIs</div> +>experimental.devtools.inspectedWindow</div> <p> -Use <code>chrome.experimental.devtools.inspectedWindow</code> -to interact with the inspected window: -obtain the tab ID for the inspected page, -evaluate the code in the context of inspected window, -reload the page, -or obtain the list of resources within the page. -</p><p> -See <a href="experimental.devtools.html">DevTools APIs summary</a> for -general introduction to using Developer Tools APIs. +The <code>devtools.inspectedWindow</code> API is no longer experimental; +it's supported! You can read all about it at its new home: </p> -<h2>Overview</h2> -<p> -The <a href="#property-tabId"><code>tabId</code></a> property -provides the tab identifier that you can use with the -<a href="tabs.html"><code>chrome.tabs.*</code></a> API calls. -However, please note that <code>chrome.tabs.*</code> API is not -exposed to the Developer Tools extension pages due to security considerations -— you will need to pass the tab ID to the background page and invoke -the <code>chrome.tabs.*</code> API functions from there. -</p> -<p> -The <code>eval()</code> method provides the ability for extensions to execute -JavaScript code in the context of the main frame of the inspected page. -This method is powerful when used in the right context -and dangerous when used inappropriately. -Use the <code>chrome.tabs.executeScript()</code> method -unless you need the specific functionality -that the <code>eval()</code> method provides. -</p> -<p>Here are the main differences between the -<code>eval()</code> and <code>chrome.tabs.executeScript()</code> methods: -</p><ul> -<li>The <code>eval()</code> method does not -use an isolated world for the code being evaluated, so the JavaScript state -of the inspected window is accessible to the code. -Use this method when access to the JavaScript state of the inspected page -is required. -</li><li> -The execution context of the code being evaluated includes the -<a href="http://code.google.com/chrome/devtools/docs/console.html">Developer -Tools console API</a>. -For example, -the code can use <code>inspect()</code> and <code>$0</code>. -</li><li> -The evaluated code may return a value that is passed to the extension callback. -The returned value has to be a valid JSON object (it may contain only -primitive JavaScript types and acyclic references to other JSON -objects). - -<em>Please observe extra care while processing the data received from the -inspected page — the execution context is essentially controlled by the -inspected page; a malicious page may affect the data being returned to the -extension.</em> -</li></ul> -<p class="caution"> -<strong>Important:</strong> -Due to the security considerations explained above, the -<a href="tabs.html#method-executeScript"><code ->chrome.tabs.executeScript()</code></a> method is the preferred way for an -extension to access DOM data of the inspected page in cases where the access to -JavaScript state of the inspected page is not required.</em> -</p><p> -The <code>reload()</code> method may be used to reload the inspected page. -Additionally, the caller can specify an override for the user agent string, -a script that will be injected early upon page load, and an option to force -reload of cached resources. -</p><p> -Use the <code>getResources()</code> call and the <code>onResourceContent</code> -event to obtain the list of resources (documents, stylesheets, scripts, images -etc) within the inspected page. The <code>getContent()</code> and <code ->setContent()</code> methods of the <code>Resource</code> class along with the -<code>onResourceContentCommitted</code> event may be used to support -modification of the resource content, for example, by an external editor. -</p> - -<h2 id="overview-examples">Examples</h2> -<p>The following code checks for the version of jQuery used by the inspected -page: - -<pre> -chrome.experimental.devtools.inspectedWindow.eval( - "jQuery.fn.jquery", - function(result, isException) { - if (isException) - console.log("the page is not using jQuery"); - else - console.log("The page is using jQuery v" + result); - } -); -</pre> - -<p> -You can find more examples that use Developer Tools APIs in -<a href="samples.html#devtools">Samples</a>. -</p> +<blockquote> +<a href="devtools.inspectedWindow.html">chrome.devtools.inspectedWindow</a> +</blockquote> diff --git a/chrome/common/extensions/docs/static/experimental.devtools.network.html b/chrome/common/extensions/docs/static/experimental.devtools.network.html index ca9a24e..5683dd0 100644 --- a/chrome/common/extensions/docs/static/experimental.devtools.network.html +++ b/chrome/common/extensions/docs/static/experimental.devtools.network.html @@ -1,58 +1,10 @@ -<!-- BEGIN AUTHORED CONTENT --> -<div id="pageData-name" class="pageData">chrome.experimental.devtools.network -API</div> -<p id="classSummary"> -Use the <code>chrome.experimental.devtools.network</code> module to retrieve -the information about network requests displayed by the Developer Tools -in the Network panel. -</p><p> -See <a href="experimental.devtools.html">DevTools APIs summary</a> for -general introduction to using Developer Tools APIs</a>. -</p> - -<h2>Overview</h2> - -<p> -Network requests information is represented in the HTTP Archive format -(<em>HAR</em>). The description of HAR is outside of scope of this document, -please refer to <a href= -"http://groups.google.com/group/http-archive-specification/web/har-1-2-spec"> -HAR v1.2 Specification</a>. -</p><p> -In terms of HAR, the -<code>chrome.experimental.devtools.network.getHAR()</code> method returns -entire <em>HAR log</em>, while -<code>chrome.experimental.devtools.network.onRequestFinished</code> event -provides <em>HAR entry</em> as an argument to the event callback. -</p> -<p>Note that request content is not provided as part of HAR for efficieny -reasons. You may call request's <code>getContent()</code> method to retrieve -content. -<p>If the Developer Tools window is opened after the page is loaded, -some requests may be missing -in the array of entries returned by <code>getHAR()</code>. -Reload the page to get all requests. -In general, the list of -requests returned by <code>getHAR()</code> should match that displayed in -the Network panel. -<h2 id="overview-examples">Examples</h2> - -<p>The following code logs URLs of all images larger than 40KB as they are -loaded:</p> - -<pre> -chrome.experimental.devtools.network.onRequestFinished.addListener( - function(request) { - if (request.response.bodySize > 40*1024) - chrome.experimental.devtools.console.addMessage( - chrome.experimental.devtools.console.Severity.Warning, - "Large image: " + request.request.url); -}); -</pre> +<div id="pageData-name" class="pageData">experimental.devtools.network</div> <p> -You can find more examples that use this API in -<a href="samples.html#devtools.network">Samples</a>. +The <code>devtools.network</code> API is no longer experimental; +it's supported! You can read all about it at its new home: </p> -<!-- END AUTHORED CONTENT --> +<blockquote> +<a href="devtools.network.html">chrome.devtools.network</a> +</blockquote> diff --git a/chrome/common/extensions/docs/static/experimental.devtools.panels.html b/chrome/common/extensions/docs/static/experimental.devtools.panels.html index 263f754..582afd6 100644 --- a/chrome/common/extensions/docs/static/experimental.devtools.panels.html +++ b/chrome/common/extensions/docs/static/experimental.devtools.panels.html @@ -1,66 +1,10 @@ -<!-- BEGIN AUTHORED CONTENT --> -<p id="classSummary"> -Use the <code>chrome.experimental.devtools.panels</code> module to integrate -your extension into Developer Tools window UI: create your own panels, access -existing panels, and add sidebars. -</p><p> -See <a href="experimental.devtools.html">DevTools APIs summary</a> for -general introduction to using Developer Tools APIs. -</p> - -<h2>Notes</h2> - -<p> -Each extension panel and sidebar is displayed as a separate HTML page. All -extension pages displayed in the Developer Tools window have access to all -modules in <code>chrome.experimental.devtools</code> API, as well as to -<a href="extension.html">chrome.extension</a> API. Other extension APIs are not -available to the pages within Developer Tools window, but you may invoke them -by sending a request to the background page of your extension, similarly to how -it's done in the <a href="overview.html#contentScripts">content scripts</a>. -</p><p> -You can use the <code><a href="#method-setOpenResourceHandler" ->setOpenResourceHandler()</a></code> method to install a -callback function that handles user requests to open a resource (typically, -a click on a resource link in the Developer Tools window). At most one of the -installed handlers gets called; users can specify (using the Developer Tools -Settings dialog) either the default behavior or an extension to handle resource -open requests. If an extension calls <code>setOpenResourceHandler()</code> -multiple times, only the last handler is retained. -</p> -<h2 id="overview-examples">Examples</h2> -<p>The following code adds a panel contained in <code>Panel.html</code>, -represented by <code>FontPicker.png</code> on the Developer Tools toolbar -and labeled as <em>Font Picker</em>:</p> +<div id="pageData-name" class="pageData">experimental.devtools.panels</div> -<pre> -chrome.experimental.devtools.panels.create("Font Picker", - "FontPicker.png", - "Panel.html" - function(panel) { ... }); -</pre> -<p>The following code adds a sidebar pane contained in -<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements -panel, then sets its height to <code>8ex</code>: -<pre> -chrome.experimental.devtools.panels.elements.createSidebarPane("Font Properties", - function(sidebar) { - sidebar.setPage("Sidebar.html"); - sidebar.setHeight("8ex"); - }); -</pre> <p> -This screenshot demonstrates the effect the above examples would have on -Developer Tools window: - -<img src="images/devtools-panels.png" - style="margin-left: 20px" - width="686" height="289" - alt="Extension icon panel on DevTools toolbar" /> +The <code>devtools.panels</code> API is no longer experimental; +it's supported! You can read all about it at its new home: </p> -<p> -You can find examples that use this API in -<a href="samples.html#Chrome Query">Samples</a>. -</p> -<!-- END AUTHORED CONTENT --> +<blockquote> +<a href="devtools.panels.html">chrome.devtools.panels</a> +</blockquote> |