How to add a panel to Chrome Dev Tools

This post is more than 2 years old.

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:

  1. Click the button that detaches Chrome Dev Tools
  2. 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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dany Rudder posted on 8/8/2012 at 5:53 PM

Superb tutorial! I am so pleased to know that informative on site optimization. It helps me being so good as well. Keep it up! :)

Comment 2 by john snow posted on 2/12/2014 at 6:38 AM

Code snippets aren't showing :(

Comment 3 by john snow posted on 2/12/2014 at 6:39 AM

After hitting back from submitting above comment, snippets now show.

Comment 4 by Raymond Camden posted on 2/12/2014 at 6:40 AM

I used hosted Gists for a while - now I don't. :)

Comment 5 by sachchit posted on 5/29/2014 at 10:59 PM

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

Comment 6 by Raymond Camden posted on 5/29/2014 at 11:02 PM

Not as far as I know. I'd suggest looking at the docs for Chrome extensions in general though.

Comment 7 by sachchit posted on 5/29/2014 at 11:10 PM

Thanks for the prompt response Raymond..Will keep looking and get back if i get a solution

Comment 8 by mathai posted on 4/21/2016 at 9:32 AM

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?

Comment 9 (In reply to #8) by Raymond Camden posted on 4/21/2016 at 12:13 PM

Sorry - I haven't used this particular stuff in years. Best I can suggest is starting w/ Chrome's documentation on devtools authoring.

Comment 10 by blacmoon posted on 6/21/2016 at 12:50 PM

How to add Jquery Support?

Comment 11 (In reply to #10) by Raymond Camden posted on 6/21/2016 at 1:16 PM

Include it with your extension. That way it works if you are offline.

Comment 12 (In reply to #11) by blacmoon posted on 6/23/2016 at 5:47 AM

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?

Comment 13 (In reply to #12) by Raymond Camden posted on 6/23/2016 at 1:10 PM

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.

Comment 14 (In reply to #13) by blacmoon posted on 6/28/2016 at 7:29 AM

If you can, Plz send me the link...

Comment 15 (In reply to #14) by Raymond Camden posted on 6/28/2016 at 12:26 PM

A link to...?

Comment 16 (In reply to #15) by blacmoon posted on 6/28/2016 at 2:13 PM

Link for sample code :)

Comment 17 (In reply to #16) by Raymond Camden posted on 6/28/2016 at 11:20 PM

I honestly don't know what ever became of it. I know I never wrapped this particular example. Sorry.

Comment 18 (In reply to #17) by blacmoon posted on 6/29/2016 at 5:31 AM

:D
Just kidding...! :D
Thanks man... You just ignited my interest in chrome DevTools...

Comment 19 by Nigel Stratton posted on 11/19/2019 at 1:16 AM

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.

Comment 20 (In reply to #19) by Raymond Camden posted on 11/19/2019 at 4:33 AM

Sorry - I haven't built a Chrome extension in *years*.