Using sveltekit for chrome extension

2023-08-17

Started a new svelte project

Create a manifest.json in the static folder

{
  "name": "Svelte Unlog",
  "description": "Svelte Unlog browser extension",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Svelte Unlog Extension",
    "default_icon": "favicon.png",
    "default_popup": "index.html"
  }
}

The default _app directory does not work for chrome extensions [[1]]. So we we will use app instead.

Add this to the the kit config in svelte.config.js

kit: {
	// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
	// If your environment is not supported or you settled on a specific environment, switch out the adapter.
	// See https://kit.svelte.dev/docs/adapters for more information about adapters.
	adapter: adapter(),
	appDir: 'app'
}

Set the +layout.js to prerender

export const prerender = true;

Used the chrome extension adapter which deals with the issue where the adapter-static adapter uses a inline script, which is blocked in Manifest V3.

pnpm install -D sveltekit-adapter-chrome-extension

Updated the svelte.config.js

// import adapter from '@sveltejs/adapter-auto';
import adapter from 'sveltekit-adapter-chrome-extension';

Build

>pnpm build

Thats it!?

And it works. That all it took…

Resources

[[1]] https://javascript.plainenglish.io/making-a-chrome-extension-with-svelte-2fefb3769c

[[2]] https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd