Consolidate extension storage under amg-state

Author: sm17p

e2e/pages/web.ts

@@ -4,7 +4,8 @@ import path from "path";
 declare const chrome: {
 	storage: {
 		local: {
-			set: (items: Record<string, boolean>) => void | Promise<void>;
+			get: (keys: string[]) => Promise<Record<string, unknown>>;
+			set: (items: Record<string, unknown>) => void | Promise<void>;
 		};
 	};
 };
@@ -27,7 +28,42 @@ export async function enableDomainInStorage(context: BrowserContext, domain: str
 		worker = await context.waitForEvent("serviceworker");
 	}
 	const setStorage = (d: string) => {
-		return chrome.storage.local.set({ [d]: true });
+		const toBooleanRecord = (value: unknown): Record<string, boolean> => {
+			if (typeof value !== "object" || value === null) return {};
+			const result: Record<string, boolean> = {};
+			for (const [key, fieldValue] of Object.entries(value)) {
+				if (typeof fieldValue === "boolean") {
+					result[key] = fieldValue;
+				}
+			}
+			return result;
+		};
+		const toUnknownRecord = (value: unknown): Record<string, unknown> => {
+			if (typeof value !== "object" || value === null) return {};
+			const result: Record<string, unknown> = {};
+			for (const [key, fieldValue] of Object.entries(value)) {
+				result[key] = fieldValue;
+			}
+			return result;
+		};
+		return chrome.storage.local.get(["amg-state"]).then((result) => {
+			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({
+				"amg-state": {
+					...baseState,
+					domains: {
+						...baseState.domains,
+						[d]: true,
+					},
+				},
+			});
+		});
 	};
 	await worker.evaluate(setStorage, domain);
 }

e2e/tests/popup.spec.ts

@@ -1,6 +1,26 @@
 import pkg from "../../package.json" assert { type: "json" };
 import { expect, test } from "../fixtures";
 
