New developer tools experimental APIs for Chrome extensions

Monday, October 03, 2011

Labels: ,

Are you already a happy user of Chrome Developer Tools but always wanted that particular feature added to make you even more productive? Then we have some exciting news for you: our developer tools are now extensible!

You can now add new panels and sidebar section panes, retrieve network requests data, evaluate scripts on the page being inspected, and add custom audit rules.



The extension support is still experimental, but we wanted to let you know early, so we can incorporate your feedback before releasing the APIs.

Here’s how to get started with writing extensions for Chrome Developer Tools:

  • Use the dev channel of Chrome as the APIs are still under development;
  • Enable experimental extension APIs using the chrome://flags page;
  • List experimental in the permissions list of your extension;
  • Add a devtools_page field to your extension’s manifest, e.g:
{
"name": ...
"minimum_chrome_version": "14.0",
"devtools_page": "devtools.html",
"permissions": [ "experimental" ... ],
...
}

The developer tools extension pages get access to the chrome.experimental.devtools.* APIs which are described further in our docs. Be sure to check out the sample extensions, which include extensions for jQuery and FirePHP users and a simple audit extension that finds broken links.

For a richer example, you can also check out Page Speed for Chromium, which uses the extensions API to provide Page Speed suggestions right in the Chrome Devtools UI.

We’re looking forward to seeing your feedback on the APIs and, of course, cool extensions coming to life!

Post a Comment