How to add a panel to Chrome DevTools

Oct 16, 2022•#Chrome Extensions•12 min read

While working on one of my side projects, I stumbled upon a Chrome API that allows developers to extend the functionality of Chrome Devtools. It can be used to add new UI Panels or sidebars, access DOM elements, or even get information about the network requests flowing in and out of the webpage.

In this post, we're going use this API to create a basic extension that'll add a new panel to your Chrome Devtools.

So let's get started!

Creating the Chrome Extension

The First thing we'll do is create a folder and name it my-devtools-extension. Inside this folder create a new JSON file and we'll call it `manifest.json`. The manifest file provides the browser information about our extension, such as its name, version, files it is using, etc.

{
  "name": "My Devtools Extension",
  "version": "1.0",
  "description": "My Awesome Devtools Extension!",
  "devtools_page": "devtools.html",
  "manifest_version": 3
}

As you can see, we've added a devtools_page key in our manifest.json file which points to the HTML file. This HTML file will be executed every time Devtools are invoked in Chrome. Now let's create this HTML file.

<html>
  <head></head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

Not much to see here. The whole purpose of this file at this point is to load the devtools.js file which can be used to load the actual panel template. So, now let's create the devtools.js.

chrome.devtools.panels.create(
  "My Devtools Extension",
  "icon.png",
  "panel.html"
);

In the devtools.js file, we're using the Chrome API to create a new panel. We're using the create method that comes bundled with chrome.devtools API. There are three parameters we're passing create method.

Now let's quickly create the panel.html file.

<html>
<head></head>
<body>
  <h2>Hello Devtools!</h2>

  <script src="panel.js"></script>
</body>
</html>

And now finally add the panel.js file that we've added to the panel.html file.

console.log("Hello Devtools!");

<strong>Loading the Extension into the web browser</strong>

Now that we've created our extension we need to test it by loading it to a Chrome web browser. To do this first we need to navigate to the following URL.

chrome://extensions

This will take you to the extension manager that can be used to manage the extensions installed on your web browser or manually install new extensions.

Now enable the developer mode by toggling the button located on the top right-hand corner of this page.

Click the Load Unpacked button located on the top left corner of this screen.

This will open a file browser. In this step select the extension folder we've created and click the Select Folder button.

And that's it! We've successfully loaded our extension in the browser.

To view the new panel we've added open a new browser tab and start the Chrome Devtools. If everything went well, you'll see a new panel added to the Chrome Devtools tab.

In case you've any queries or questions about this blog post feel free to drop a comment or reach out to me on Twitter @harshalslimaye.

Source Code: https://github.com/harshalslimaye/chromedevtools-panel