Extension template init

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+pnpm-lock.yaml

package.json

@@ -31,6 +31,7 @@
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
+		"sveltekit-adapter-chrome-extension": "^2.0.0",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/app.postcss

@@ -1,2 +1,5 @@
-/*place global styles here */
+html,
-html, body { @apply h-full overflow-hidden; }
+body {
+	@apply !h-[600px] !w-[800px];
+	background-repeat: no-repeat, no-repeat, no-repeat;
+}

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -7,7 +7,7 @@
 		<figure>
 			<section class="img-bg" />
 			<svg
-				class="fill-token -scale-x-[100%]"
+				class="fill-token -scale-x-[100%] !h-24 !w-24"
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 200 200"
 			>
@@ -19,12 +19,7 @@
 		</figure>
 		<!-- / -->
 		<div class="flex justify-center space-x-2">
-			<a
+			<a class="btn variant-filled" href="https://skeleton.dev/" target="_blank" rel="noreferrer">
-				class="btn variant-filled"
-				href="https://skeleton.dev/"
-				target="_blank"
-				rel="noreferrer"
-			>
 				Launch Documentation
 			</a>
 		</div>
@@ -42,12 +37,11 @@
 	}
 	figure svg,
 	.img-bg {
-		@apply w-64 h-64 md:w-80 md:h-80;
+		@apply w-32 h-32;
 	}
 	.img-bg {
 		@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
-		animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
+		animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
-			glow 5s linear infinite;
 	}
 	@keyframes glow {
 		0% {

static/manifest.json

@@ -0,0 +1,14 @@
+{
+	"name": "sveltekit-extension-template",
+	"description": "Example Chrome extension built with Sveltekit and Skeleton",
+	"version": "0.0.1",
+	"manifest_version": 3,
+	"icons": {
+		"32": "favicon.png"
+	},
+	"action": {
+		"default_popup": "index.html",
+		"default_icon": "favicon.png",
+		"default_title": "sveltekit-extension-template"
+	}
+}

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from 'sveltekit-adapter-chrome-extension';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -11,7 +11,15 @@ const config = {
 		// 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()
+		adapter: adapter({
+			// default options are shown
+			pages: 'build',
+			assets: 'build',
+			fallback: null,
+			precompress: false,
+			manifest: 'manifest.json'
+		}),
+		appDir: 'app'
 	}
 };