feat: use badge to detect svelte in active tab (#154)

rollup.config.js

@@ -7,6 +7,12 @@ export default defineConfig([
 			file: 'build/background.js',
 		},
 	},
+	{
+		input: 'static/sensor.js',
+		output: {
+			file: 'build/sensor.js',
+		},
+	},
 	{
 		input: 'src/client/index.js',
 		output: [

src/app.d.ts

@@ -116,6 +116,11 @@ declare global {
 				data: unknown;
 			}
 		>;
+
+		SvelteDevTools: CusomEvent<{
+			type: string;
+			payload: string;
+		}>;
 	}
 }
 

static/background.js

@@ -16,11 +16,11 @@ chrome.runtime.onConnect.addListener((port) => {
 				ports.delete(message.tabId);
 
 				if (ports.size === 0) {
-					chrome.tabs.onUpdated.removeListener(attach);
+					chrome.tabs.onUpdated.removeListener(courier);
 				}
 			});
 
-			return chrome.tabs.onUpdated.addListener(attach);
+			return chrome.tabs.onUpdated.addListener(courier);
 		} else if (message.type === 'ext/reload') {
 			return chrome.runtime.reload();
 		} else if (message.type === 'page/refresh') {
@@ -35,12 +35,26 @@ chrome.runtime.onConnect.addListener((port) => {
 // relay messages from `chrome.scripting` to devtools page
 chrome.runtime.onMessage.addListener((message, sender) => {
 	if (sender.id !== chrome.runtime.id) return; // unexpected sender
+
+	if (message.type === 'ext/icon:set') {
+		const selected = message.payload ? 'default' : 'disabled';
+		return chrome.action.setIcon({
+			path: {
+				16: `icons/${selected}-16.png`,
+				24: `icons/${selected}-24.png`,
+				48: `icons/${selected}-48.png`,
+				96: `icons/${selected}-96.png`,
+				128: `icons/${selected}-128.png`,
+			},
+		});
+	}
+
 	const port = sender.tab?.id && ports.get(sender.tab.id);
-	if (port) port.postMessage(message);
+	if (port) return port.postMessage(message);
 });
 
 /** @type {Parameters<chrome.tabs.TabUpdatedEvent['addListener']>[0]} */
-function attach(tabId, changed) {
+function courier(tabId, changed) {
 	if (!ports.has(tabId) || changed.status !== 'loading') return;
 
 	chrome.scripting.executeScript({
@@ -94,3 +108,27 @@ function attach(tabId, changed) {
 		},
 	});
 }
+
+chrome.tabs.onActivated.addListener(({ tabId }) => sensor(tabId));
+chrome.tabs.onUpdated.addListener(
+	(tabId, changed) => changed.status === 'loading' && sensor(tabId),
+);
+
+/** @param {number} tabId */
+async function sensor(tabId) {
+	chrome.scripting.executeScript({
+		target: { tabId },
+
+		func: () => {
+			const source = chrome.runtime.getURL('/sensor.js');
+			document.querySelector(`script[src="${source}"]`)?.remove();
+			const script = document.createElement('script');
+			script.setAttribute('src', source);
+			document.documentElement.appendChild(script);
+
+			document.addEventListener('SvelteDevTools', ({ detail }) => {
+				chrome.runtime.sendMessage(detail);
+			});
+		},
+	});
+}

static/manifest.json

@@ -4,23 +4,30 @@
 	"version": "2.0.0",
 	"description": "Browser DevTools extension for debugging Svelte applications.",
 	"icons": {
-		"16": "icons/16.png",
-		"24": "icons/24.png",
-		"48": "icons/48.png",
-		"96": "icons/96.png",
-		"128": "icons/128.png"
+		"16": "icons/default-16.png",
+		"24": "icons/default-24.png",
+		"48": "icons/default-48.png",
+		"96": "icons/default-96.png",
+		"128": "icons/default-128.png"
 	},
 
+	"action": {
+		"default_icon": {
+			"16": "icons/disabled-16.png",
+			"24": "icons/disabled-24.png",
+			"48": "icons/disabled-48.png",
+			"96": "icons/disabled-96.png",
+			"128": "icons/disabled-128.png"
+		}
+	},
 	"background": {
 		"service_worker": "background.js"
 	},
 	"devtools_page": "register.html",
 	"host_permissions": ["*://*/*"],
 	"permissions": ["activeTab", "scripting"],
 	"web_accessible_resources": [
-		{
-			"resources": ["courier.js"],
-			"matches": ["*://*/*"]
-		}
+		{ "matches": ["*://*/*"], "resources": ["courier.js"] },
+		{ "matches": ["*://*/*"], "resources": ["sensor.js"], "world": "MAIN" }
 	]
 }

static/sensor.js

@@ -0,0 +1,10 @@
+(() => {
+	// @ts-ignore - injected if the website is using svelte
+	const [major] = [...(window.__svelte?.v ?? [])];
+
+	document.dispatchEvent(
+		new CustomEvent('SvelteDevTools', {
+			detail: { type: 'ext/icon:set', payload: major },
+		}),
+	);
+})();