Fix popup re-enable toolbar lifecycle (#56)

## Summary
- keep `EventsManager` mounted while inspector UI modules remain gated by active state
- restore `EXTENSION_TOGGLE` handling inside `EventsManager` with source/state guards so popup off/on works without reload
- add a patch changeset and regression coverage for popup off -> on toolbar recovery

## Test plan
- [x] `pnpm check`
- [x] `pnpm lint`
- [x] `pnpm test:e2e --grep \"popup toggle off and on restores toolbar without reload\"`

Closes #55

Made with [Cursor](https://cursor.com)

Author: sm17p

.changeset/brave-schools-matter.md

@@ -0,0 +1,5 @@
+---
+"amgiflol": patch
+---
+
+Fix popup disable/re-enable so the toolbar restores without requiring a page reload.

.cursor/skills/wxt-svelte-extension/SKILL.md

@@ -13,14 +13,14 @@ description: Provides project context for the amgiflol WXT + Svelte 5 browser ex
 
 ## Scripts
 
-| Command                     | Purpose                                                                                     |
-| --------------------------- | ------------------------------------------------------------------------------------------- |
-| `pnpm dev`                  | Chrome dev (MV3)                                                                            |
-| `pnpm dev:firefox`          | Firefox dev (MV2 in dev)                                                                    |
-| `pnpm build`                | Chrome build (MV3)                                                                          |
-| `pnpm build:firefox`        | Firefox build (MV3)                                                                         |
-| `pnpm build:all`            | Both targets                                                                                |
-| `pnpm zip` / `pnpm zip:all` | Distribution zips                                                                           |
+| Command                     | Purpose                  |
+| --------------------------- | ------------------------ |
+| `pnpm dev`                  | Chrome dev (MV3)         |
+| `pnpm dev:firefox`          | Firefox dev (MV2 in dev) |
+| `pnpm build`                | Chrome build (MV3)       |
+| `pnpm build:firefox`        | Firefox build (MV3)      |
+| `pnpm build:all`            | Both targets             |
+| `pnpm zip` / `pnpm zip:all` | Distribution zips        |
 
 ## Constraints
 

.github/workflows/ci.yml

@@ -49,7 +49,6 @@ jobs:
       - name: Package all
         run: pnpm zip:all
 
-
       - name: Dry-Run Submit to stores
         # run: |
         #   pnpm wxt submit --dry-run \

.github/workflows/playwright.yml

@@ -44,7 +44,6 @@ jobs:
       - name: Run Playwright tests
         run: xvfb-run -a pnpm test:e2e
 
-
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:

.github/workflows/release.yml

@@ -145,7 +145,6 @@ jobs:
         run: |
           pnpm run zip:all
 
-
       - name: Get Version
         id: version
         run: |

e2e/pages/web.ts

@@ -27,7 +27,7 @@ export async function enableDomainInStorage(context: BrowserContext, domain: str
 	if (!worker) {
 		worker = await context.waitForEvent("serviceworker");
 	}
-	const setStorage = (d: string) => {
+	const setAndVerifyStorage = async (d: string) => {
 		const toBooleanRecord = (value: unknown): Record<string, boolean> => {
 			if (typeof value !== "object" || value === null) return {};
 			const result: Record<string, boolean> = {};
@@ -46,15 +46,17 @@ export async function enableDomainInStorage(context: BrowserContext, domain: str
 			}
 			return result;
 		};
-		return chrome.storage.local.get(["amg-state"]).then((result) => {
+		const maxAttempts = 5;
+		for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+			const result = await chrome.storage.local.get(["amg-state"]);
 			const currentState = result["amg-state"];
 			const stateRecord = toUnknownRecord(currentState);
 			const baseState = {
 				analytics: toUnknownRecord(stateRecord.analytics),
 				domains: toBooleanRecord(stateRecord.domains),
 				votes: toBooleanRecord(stateRecord.votes),
 			};
-			return chrome.storage.local.set({
+			await chrome.storage.local.set({
 				"amg-state": {
 					...baseState,
 					domains: {
@@ -63,9 +65,17 @@ export async function enableDomainInStorage(context: BrowserContext, domain: str
 					},
 				},
 			});
-		});
+			const verifyResult = await chrome.storage.local.get(["amg-state"]);
+			const verifyState = toUnknownRecord(verifyResult["amg-state"]);
+			const verifyDomains = toBooleanRecord(verifyState.domains);
+			if (verifyDomains[d] === true) {
+				return;
+			}
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+		throw new Error(`Failed to enable domain state for ${d}`);
 	};
-	await worker.evaluate(setStorage, domain);
+	await worker.evaluate(setAndVerifyStorage, domain);
 }
 
 export async function enableStableDomainInStorage(context: BrowserContext) {

e2e/tests/popup.spec.ts

@@ -1,5 +1,21 @@
 import pkg from "../../package.json" assert { type: "json" };
 import { expect, test } from "../fixtures";
+import { getExtensionToolbar } from "../pages/extension";
+import {
+	enableStableDomainInStorage,
+	expectSvelteAppLoaded,
+	openStableTestPage,
+} from "../pages/web";
+
+declare const chrome: {
+	tabs: {
+		query: (queryInfo: {
+			active: boolean;
+			currentWindow: boolean;
+		}) => Promise<Array<{ id?: number }>>;
+		sendMessage: (tabId: number, message: unknown) => Promise<void>;
+	};
+};
 
 function toUnknownRecord(value: unknown): Record<string, unknown> {
 	if (typeof value !== "object" || value === null) return {};
@@ -73,4 +89,47 @@ test.describe("Popup", () => {
 		expect(beforeDomainValue === undefined || beforeDomainValue === false).toBeTruthy();
 		expect(afterDomainValue).toBeTruthy();
 	});
+
+	test("popup toggle off and on restores toolbar without reload", async ({
+		context,
+		extensionId: _extensionId,
+		page,
+	}) => {
+		await enableStableDomainInStorage(context);
+		await openStableTestPage(page);
+		await expectSvelteAppLoaded(page);
+		await expect(getExtensionToolbar(page)).toBeVisible();
+		let [worker] = context.serviceWorkers();
+		if (!worker) {
+			worker = await context.waitForEvent("serviceworker");
+		}
+		await worker.evaluate(async () => {
+			const [tab] = await chrome.tabs.query({
+				active: true,
+				currentWindow: true,
+			});
+			if (!tab?.id) return;
+			await chrome.tabs.sendMessage(tab.id, {
+				type: "EXTENSION_TOGGLE",
+				payload: { isActive: false },
+				source: { popup: true },
+				timestamp: Date.now(),
+			});
+		});
+		await expect(getExtensionToolbar(page)).toHaveCount(0);
+		await worker.evaluate(async () => {
+			const [tab] = await chrome.tabs.query({
+				active: true,
+				currentWindow: true,
+			});
+			if (!tab?.id) return;
+			await chrome.tabs.sendMessage(tab.id, {
+				type: "EXTENSION_TOGGLE",
+				payload: { isActive: true },
+				source: { popup: true },
+				timestamp: Date.now(),
+			});
+		});
+		await expect(getExtensionToolbar(page)).toBeVisible();
+	});
 });

src/lib/Main.svelte

@@ -44,8 +44,8 @@
       },
     ]}
   >
+    <EventsManager />
     {#if uiStore.isActive}
-      <EventsManager />
       <SvgManager style="z-index: 1000000004" />
       <SelectorManager
         enabled={uiStore.isActive}