- h2Name +

+ Notes

+
h3Name

@@ -320,7 +320,64 @@

+Use the experimental.webInspector.audits module to add new audit +categories and rules to WebInspector's Audit panel. +

+See WebInspector API summary for +general introduction to using WebInspector API. +

+ +

Notes

+ +

+Each audit category is represented by a line on Select audits to run +screen in the Audits panel. The following example adds a category named +Readability:

var category = webInspector.audits.addCategory("Readability", 2);
+

Extension audit category on the launch screen of Audits panel

+If the category's checkbox is checked, the onAuditStarted event of +that category will be fired when user clicks the Run button. +

The event handler in your extension receives AuditResults +as an argument and should add one or more results using addResult() +method. This may be done asynchronously, i.e. after the handler returns. The +run of the category is considered to be complete once the extension adds the +number of results declared when adding the category with +experimental.webInspector.audits.addCategory() or +calls AuditResult's done() method. +

The results may include additional details visualized as an expandable +tree by the Audits panel. You may build the details tree using +createResult() and addChild() methods. The child node +may include specially formatted fragments created by +auditResults.snippet() or auditResults.url(). +

+The following example adds a handler for onAuditStarted event that creates two +audit results and populates one of them with the additional details: + +

category.onAuditStarted.addListener(function(results) {
+  var details = results.createResult("Details...");
+  var styles = details.addChild("2 styles with small font");
+  var elements = details.addChild("3 elements with small font");
+
+  results.addResult("Font Size (5)",
+      "5 elements use font size below 10pt",
+      results.Severity.Severe,
+      details);
+  results.addResult("Contrast",
+                    "Text should stand out from background",
+                    results.Severity.Info);
+});
+

The audit result tree produced by the snippet above will look like this: +

+ +

diff --git a/chrome/common/extensions/docs/experimental.webInspector.html b/chrome/common/extensions/docs/experimental.webInspector.html new file mode 100644 index 0000000..3d6eb67 --- /dev/null +++ b/chrome/common/extensions/docs/experimental.webInspector.html @@ -0,0 +1,585 @@ + + + + + + + + + experimental.webInspector.* APIs - Google Chrome Extensions - Google Code +

+ You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files. +

+ + + + + +

+ Skip to page content + Skip to main navigation +

+ + + + + + + + +

+ + +

Google Chrome Extensions (Labs)

+ Home +
+ Docs +
+ FAQ +
+ Samples +
+ Group +

+ +

Getting Started
Overview
What's New?
Developer's Guide
+
- Browser UI +
  - Browser Actions
  - Context Menus
  - Desktop Notifications
  - Omnibox
  - Options Pages
  - Override Pages
  - Page Actions
  +
- Browser Interaction +
  - Bookmarks
  - Cookies
  - Events
  - History
  - Management
  - Tabs
  - Windows
  +
- Implementation +
  - Accessibility
  - Background Pages
  - Content Scripts
  - Cross-Origin XHR
  - Idle
  - Internationalization
  - Message Passing
  - NPAPI Plugins
  +
- Finishing +
  - Hosting
  - Other Deployment Options
  +
+
Packaged Apps
Tutorials
+
- Debugging
- Google Analytics
- OAuth
+
Reference
+
- Formats +
  - Manifest Files
  - Match Patterns
  +
- Permission Warnings
- chrome.* APIs
- Other APIs
+
Samples

More
+
- Chrome Web Store
- Hosted Apps
- Themes
+

+ + +

experimental.webInspector.* APIs

+ + + + + + + + +

experimental.webInspector.* APIs

+ +

+The following API modules provide support for extending +Chrome Development Tools (aka WebInspector): +

+ + +

+ +

+Caution: +Don't depend on these experimental APIs. They might disappear, and they +will change. +Also, the Chrome Developer Dashboard doesn't allow you to +upload extensions that use experimental APIs. +

+ +

How to use WebInspector APIs

+ +

+ WebInspector APIs are currently experimental, so please start with + the steps for using experimental extension + APIs. +

+ Specify the "devtools_page" field in your extension's manifest and make + sure you have "experimental" permission: +

{
+  "name": ...
+  "version": "1.0",
+  "minimum_chrome_version": "10.0",
+  "devtools_page": "devtools.html",
+  "permissions": [ "experimental" ... ],
+  ...
+}
+

+ 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 experimental.webInspector.panels + API. +
The APIs available to extension pages within the Developer Tools + window include all experimental.webInspector modules + listed above and chrome.extension 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 + content scripts. +
Please note that, unlike other Chrome Extension APIs, the WebInspector + APIs lack "chrome" prefix. This is because the APIs, as the WebInspector + itself, are a part of WebKit and may eventually appear in other browsers. +
+ Give us feedback! + Your comments and suggestions help us improve the APIs and decide which + ones should move from experimental to supported. +

