Demo upload

package.json

@@ -19,6 +19,7 @@
 		"@sveltejs/kit": "^1.5.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/chrome": "^0.0.236",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",

src/routes/+layout.svelte

@@ -1,11 +1,22 @@
-<script lang='ts'>
+<script lang="ts">
 	// The ordering of these imports is critical to your app working properly
 	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
 	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	// Most of your app wide CSS should be put in this file
+	import { AppBar, AppShell } from '@skeletonlabs/skeleton';
 	import '../app.postcss';
-	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
+
+	let environment: string;
+
+	onMount(() => {
+		if (window.chrome && chrome.runtime && chrome.runtime.id) {
+			environment = 'Chrome Extension';
+		} else {
+			environment = 'Development Environment';
+		}
+	});
 </script>
 
 <!-- App Shell -->
@@ -16,6 +27,9 @@
 			<svelte:fragment slot="lead">
 				<strong class="text-xl uppercase">Skeleton</strong>
 			</svelte:fragment>
+
+			<p class="text-center">{environment}</p>
+			
 			<svelte:fragment slot="trail">
 				<a
 					class="btn btn-sm variant-ghost-surface"

src/routes/+page.svelte

@@ -1,5 +1,3 @@
-<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
-
 <div class="container h-full mx-auto flex justify-center items-center">
 	<div class="space-y-10 text-center flex flex-col items-center">
 		<h2 class="h2 font-bold">Welcome to Skeleton.</h2>