Chrome Extension DevTools Extensions — Developer Guide
5 min readBuilding DevTools Extensions
Introduction
- Extend Chrome DevTools with custom panels, sidebars, and functionality
- Use cases: React DevTools, Redux DevTools, performance profilers, API inspectors
- Requires
"devtools_page"in manifest.json
manifest.json Setup
{
"devtools_page": "devtools.html"
}
- No special permission needed for basic DevTools panels
- The devtools page is a hidden HTML page that runs when DevTools is open
DevTools Page (devtools.html / devtools.js)
<!DOCTYPE html>
<html><body><script src="devtools.js"></script></body></html>
// devtools.js — runs once when DevTools opens for a tab
chrome.devtools.panels.create(
"My Panel", // Panel title in DevTools tab bar
"icon.png", // 16x16 icon
"panel.html", // Panel content page
(panel) => {
panel.onShown.addListener((window) => { /* panel visible */ });
panel.onHidden.addListener(() => { /* panel hidden */ });
}
);
chrome.devtools.panels API
create() — Custom Panels
- Creates a new tab in DevTools (like Elements, Console, Network)
panel.htmlhas full DOM, can use frameworks (React, Vue, etc.)
elements.createSidebarPane() — Elements Sidebar
chrome.devtools.panels.elements.createSidebarPane("My Sidebar", (sidebar) => {
sidebar.setPage("sidebar.html");
// Or set content dynamically:
sidebar.setObject({ key: "value" });
sidebar.setExpression("document.querySelector('body').dataset");
});
- Adds a pane to the Elements panel sidebar (next to Styles, Computed, etc.)
themes
const theme = chrome.devtools.panels.themeName; // "default" or "dark"
- Match your panel UI to the user’s DevTools theme
chrome.devtools.inspectedWindow API
eval() — Execute in Inspected Page
chrome.devtools.inspectedWindow.eval(
"document.querySelectorAll('img').length",
(result, error) => {
if (error) console.error(error);
else console.log("Images on page:", result);
}
);
- Runs JavaScript in the context of the inspected page
- Not subject to extension CSP (runs in page context)
- Use for reading page state, not for persistent modifications
getResources() — List Page Resources
chrome.devtools.inspectedWindow.getResources((resources) => {
resources.forEach(r => console.log(r.url, r.type));
});
reload(options)
chrome.devtools.inspectedWindow.reload({
injectedScript: "window.__DEVTOOLS_HOOK__ = true;"
});
- Reload the inspected page with optional injected script
tabId
const tabId = chrome.devtools.inspectedWindow.tabId;
- Get the tab ID of the page being inspected
- Use with
@theluckystrike/webext-messagingsendTabMessage()to communicate with content scripts
chrome.devtools.network API
getHAR() — HTTP Archive
chrome.devtools.network.getHAR((harLog) => {
harLog.entries.forEach(entry => {
console.log(entry.request.url, entry.response.status, entry.time);
});
});
onRequestFinished
chrome.devtools.network.onRequestFinished.addListener((request) => {
request.getContent((body, encoding) => {
console.log("Response body:", body);
});
});
- Monitor network requests in real-time
Communication Architecture
DevTools Page <-> Background Service Worker <-> Content Script <-> Inspected Page
- DevTools page cannot directly access content scripts
- Use background as relay with
@theluckystrike/webext-messaging:// devtools.js const messenger = createMessenger<Messages>(); const data = await messenger.sendMessage('getPageData', { tabId }); // background.js messenger.onMessage('getPageData', async (req) => { return await messenger.sendTabMessage(req.tabId, 'extractData', {}); });
Panel UI Best Practices
- Use the DevTools theme (
chrome.devtools.panels.themeName) for colors - Keep panels lightweight — DevTools already uses significant memory
- Lazy-load panel content (use
onShown/onHiddenevents) - Store panel preferences with
@theluckystrike/webext-storage
Common Patterns
Network Inspector Panel
- Listen to
onRequestFinished, filter by domain/type - Display in custom table with search/filter
Page State Inspector
- Use
inspectedWindow.eval()to read page state - Display React/Vue component trees, global variables, etc.
Performance Monitor
- Track
onRequestFinishedtiming data - Display charts and metrics in custom panel
Common Mistakes
- Trying to access
chrome.devtools.*outside the devtools page — only available in devtools context - Panel pages don’t have access to
chrome.devtools.*— communicate via messaging to devtools.js inspectedWindow.eval()runs in page context, not extension context — can’t access Chrome APIs there- Forgetting that DevTools pages are destroyed when DevTools closes
Related Articles
Related Articles
Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.