+ +

More information

+ +

+For information on the standard APIs that extensions can use, see +chrome.* APIs and +Other APIs. +

+ + +

+ +

API reference: chrome.apiname

+ + +

+ +

Properties

+ +

getLastError

+ + chrome.extensionlastError +

+ +

+ + +

+ +

Methods

+ + +

+ +

method name

+ +

void + + chrome.module.methodName(, + )

+ +

Undocumented.

+ A description from the json schema def of the function goes here. +

+ + +

Parameters

+ + + +

Returns

+ + + +

Callback function

+ The callback parameter should specify a function + that looks like this: +

+ If you specify the callback parameter, it should + specify a function that looks like this: +

+ + +

function(Type param1, Type param2) {...};

+ +

+ + +

+ This function was added in version . + If you require this function, the manifest key + minimum_chrome_version + can ensure that your extension won't be run in an earlier browser version. +

+ +

+ + +

+ +

Events

+ +

event name

+ +

+ + chrome.bookmarksonEvent.addListener(function(Type param1, Type param2) {...}); +

+ +

Undocumented.

+ A description from the json schema def of the event goes here. +

+ + +

Parameters

+ +

+ + +

+ +

Types

+ + +

+ +

type name

+ +

+ diff --git a/chrome/common/extensions/docs/experimental.webInspector.panels.html b/chrome/common/extensions/docs/experimental.webInspector.panels.html index 29a1295..8ee8763 100644 --- a/chrome/common/extensions/docs/experimental.webInspector.panels.html +++ b/chrome/common/extensions/docs/experimental.webInspector.panels.html @@ -257,10 +257,17 @@

- h2Name +
+ Notes
1. +
2. + h3Name +
+
+ Examples +
1. h3Name
@@ -320,7 +327,52 @@
-
+
+
+Use the experimental.webInspector.panels module to integrate your +extension into Developer Tools window UI: create your own panels, access +existing panels and add sidebars. +
+See WebInspector API summary for +general introduction to using WebInspector API. +
+ +
Notes
+ +
+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 experimental.webInspector API, as well as to +chrome.extension 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 content scripts. +
+ +
Examples
+
The following code adds a panel contained in Panel.html, +represented by FontPicker.png on the Developer Tools toolbar +and labeled as Font Picker:
+ +
```
webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html");
+
```
+
The following code adds a sidebar pane contained in +Sidebar.html and titled Font Properties to the Elements +panel, then sets its height to 8ex: +
```
webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html",
+    function(sidebar) {
+      sidebar.setHeight("8ex");
+    }
+}));
+
```
+
+This screenshot demonstrates the effect the above examples would have on +Developer Tools window: + + +
+ +
diff --git a/chrome/common/extensions/docs/experimental.webInspector.resources.html b/chrome/common/extensions/docs/experimental.webInspector.resources.html index 60036e2..50b031a 100644 --- a/chrome/common/extensions/docs/experimental.webInspector.resources.html +++ b/chrome/common/extensions/docs/experimental.webInspector.resources.html @@ -257,10 +257,17 @@
Contents
1. - h2Name +
2. + Notes
  1. +
  2. + h3Name +
  +
