sveltekit-chrome-extension Svelte Themes

Sveltekit Chrome Extension

Demo showcasing using SvelteKit to build a Chrome Extension

SvelteKit Chrome Extension

  1. pnpm install
  2. pnpm build
  3. open your browser and navigate to chrome://extensions
  4. enable developer mode
  5. select Load unpacked and open the build directory from this project

What's here?

In vite.config.ts there are two custom plugins:

  1. extensionManifestPlugin - small plugin to "build" the manifest. it will remove the $schema key if present and write out to the build directory
  2. extensionWorkerPlugin - small plugin to build the worker file. it will leverage the same codebase as SvelteKit, meaning aliases such as $lib should work without additional config

In svelte.config.js we are changing the appDir to point to build/app in order to mitigate issues with the browser loading the extension:

Cannot load extension with file or directory name _app. Filenames starting with "_" are reserved for use by the system.

Top categories

Loading Svelte Themes