Note: This Svelte Chrome Extension Starter Template makes building extensions with Manifest V3 and Svelte a breeze!
Hey there! I'm Rahit, and I've been working with Svelte to develop web apps for quite some time now. Recently, I encountered the challenge of building a Chrome extension using Svelte, only to discover that it can be quite tricky with the default Svelte or SvelteKit configuration.
After conducting several experiments and tinkering around, I've managed to create my very own working solution. This template is fully compatible with Manifest V3 and seamlessly integrates Svelte, making the process of building Chrome extensions a breeze.
Here's what you can expect from this starter project:
Follow these steps to get started with your Svelte Chrome extension:
pnpm i
to install the project dependencies.Next, you'll need to make some edits to the following files:
src/background/background.ts
src/content/Content.svelte
src/content/NewTab.svelte
src/content/Popup.svelte
public/manifest.json
(Update the manifest with the necessary information for your extension)To build your project, follow these steps:
pnpm run build
to compile the project./build
directory.For local testing and debugging purposes, use the following steps:
pnpm run build --watch
to continuously build the project whenever any file changes occur.pnpm run dev
to start a local server./popup.html
, /content.html
, or /newtab.html
in your browser to view the rendered content.Here are a few additional details and customization options to consider:
content.ts
file to change this behavior.useShadowDom
to false
.That's it! You're all set to build your awesome Chrome extension using Svelte and Manifest V3. Happy coding! 🎉