3. + Examples +
  1. h3Name
  @@ -312,7 +319,49 @@
  -
  +
  +
  +Use the experimental.webInspector.resources module to retrieve the +information about network resources displayed by DevTools' Network panel. +
  +See WebInspector API summary for +general introduction to using WebInspector API. +
  + +
  Notes
  + +
  +Network resource information is represented in HTTP Archive format +(HAR). The description of HAR is outside of scope of this document, +please refer to + +HAR v1.2 Specification. +
  +In terms of HAR, the webInspector.resources.getHAR() method +returns entire HAR log, while +webInspector.resources.onFinish event provides HAR entry +as an argument to the event callback. +
  +
  Note that resource content is not provided as part of HAR for efficieny +reasons. You may call resource's getContent() method to retrieve +content. +
  Some resources may be missing in the array of entries returned by +getHAR() in case WebInspector was opened after the page was loaded — +reload the page to get all resources. In general, the list of resources returned +by getHAR() should match that displayed by the Network panel. +
  Examples
  + +
  The following code logs URLs of all images larger than 40KB as they are +loaded:
  + +
  experimental.webInspector.resources.onFinished.addListener(function(resource) { + if (resource.response.bodySize > 40*1024) + webInspector.log("Large image: " + resource.request.url); +}); +
  + + +
  diff --git a/chrome/common/extensions/docs/images/devtools-audits-category.png b/chrome/common/extensions/docs/images/devtools-audits-category.png new file mode 100644 index 0000000..b05fc7d Binary files /dev/null and b/chrome/common/extensions/docs/images/devtools-audits-category.png differ diff --git a/chrome/common/extensions/docs/images/devtools-audits-results.png b/chrome/common/extensions/docs/images/devtools-audits-results.png new file mode 100644 index 0000000..9185055 Binary files /dev/null and b/chrome/common/extensions/docs/images/devtools-audits-results.png differ diff --git a/chrome/common/extensions/docs/images/devtools-panels.png b/chrome/common/extensions/docs/images/devtools-panels.png new file mode 100644 index 0000000..93cbdfa Binary files /dev/null and b/chrome/common/extensions/docs/images/devtools-panels.png differ diff --git a/chrome/common/extensions/docs/js/api_page_generator.js b/chrome/common/extensions/docs/js/api_page_generator.js index c778d0d..b5afc6f 100644 --- a/chrome/common/extensions/docs/js/api_page_generator.js +++ b/chrome/common/extensions/docs/js/api_page_generator.js @@ -1,3 +1,7 @@ +// Copyright (c) 2011 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + /** * @fileoverview This file is the controller for generating extension * doc pages. @@ -20,7 +24,7 @@ var SCHEMA = "../api/extension_api.json"; var DEVTOOLS_SCHEMA = WEBKIT_PATH + "/Source/WebCore/inspector/front-end/ExtensionAPISchema.json"; var USE_DEVTOOLS_SCHEMA = - /\.webInspector\.[^/]*\.html/.test(location.pathname); + /\.webInspector[^/]*\.html/.test(location.pathname); var API_MODULE_PREFIX = USE_DEVTOOLS_SCHEMA ? "" : "chrome."; var SAMPLES = "samples.json"; var REQUEST_TIMEOUT = 2000; @@ -343,6 +347,14 @@ function experimentalAPIs() { }).sort(); } +function webInspectorAPIs() { + return schema.filter(function(module) { + return !module.nodoc && module.namespace.indexOf("webInspector.") !== 0; + }).map(function(module) { + return module.namespace; + }).sort(); +} + function getDataFromPageHTML(id) { var node = document.getElementById(id); if (!node) diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.audits.html b/chrome/common/extensions/docs/static/experimental.webInspector.audits.html new file mode 100644 index 0000000..edd46f1f --- /dev/null +++ b/chrome/common/extensions/docs/static/experimental.webInspector.audits.html @@ -0,0 +1,65 @@ + +
  +Use the experimental.webInspector.audits module to add new audit +categories and rules to WebInspector's Audit panel. +
  +See WebInspector API summary for +general introduction to using WebInspector API. +
  + +
  Notes
  + +
  +Each audit category is represented by a line on Select audits to run +screen in the Audits panel. The following example adds a category named +Readability:
  +
  +var category = webInspector.audits.addCategory("Readability", 2); +
  + +
  +If the category's checkbox is checked, the onAuditStarted event of +that category will be fired when user clicks the Run button. +
  +
  The event handler in your extension receives AuditResults +as an argument and should add one or more results using addResult() +method. This may be done asynchronously, i.e. after the handler returns. The +run of the category is considered to be complete once the extension adds the +number of results declared when adding the category with +experimental.webInspector.audits.addCategory() or +calls AuditResult's done() method. +
  +
  The results may include additional details visualized as an expandable +tree by the Audits panel. You may build the details tree using +createResult() and addChild() methods. The child node +may include specially formatted fragments created by +auditResults.snippet() or auditResults.url(). +
  +The following example adds a handler for onAuditStarted event that creates two +audit results and populates one of them with the additional details: + +
  +category.onAuditStarted.addListener(function(results) { + var details = results.createResult("Details..."); + var styles = details.addChild("2 styles with small font"); + var elements = details.addChild("3 elements with small font"); + + results.addResult("Font Size (5)", + "5 elements use font size below 10pt", + results.Severity.Severe, + details); + results.addResult("Contrast", + "Text should stand out from background", + results.Severity.Info); +}); +
  +
  The audit result tree produced by the snippet above will look like this: +
  + + diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.html b/chrome/common/extensions/docs/static/experimental.webInspector.html new file mode 100644 index 0000000..cd34927 --- /dev/null +++ b/chrome/common/extensions/docs/static/experimental.webInspector.html @@ -0,0 +1,77 @@ +
  experimental.webInspector.* APIs
  + +
  +The following API modules provide support for extending +Chrome Development Tools (aka WebInspector): +
  + + +
  +
  +
  +
  + +
  +Caution: +Don't depend on these experimental APIs. They might disappear, and they +will change. +Also, the Chrome Developer Dashboard doesn't allow you to +upload extensions that use experimental APIs. +
  + +
  How to use WebInspector APIs
  + +
  +
  + WebInspector APIs are currently experimental, so please start with + the steps for using experimental extension + APIs. +
  +
  + Specify the "devtools_page" field in your extension's manifest and make + sure you have "experimental" permission: +
  +{ + "name": ... + "version": "1.0", + "minimum_chrome_version": "10.0", + "devtools_page": "devtools.html", + "permissions": [ "experimental" ... ], + ... +} +
  +
  +
  + 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 experimental.webInspector.panels + API. +
  +
  The APIs available to extension pages within the Developer Tools + window include all experimental.webInspector modules + listed above and chrome.extension 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 + content scripts. +
  Please note that, unlike other Chrome Extension APIs, the WebInspector + APIs lack "chrome" prefix. This is because the APIs, as the WebInspector + itself, are a part of WebKit and may eventually appear in other browsers. +
  +
  + Give us feedback! + Your comments and suggestions help us improve the APIs and decide which + ones should move from experimental to supported. +
  +
  + +
  More information
  + +
  +For information on the standard APIs that extensions can use, see +chrome.* APIs and +Other APIs. +
  diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.panels.html b/chrome/common/extensions/docs/static/experimental.webInspector.panels.html new file mode 100644 index 0000000..9c719eb --- /dev/null +++ b/chrome/common/extensions/docs/static/experimental.webInspector.panels.html @@ -0,0 +1,50 @@ + +
  +Use the experimental.webInspector.panels module to integrate your +extension into Developer Tools window UI: create your own panels, access +existing panels and add sidebars. +
  +See WebInspector API summary for +general introduction to using WebInspector API. +
  + +
  Notes
  + +
  +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 experimental.webInspector API, as well as to +chrome.extension 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 content scripts. +
  + +
  Examples
  +
  The following code adds a panel contained in Panel.html, +represented by FontPicker.png on the Developer Tools toolbar +and labeled as Font Picker:
  + +
  +webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html"); +
  +
  The following code adds a sidebar pane contained in +Sidebar.html and titled Font Properties to the Elements +panel, then sets its height to 8ex: +
  +webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html", + function(sidebar) { + sidebar.setHeight("8ex"); + } +})); +
  +
  +This screenshot demonstrates the effect the above examples would have on +Developer Tools window: + + +
  + diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.resources.html b/chrome/common/extensions/docs/static/experimental.webInspector.resources.html new file mode 100644 index 0000000..1d88718 --- /dev/null +++ b/chrome/common/extensions/docs/static/experimental.webInspector.resources.html @@ -0,0 +1,44 @@ + +
  +Use the experimental.webInspector.resources module to retrieve the +information about network resources displayed by DevTools' Network panel. +
  +See WebInspector API summary for +general introduction to using WebInspector API. +
  + +
  Notes
  + +
  +Network resource information is represented in HTTP Archive format +(HAR). The description of HAR is outside of scope of this document, +please refer to + +HAR v1.2 Specification. +
  +In terms of HAR, the webInspector.resources.getHAR() method +returns entire HAR log, while +webInspector.resources.onFinish event provides HAR entry +as an argument to the event callback. +
  +
  Note that resource content is not provided as part of HAR for efficieny +reasons. You may call resource's getContent() method to retrieve +content. +
  Some resources may be missing in the array of entries returned by +getHAR() in case WebInspector was opened after the page was loaded — +reload the page to get all resources. In general, the list of resources returned +by getHAR() should match that displayed by the Network panel. +
  Examples
  + +
  The following code logs URLs of all images larger than 40KB as they are +loaded:
  + +
  +experimental.webInspector.resources.onFinished.addListener(function(resource) { + if (resource.response.bodySize > 40*1024) + webInspector.log("Large image: " + resource.request.url); +}); +
  + + -- cgit v1.1

Contents

Notes

Parameters

Google Chrome Extensions (Labs)

Developer's Guide

Packaged Apps

Tutorials

Reference

Samples

More

experimental.webInspector.* APIs

Contents

How to use WebInspector APIs

More information

API reference: chrome.apiname

Properties

getLastError

Methods

method name

Parameters

Returns

Callback function

Events

event name

Parameters

Types

type name

Contents

Notes

Examples

Contents

Notes

Examples

Notes

How to use WebInspector APIs

More information

Notes

Examples

Notes

Examples