Devtools panel with Svelte

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

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

Create this project

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

Files in this template

  • extension.config.js
  • src/devtools/index.html
  • src/devtools/scripts.ts
  • src/images/icon.png
  • src/images/svelte.png
  • src/manifest.json
  • src/panel/PanelApp.svelte
  • src/panel/index.html
  • src/panel/scripts.ts
  • src/panel/styles.css
  • src/panel/svelte.d.ts

Source on GitHubDocumentation

extension.devDocumentation for extension.dev