Merge pull request #145 from arrowtype/activate-on-use

Activate extension on interaction

Author: arrowtype

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

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() {