Devtools panel with Svelte

!Powered by Extension.js

Svelte Devtools Panel Example

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

What you'll see: A new Example tab inside the browser developer tools. The panel shows the title of the page you are inspecting.

How it works: A devtools extension is two pages, not one. The manifest points devtools_page at src/devtools/index.html, a registrar the browser loads in the background whenever devtools opens. That page has no visible UI at all, and its only job is one call to chrome.devtools.panels.create('Example', '', 'panel/index.html'). It stays a plain script for that reason, because a Svelte app there would render into a page nobody ever sees. The second page, bundled from src/panel/, is the UI that call registers, and it is the Svelte app you get as the Example tab.

The panel mounts PanelApp.svelte with Svelte 5's mount and reads the inspected page through chrome.devtools.inspectedWindow.eval, rendering one fact from it, the inspected document's title. That API works in every host, so the panel has something honest to show anywhere it loads. The panel also guards on chrome?.devtools?.inspectedWindow, because that namespace only exists when the page runs as a real panel. Opened as an ordinary extension page it renders a short message instead of throwing.

Try it locally

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

A fresh browser window opens with the extension already loaded. Open the developer tools and pick the Example tab.

Project layout

src/
├── devtools/
│   ├── index.html
│   └── scripts.ts
├── images/
│   ├── icon.png
│   └── svelte.png
├── panel/
│   ├── PanelApp.svelte
│   ├── index.html
│   ├── scripts.ts
│   ├── styles.css
│   └── svelte.d.ts
└── manifest.json

Commands

Cloned this repo instead? The examples ship without npm scripts, so run Extension.js directly from the example directory. Run npm install first when the example declares dependencies.

dev

Run the extension in development mode. Target a browser with --browser:

npx extension@latest dev .                  # Chromium (default)
npx extension@latest dev . --browser=chrome
npx extension@latest dev . --browser=edge
npx extension@latest dev . --browser=firefox

build

Build for production:

npx extension@latest build .                # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edge

preview

Preview the production build with the bundled browser:

npx extension@latest preview .

Tests

This template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.

Learn more

• Extension.js docs
• Templates index
• GitHub: extension-js/extension.js