Boilerplate to create Chrome extension with Svelte and TypeScript
Svelte: A lightweight framework for building user interfaces.
TypeScript: Adds static typing and improved tooling to your project.
TailwindCSS: A utility-first CSS framework for rapidly building custom designs.
Hot Reloading: Instantly see the changes in your extension without having to reload it manually.
Automatic Code Linting: Automatically lint your code with eslint and prettier and run svelte-check
before each commit.
To get started with the SvelteChrome Starter Template, follow these steps:
git clone [email protected]:amahmod/vite_svelte_chrome_extension_starter.git
cd vite_svelte_chrome_extension_starter
and pnpm install
pnpm dev
chrome://extensions
dist
folder in the cloned repository.To build a production-ready version of your extension, run the following command:
pnpm build
The compiled files will be located in the dist
folder, ready to be packaged and distributed. A production ready zip file will also be generated in the build
folder.
The folder structure of this template is organized as follows:
src
: Contains the source code of your extension.public
: Contains static assets used in your extension. All the assets will be copied into the dist folder.dist
: The compiled output of your extension.build
: Contains production ready zip files of your extension.Contributions are welcome! If you find any issues or have suggestions, please open an issue or submit a pull request.