From cae19ab5f25d76e5707ec5f76e131b3cea00e6be Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Thu, 2 Oct 2025 14:21:11 +0200
Subject: [PATCH] Activate extension on interaction

Folks might interact with controls while the extension is disabled, and
wonder why none of their changes make any difference. So we turn on a
turned-off extension upon interaction, so changes are always visible.
---
 src/form.ts  | 20 +++++++++++++++++++-
 src/popup.ts | 12 +++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/form.ts b/src/form.ts
index 18d6c24..be74778 100644
--- a/src/form.ts
+++ b/src/form.ts
@@ -8,7 +8,7 @@ import {
 	getFonts,
 	getFiles
 } from "./font";
-import { callTypeX, showReloadAnimation } from "./popup";
+import { callTypeX, showReloadAnimation, activateExtension } from "./popup";
 import { defaultFonts } from "./recursive-fonts.js";
 
 const localFonts: Record<string, FontFile> = {};
@@ -194,9 +194,27 @@ export async function addFormElement(
 		};
 	});
 
+	// Auto-enable extension when interacting with font controls
+	const fontDetails = el.querySelector(".font-details");
+	if (fontDetails) {
+		const formElements = fontDetails.querySelectorAll(
+			"input, select, textarea"
+		);
+		formElements.forEach(element => {
+			element.addEventListener("change", autoEnableExtension);
+		});
+	}
+
 	usedFonts.prepend(el);
 }
 
+async function autoEnableExtension() {
+	let { extensionActive } = await chrome.storage.local.get("extensionActive");
+	if (!extensionActive) {
+		await activateExtension(true);
+	}
+}
+
 async function changeFont(
 	parent: HTMLFieldSetElement,
 	newFontFileName: string
diff --git a/src/popup.ts b/src/popup.ts
index 7fd57f7..4cb593c 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -89,13 +89,19 @@ async function showStatus() {
 	activateFonts.classList.toggle("active", !!extensionActive);
 }
 
-// Toggle extension on/off using the button
-activateFonts.onclick = async () => {
+// Set extension state (on/off) or toggle it
+export async function activateExtension(setActive?: boolean) {
 	let { extensionActive } = await chrome.storage.local.get("extensionActive");
+	const active = setActive !== undefined ? setActive : !extensionActive;
 	await chrome.storage.local.set({
-		extensionActive: !extensionActive
+		extensionActive: active
 	});
 	await callTypeX();
+}
+
+// Toggle extension on/off using the button
+activateFonts.onclick = async () => {
+	await activateExtension();
 };
 
 export async function callTypeX() {