SvelteKit App | Chromium Extension

github.com/SvelteKitApp/sveltekitapp-chromium-extension-tpl-sveltekit

• генерация проекта create-svelte v5.

$node --version
18.15.0
$npm create  svelte@latest sveltekitapp-chromium-extension-tpl-sveltekit
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-svelte version 5.0.4

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Vitest for unit testing
│
└  Your project is ready!
$cd sveltekitapp-chromium-extension-tpl-sveltekit
$git init && git add -A && git commit -m ":star: Start project"

• установка svelte adapter static в соотвествии с инсктрукцией

$npm uninstall -D @sveltejs/adapter-auto
$npm i -D @sveltejs/adapter-static

# svelte.config.js
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
# ...
-        adapter: adapter()
+        adapter: adapter({
+            fallback: 'index.html'
+        }),
+    appDir: 'ext'
     }
 };

Добавление TailwindCSS

$npx svelte-add@latest tailwindcss
➕ Svelte Add (Version 2023.06.280.00)

Подготовка к разработке расширения

• установка пакета @types/chrome

$npm i -D @types/chrome

• установка плагина crxjs vite plugin

# NOTE: использование beta версии для совместимости с текушими зависимостями
$npm i -D @crxjs/[email protected]

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.