I'm a big fan of the Chrome Extension API. It is a simple (and cool) way to extend my favorite browser using HTML and JavaScript. One of the features I've been excited about for a while now is the DevTools API. This has been in "experimental" status for a while but is now (mostly) available in the main release.
The DevTools API allows you to integrate extensions directly into your DevTools. There are multiple samples of this API. But there aren't any samples that detail how to create panels. There is documentation for creating panels, but it wasn't clear how to use that API in a real extension. I dug at it for a while and finally figured it out. What follows is what I had to do to make panel creation work. It may not be the right way, but it worked.
First, you must set a devtools_page value in your manifest.json. Here is my sample manifest.
The critical part here is devtools_page. You specify a HTML file that will be executed every time the devtools UI is opened. Here is my HTML file:
Not much, right? As far as I can tell, the actual HTML for this file is never going to be rendered - anywhere. Instead, the entire point of this file is to load a JavaScript script. If so, it would be nice if Google would let us simply point devtools_page to a JavaScript script instead. Now let's look at the script.
The main part of this script - for now - is just one line. It runs the panels.create API to define a new panel. The first argument is the title. The second is the icon. The third is the HTML file for the panel. Finally, the last argument is a callback to execute when the panel is created. There is no documentation on what size the icon should be. It seems to be 32x32.
Now let's look at panel.html. I've only just begun development so for right now it is pretty simple.
And last but not least, the JavaScript file loaded by the panel:
And that's it. Here is my panel running in the Developer Tools UI:
So - what about all those console messages? As I tried to get things working, I used console messages all over the place so I could - hopefully - see what was going on. I had very little luck with this. I've blogged before about how to use console with Chrome Extensions, but that tip only works when you have a background script. My test extension did not. What finally worked was this:
- Click the button that detaches Chrome Dev Tools
- With the Chrome Dev Tools in its own window and currently focused, use the keyboard combo to open Chrome Dev Tools
This opens a second Chrome Dev Tools and I could see all my log messages there.
I hope this helps. As I said, I just got this working so I probably have a lot more to learn.
Archived Comments
Superb tutorial! I am so pleased to know that informative on site optimization. It helps me being so good as well. Keep it up! :)
Code snippets aren't showing :(
After hitting back from submitting above comment, snippets now show.
I used hosted Gists for a while - now I don't. :)
Hi Raymond,
is there a way of adding a panel to the browser. i want a panel to be shown on the along with the current webpage, when clicked on the extension icon on the toolbar
Not as far as I know. I'd suggest looking at the docs for Chrome extensions in general though.
Thanks for the prompt response Raymond..Will keep looking and get back if i get a solution
Thanks Raymond. Also i would like to add DevTool pannel for CSS path capturing like Webscraper. Any idea where i need to make DOMs & where i need to write it's JS?
Sorry - I haven't used this particular stuff in years. Best I can suggest is starting w/ Chrome's documentation on devtools authoring.
How to add Jquery Support?
Include it with your extension. That way it works if you are offline.
okay... i have to count all the
tags in current Page. I have to show the count in the DevTool...? How can I link them? Do you have any idea?
That's quite a bit. :) Once you have access to the DOM, you could try to use jQuery to count the tags by getting the raw HTML. Basically I'd start by reading the docs a bit more. The Chrome Extension docs I mean. Once you get access tot he DOM, then you can take care of the rest. It's no longer a Chrome ext issue, but a DOM issue.
If you can, Plz send me the link...
A link to...?
Link for sample code :)
I honestly don't know what ever became of it. I know I never wrapped this particular example. Sorry.
:D
Just kidding...! :D
Thanks man... You just ignited my interest in chrome DevTools...
Hi Raymond,
I know this is an old post but did you ever need to search the content of your custom panel. I can hook up the panel.onSearch.addListener but I can't work out how to tell Chrome the number of hits the search returned. Without that response the Next and Prev buttons in search are disabled.
Thanks.
Sorry - I haven't built a Chrome extension in *years*.