Webextension Svelte Template

Sets up a repository for building web-extensions with svelte.

Template for Popup, Options page, Background Scripts and Content Scripts are set up. It also includes some factory functions for creating svelte stores backed up by chrome.storage.local

Running the scripts

To run the project during development (with compile on change)

npm run dev

For getting a completed build,

npm run build

Project organization

Popup

Sources are in src/app/popup directory. Popup.svelte is the starting point of the popup that will be displayed.

Options

Sources reside in src/app/options directory. Options.svelte is the starting point for the options page that will be displayed.

Background Scripts

There can be multiple background scripts in an extension. The background scripts live in src/app/background directory.

Background scripts are simple ts files without any svelte scripts/templates. These files are simply transpiled to JS.

Content Scripts

Sources are in src/app/content_scripts directory.

These are also just ts files and simply transpiled to JS.

Stores

Source are in src/app/stores directory.

Build configuraion

Build configuration is stored in rollup.config.js file taken from here (https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/blob/main/rollup.config.js).

There are a couple of helpful functions there to help process the files.

Compiling Svelte files

The popup and options components are the ones that are written in svelte. These files are compiled and processed using the createConfig function.

Compiling ts files

The background and content scripts need to be transpiled only. The compileDir function takes a directory and compiles all the files in that directory to js.

Copying assests and CSS

The copyAssets function copies the static assets (manifest.json, images, css etc.) to the output folder.

FAQ

Adding external CSS

Add the CSS file in the src/static/css directory and import the file in the index.css file.

/* Assuming the filename is "new-css-file.css" */

/* index.css */
@import "./new-css-file.css";

/* ... Rest of the file ... */

The index.css file is loaded in the generated popup and options HTML file. So importing new CSS files here will automatically load them the popup/options.