+function toUnknownRecord(value: unknown): Record<string, unknown> {
+	if (typeof value !== "object" || value === null) return {};
+	const result: Record<string, unknown> = {};
+	for (const [key, fieldValue] of Object.entries(value)) {
+		result[key] = fieldValue;
+	}
+	return result;
+}
+
+function toBooleanRecord(value: unknown): Record<string, boolean> {
+	const unknownRecord = toUnknownRecord(value);
+	const result: Record<string, boolean> = {};
+	for (const [key, fieldValue] of Object.entries(unknownRecord)) {
+		if (typeof fieldValue === "boolean") {
+			result[key] = fieldValue;
+		}
+	}
+	return result;
+}
+
 test.describe("Popup", () => {
 	test("popup shows correct UI and updates storage when toggled", async ({
 		page,
@@ -31,11 +51,26 @@ test.describe("Popup", () => {
 		const storageAfter = await page.evaluate(async () => {
 			return browser.storage.local.get(null);
 		});
-		const changedKeys = Object.keys(storageAfter).filter(
-			(key) => storageAfter[key] !== storageBefore[key],
-		);
+		expect(Object.hasOwn(storageBefore, "amg-state")).toBeTruthy();
+		expect(Object.hasOwn(storageAfter, "amg-state")).toBeTruthy();
+
+		const domain = await page.evaluate(async () => {
+			const [tab] = await browser.tabs.query({
+				active: true,
+				currentWindow: true,
+			});
+			if (!tab?.url) return "";
+			return new URL(tab.url).host;
+		});
+
+		const beforeAmgState = toUnknownRecord(storageBefore["amg-state"]);
+		const afterAmgState = toUnknownRecord(storageAfter["amg-state"]);
+		const beforeDomains = toBooleanRecord(beforeAmgState.domains);
+		const afterDomains = toBooleanRecord(afterAmgState.domains);
+		const beforeDomainValue = beforeDomains[domain];
+		const afterDomainValue = afterDomains[domain];
 
-		expect(changedKeys.length).toBeGreaterThan(0);
-		expect(changedKeys.some((key) => storageAfter[key] === true)).toBeTruthy();
+		expect(beforeDomainValue === undefined || beforeDomainValue === false).toBeTruthy();
+		expect(afterDomainValue).toBeTruthy();
 	});
 });

playwright.config.ts

@@ -61,7 +61,7 @@ export default defineConfig({
 		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
 		// },
 	],
-	timeout: process.env.CI ? 30_000 : 5_000,
+	timeout: process.env.CI ? 30_000 : 10_000,
 	webServer: {
 		command: "node e2e/serve-fixtures.mjs 51234",
 		url: "http://localhost:51234/inspector-playground.html",

src/app.config.ts

@@ -1,5 +1,10 @@
 // <srcDir>/app.config.ts
 import { googleAnalytics4 } from "@wxt-dev/analytics/providers/google-analytics-4";
+import {
+	createAnalyticsEnabledStorageItem,
+	createAnalyticsUserIdStorageItem,
+	createAnalyticsUserPropertiesStorageItem,
+} from "@/lib/storage/amgState";
 
 import pkg from "../package.json";
 
@@ -12,15 +17,9 @@ export default defineAppConfig({
 				measurementId: "G-XWT0HYT2KT",
 			}),
 		],
-		enabled: storage.defineItem("local:analytics-enabled", {
-			fallback: true,
-		}),
-		userId: storage.defineItem<string | undefined>("local:amg-user-id-key", {
-			fallback: crypto.randomUUID().toString(),
-		}),
-		userProperties: storage.defineItem("local:amg-user-properties-key", {
-			fallback: {},
-		}),
+		enabled: createAnalyticsEnabledStorageItem(),
+		userId: createAnalyticsUserIdStorageItem(),
+		userProperties: createAnalyticsUserPropertiesStorageItem(),
 	},
 	version: pkg.version.toString(),
 });

src/entrypoints/background.ts

@@ -1,3 +1,10 @@
+import {
+	getDomainActive,
+	migrateLegacyState,
+	setDomainActive,
+	setPlatformInfoState,
+} from "@/lib/storage/amgState";
+
 const IconOff = {
 	16: "icons/icon-off-16.png",
 	32: "icons/icon-off-32.png",
@@ -19,23 +26,23 @@ export default defineBackground(() => {
 			captureHandler(sender.tab);
 		} else if (event.type === "EXTENSION_TOGGLE") {
 			const { domain, isActive } = event.payload;
-			browser.storage?.local.set({
-				[domain]: isActive,
-			});
+			await setDomainActive(domain, isActive);
 			setIcon(isActive);
 		}
 	});
 
 	browser.runtime.onInstalled.addListener(async ({ reason }) => {
 		console.log(`Extension installed, reason: ${reason}, browser: ${import.meta.env.BROWSER}`);
 
-		savePlatformInfo();
+		await migrateLegacyState();
+		await savePlatformInfo();
 		analytics.setEnabled(true);
 		void updateIconForActiveTab();
 	});
 
 	browser.runtime.onStartup.addListener(async () => {
 		console.log("Extension started");
+		await migrateLegacyState();
 		void updateIconForActiveTab();
 	});
 
@@ -62,7 +69,7 @@ export default defineBackground(() => {
 
 async function savePlatformInfo() {
 	const platformInfo = await browser.runtime.getPlatformInfo();
-	void browser.storage.local.set({ platformInfo: platformInfo });
+	await setPlatformInfoState(platformInfo);
 }
 
 /**
@@ -95,8 +102,7 @@ async function getCurrentDomain(tabId?: number): Promise<string | null> {
  */
 async function isDomainActive(domain: string): Promise<boolean> {
 	try {
-		const result = await browser.storage.local.get([domain]);
-		return Boolean(result[domain]);
+		return await getDomainActive(domain);
 	} catch (error) {
 		console.error("Failed to check domain state:", error);
 		return true;

src/lib/modules/ExtenstionSettings/App.svelte

@@ -6,6 +6,7 @@
 		createMessageHandler,
 		sendMessage,
 	} from "@/lib/core/MessageBus";
+	import { getDomainActive } from "@/lib/storage/amgState";
 	import { Switch } from "@ark-ui/svelte/switch";
 	import { browser } from "wxt/browser";
 	import "./app.css";
@@ -42,11 +43,7 @@
 				const url = new URL(tab.url);
 				domain = url.host;
 
-				const result = await browser.storage?.local.get([domain]);
-				const value = result?.[domain];
-				if (result !== undefined) {
-					isActive = typeof value === "boolean" ? value : false;
-				}
+				isActive = await getDomainActive(domain);
 			}
 
 			if (isActive === undefined) {