Devtools panel Preact

Adds a devtools panel written in Preact that reads the inspected page.

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

Create this project

npx extension@latest create my-devtools-preact --template devtools-preact
cd my-devtools-preact
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 Preact 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/PanelApp.tsx and reopen devtools to see the change

Permissions it asks for

This template requests no permissions.

Source on GitHub Documentation

extension.dev Documentation for extension.dev