Devtools panel

Adds a devtools panel to the browser that reads the inspected page.

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: devtools panel · Styling: CSS · Level: beginner

Create this project

npx extension@latest create my-devtools --template devtools
cd my-devtools
npm install
npm run dev

What it is for

  • A devtools panel as the primary UI surface
  • Inspecting the current page from inside the developer tools
  • Starting point for debugging tools built as browser extensions

First steps

  • Run npm run dev to launch the extension
  • Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab
  • Edit src/panel/index.html and reopen devtools to see the change

Permissions it asks for

This template requests no permissions.

Source on GitHubDocumentation

extension.devDocumentation for extension.dev