shaoml/sveltekit-crxjs-boilerplate

A boilerplate of chrome extension built on sveltekit prerender pages.

sveltekit-crxjs-boilerplate

构建工具

• sveltekit
• crxjs

依赖项目

• sveltejs-adapter-crx
• crxjs-vite-plugin-sveltekit

源码结构

src
├── routes
│   ├── popup/+page.svelte
│   └── +layout.ts
├── scripts
│   ├── background.ts
│   └── content.ts
├── app.html
└── manifest.ts
static
└── icons
    ├── 16.png
    ├── 48.png
    └── 128.png

How to use

从本项目开始

• 克隆项目到本地，安装依赖 npm i ，并构建项目 npm run build 。
• 用 chrome 打开 chrome://extensions/，开启开发者模式，点击加载已解压的扩展程序，选择到项目目录下的build目录。
• 在 chrome 的扩展工具栏中固定图标，点击图标，显示弹窗并开始计时。

从新项目开始

• 用 sveltekit 构建骨架项目。

npm create svelte@latest app-name
# select: Skeleton project
# select: Yes, using TypeScript syntax

• 设置预渲染模式。

// src/routes/+layout.ts
export const prerender = true;

• 复制清单文件 src/manifest.ts 及其关联的图标、脚本、页面等。
• 复制dependencies目录到新项目根目录下，并安装依赖 npm i。
• 配置构建选项：

// svelte.config.js
import adapter from '@sveltejs/adapter-static'; // Required
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
	preprocess: vitePreprocess(),

	kit: {
		appDir: 'app', // Required
		adapter: adapter({ strict: true }), // Required
		csp: { directives: { 'script-src': ['self'] } }, // optional
	},
};

export default config;

// vite.config.ts
import { crx } from '@crxjs/vite-plugin'; // Required
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import { mergeConfig, type UserConfig } from 'vite';
import manifest from './src/manifest'; // Required

const config: UserConfig = {
	plugins: [
		sveltekit(),
		crx({ manifest }), // Required
		{
			name: 'mergeConfig',
			apply: 'build',
			enforce: 'post',
			config(config) {
				return mergeConfig(config, {
					publicDir: 'static', // Required
				});
			},
		},
	],
	build: { assetsInlineLimit: 0 }, // optional
	resolve: {
		alias: {
			'~': resolve(__dirname, 'src'), // optional
		},
	},
};

export default config;

• 构建项目 npm run build，并在 chrome 中调试。方法同从本项目开始。

代码风格

• 格式化

// .vscode/settings.json
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.codeActionsOnSave": {
		"source.organizeImports": true,
		"source.fixAll.eslint": true,
		"source.fixAll.stylelint": true
	},
	"eslint.validate": ["svelte"],
	"stylelint.validate": ["svelte"],
	"[svelte]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "svelte.svelte-vscode"
	}
}

// .prettierrc
// 删除
{
	"plugins": ["prettier-plugin-svelte"],
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

npm i -D stylelint stylelint-config-standard stylelint-config-prettier stylelint-config-recess-order
npm i -D postcss-html stylelint-config-html

// .stylelintrc
{
	"extends": [
		"stylelint-config-html/svelte",
		"stylelint-config-standard",
		"stylelint-config-prettier",
		"stylelint-config-recess-order"
	]
}

sveltekit-crxjs-boilerplate's Issues

How to use in dev mode?

When running npm dev and then loading the extension from the dist folder doesn't work - the svelte files are not being complied. Any solution for that?