diff --git a/workspace/extension/src/constants/version.ts b/workspace/extension/src/constants/version.ts
new file mode 100644
index 0000000..71b2a89
--- /dev/null
+++ b/workspace/extension/src/constants/version.ts
@@ -0,0 +1 @@
+export const SVELTE_SUPPORTED_MAJOR_VERSIONS: number[] = [4];
\ No newline at end of file
diff --git a/workspace/extension/src/lib/runtime.svelte.ts b/workspace/extension/src/lib/runtime.svelte.ts
index d8cd54c..24629e0 100644
--- a/workspace/extension/src/lib/runtime.svelte.ts
+++ b/workspace/extension/src/lib/runtime.svelte.ts
@@ -44,6 +44,11 @@ function resolveEventBubble(node: any) {
 
 port.onMessage.addListener(({ type, payload }) => {
 	switch (type) {
+		case 'bridge::ext/svelte_version:set': {
+			app.svelteVersion = payload;
+			break;
+		}
+		
 		case 'bridge::ext/clear': {
 			app.nodes = {};
 			app.selected = undefined;
diff --git a/workspace/extension/src/lib/state.svelte.ts b/workspace/extension/src/lib/state.svelte.ts
index f192277..f43bf89 100644
--- a/workspace/extension/src/lib/state.svelte.ts
+++ b/workspace/extension/src/lib/state.svelte.ts
@@ -1,5 +1,19 @@
 type Overwrite<A, B> = Omit<A, keyof B> & B;
 
+type AppState = {
+	svelteVersion?: number;
+
+	nodes: Record<string, DebugNode>;
+	root: Readonly<DebugNode[]>;
+
+	selected?: DebugNode;
+	hovered?: DebugNode;
+
+	inspecting: boolean;
+	query: string;
+}
+
+
 export type DebugNode = Overwrite<
 	SvelteBlockDetail,
 	{
@@ -28,15 +42,17 @@ export type DebugNode = Overwrite<
 	}
 >;
 
-export const app = $state({
-	nodes: {} as { [key: string]: DebugNode },
+export const app: AppState = $state({
+	svelteVersion: undefined,
+
+	nodes: {} as Record<string, DebugNode>,
 	get root() {
 		const nodes = Object.values(this.nodes);
 		return nodes.filter((node) => !node.parent);
 	},
 
-	selected: undefined as undefined | DebugNode,
-	hovered: undefined as undefined | DebugNode,
+	selected: undefined,
+	hovered: undefined,
 
 	inspecting: false,
 	query: '',
diff --git a/workspace/extension/src/routes/ConnectMessage.svelte b/workspace/extension/src/routes/ConnectMessage.svelte
index 4815049..00b5573 100644
--- a/workspace/extension/src/routes/ConnectMessage.svelte
+++ b/workspace/extension/src/routes/ConnectMessage.svelte
@@ -1,9 +1,27 @@
 <script>
 	import { background } from '$lib/runtime.svelte';
+	import { app } from '$lib/state.svelte';
+	import { SVELTE_SUPPORTED_MAJOR_VERSIONS } from '../constants/version';
 </script>
 
 <main>
-	<h1 style:font-size="3rem">Svelte DevTools</h1>
+	{#if app.svelteVersion && !SVELTE_SUPPORTED_MAJOR_VERSIONS.includes(app.svelteVersion)}
+		<h1 style:font-size="3rem">Svelte DevTools</h1>
+		<p style:display="inline-flex" style:font-size="1.25rem">
+			<span>Unsupported Svelte version detected</span>
+
+			<button onclick={() => background.send('bypass::ext/page->refresh')}>reload</button>
+		</p>
+
+		<footer>
+			<p style:font-size="1rem">Svelte app is using an unsupported major version.</p>
+			<ul>
+				<li>Currently using Svelte version ^{app.svelteVersion}.0.0</li>
+				<li>Supported major versions: {SVELTE_SUPPORTED_MAJOR_VERSIONS.join(', ')}</li>
+			</ul>
+		</footer>
+	{:else}
+		<h1 style:font-size="3rem">Svelte DevTools</h1>
 	<p style:display="inline-flex" style:font-size="1.25rem">
 		<span>No Svelte app detected</span>
 
@@ -17,6 +35,7 @@
 			<li>Use Svelte version ^4.0.0?</li>
 		</ul>
 	</footer>
+	{/if}
 </main>
 
 <style>
diff --git a/workspace/extension/static/background.js b/workspace/extension/static/background.js
index ce2d67a..d014e4c 100644
--- a/workspace/extension/static/background.js
+++ b/workspace/extension/static/background.js
@@ -15,6 +15,7 @@ chrome.runtime.onConnect.addListener((port) => {
 				if (!chrome.tabs.onUpdated.hasListener(courier)) {
 					chrome.tabs.onUpdated.addListener(courier);
 				}
+				sensor(message.tabId);
 				break;
 			}
 			case 'bypass::ext/page->refresh': {
@@ -40,10 +41,13 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.runtime.onMessage.addListener((message, sender) => {
 	if (sender.id !== chrome.runtime.id) return; // unexpected sender
 
-	if (message.type === 'bypass::ext/icon:set') {
+	if (message.type === 'bridge::ext/svelte_version:set' && sender.tab?.id) {
 		const selected = message.payload ? 'default' : 'disabled';
 		const icons = [16, 24, 48, 96, 128].map((s) => [s, `icons/${selected}-${s}.png`]);
-		return chrome.action.setIcon({ path: Object.fromEntries(icons) });
+		chrome.action.setIcon({ 
+			path: Object.fromEntries(icons),
+			tabId: sender.tab.id 
+		});
 	}
 
 	const port = sender.tab?.id && ports.get(sender.tab.id);
@@ -107,17 +111,19 @@ async function sensor(tabId) {
 				});
 			},
 		});
+		// Small delay to let Svelte load
+		await new Promise(resolve => setTimeout(resolve, 100));
 		// capture data to send to listener
 		await chrome.scripting.executeScript({
 			target: { tabId },
 			world: 'MAIN',
 			func: () => {
 				// @ts-ignore - injected if the website is using svelte
-				const [major] = [...(window.__svelte?.v ?? [])];
+				const [major] = [...(window.__svelte?.v ?? [])].map(v => parseInt(v));
 
 				document.dispatchEvent(
 					new CustomEvent('SvelteDevTools', {
-						detail: { type: 'bypass::ext/icon:set', payload: major },
+						detail: { type: 'bridge::ext/svelte_version:set', payload: major },
 					}),
 				);
 			},
@@ -126,6 +132,9 @@ async function sensor(tabId) {
 		// for internal URLs like `chrome://` or `edge://` and extension gallery
 		// https://chromium.googlesource.com/chromium/src/+/ee77a52baa1f8a98d15f9749996f90e9d3200f2d/chrome/common/extensions/chrome_extensions_client.cc#131
 		const icons = [16, 24, 48, 96, 128].map((s) => [s, `icons/disabled-${s}.png`]);
-		chrome.action.setIcon({ path: Object.fromEntries(icons) });
+		chrome.action.setIcon({ 
+			path: Object.fromEntries(icons),
+			tabId: tabId 
+		});
 	}
 }