svelte_chrome_extension_starter Svelte Themes

Svelte_chrome_extension_starter

Chrome extension starter template with Vite, Svelte and Typescript

Svelte Chrome Extension Boilerplate

Boilerplate to create Chrome extension with Svelte and TypeScript

Features

  • 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.

  • Chrome Extensions Manifest V3

Getting Started

To get started with the SvelteChrome Starter Template, follow these steps:

  1. Clone this repository: git clone [email protected]:amahmod/vite_svelte_chrome_extension_starter.git
  2. Install dependencies: cd vite_svelte_chrome_extension_starter and pnpm install
  3. Start the development server: pnpm dev
  4. Open Chrome and navigate to chrome://extensions
  5. Enable "Developer mode" in the top right corner.
  6. Click on "Load unpacked" and select the dist folder in the cloned repository.

Build

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.

Folder Structure

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.

Contribution

Contributions are welcome! If you find any issues or have suggestions, please open an issue or submit a pull request.

Top categories

Loading Svelte Themes