Extend Chrome Developer Tools to Improve Your Workflow (DX)

Let’s extend the Chrome Developer Tools sidebar to help solve some of our own development problems.

As developers, we sometimes need to improve our own workflow. One way to do that is by creating small tools that help us with common tasks, like calculations or quick checks.

In this article, I’ll show you how to build a custom Chrome DevTools extension to make your development process smoother.

My Problems

Let’s first look at the problems I want to solve to improve my development experience (DX):

  1. I want to get the padding of any element as a percentage, which helps with making responsive designs.
  2. I want to get the aspect ratio of an image and copy it easily to use in my code.

Initial Setup

Let’s start with the basics. To extend Chrome Developer Tools, you don’t need much—just a few simple files. We’ll walk through how this works step by step.

  1. manefit.json — This file tells Chrome what your extension is and how it works.
{
    "manifest_version": 3,
    "name": "Extend Dev Tools",
    "description": "Extend Dev Tools (kyawzayarwin.com)",
    "version": "1.0",
    "action": {
      "default_icon": "logo.png",
      "default_title": "Extend Dev Tools (kyawzayarwin.com)"      
    },    
    "devtools_page": "devtools.html",
    "icons": {
      "48": "logo.png",
      "96": "logo.png"
    }    
}
  1. devtools.html — This is a simple html file. Since we’re adding a panel inside the Chrome DevTools, we just need to include our JavaScript file here.
<script src="scripts/devtools.js"></script>

  1. devtools.js — a javascript file that will contain the code that adds your custom panel or sidebar.

    Now, let’s add some code to the JavaScript file so we can see a preview.

    We’re going to add a custom sidebar panel inside the “Elements” tab of Chrome DevTools. To do that, we’ll use the following function:

    chrome.devtools.panels.elements.createSidebarPane("Extended", (sidebar) => {
	
})

    This will create a new sidebar panel called "Extended". You can change the name to anything you like.

If you prefer working with TypeScript, I’ve created a boilerplate to help you get started more easily. You can find it here: https://github.com/starryskadi/chrome-extension-zero. In this project, I’m using that setup to make development easier, but you don’t have to use it.

Setup Preview

After writing those few lines of code, let’s install the Chrome extension so we can see it in action.

  1. Open Chrome and go to: chrome://extensions/

  2. Turn on Developer mode (you’ll see the toggle in the top right corner)

    image.png

  3. Click Load unpacked and select the folder where your extension files are located.

  4. Now, open any website and launch Chrome DevTools.

  5. You should see your custom sidebar panel appear, just like this:

    image.png

Application Logic

Now let’s implement the main logic of the application.

I want the DevTools extension to calculate the padding, margin, and aspect ratio of the selected element.

To do this, I used chrome.devtools.panels.elements.onSelectionChanged. As the name suggests, this function runs every time you select a new element in the DevTools panel.

To access the selected element, you can use chrome.devtools.inspectedWindow.eval with $0, which refers to the currently selected element in the Elements tab. Once we have the element, we can read its styles and calculate the needed values.

chrome.devtools.inspectedWindow.eval(
  `(() => {
       const element = $0; // Get the selected element
       if (!element) return null;
       // ...your logic code to get result
   })();`,
  (result, isException) => {
      // ... your code to show the result
      sidebar.setObject(calculateObject, "Extended")
  }
);

After getting the result and doing the calculations, you can display it in the custom sidebar panel using sidebar.setObject().

Note: After updating your application logic, you’ll need to reload Chrome DevTools (by closing and reopening it) for the changes to take effect.

And that’s all you need to get started with extending Chrome Developer Tools to suit your own needs.

To keep this article short and focused, I won’t include the full implementation here — but with the logic above, you already have a solid foundation to build your own tools.

You can check out the complete example and code here:

🔗 https://github.com/starryskadi/extend-dev-tools

References

https://developer.chrome.com/docs/extensions/reference/api/devtools/panels