refactor storage. add automatic redirect config

Author: MaddyUnderStars

package-lock.json

@@ -2,8 +2,6 @@
 	"devDependencies": {
 		"@types/firefox": "^0.0.34",
 		"@types/firefox-webext-browser": "^111.0.4",
-		"@types/react": "^18.2.37",
-		"@types/react-dom": "^18.2.15",
 		"esbuild": "^0.19.5",
 		"typescript": "^5.2.2",
 		"web-ext": "^7.8.0",
@@ -19,5 +17,8 @@
 	},
 	"author": "MaddyUnderStars",
 	"license": "AGPL-3.0-or-later",
-	"description": "Redirect fediverse links to your home instance"
+	"description": "Redirect fediverse links to your home instance",
+	"dependencies": {
+		"deepmerge": "^4.3.1"
+	}
 }

package.json

@@ -67,13 +67,13 @@ <h3>Mastodon</h3>
 			</div>
 		</div>
 
-		<!-- <div class="section">
+		<div class="section">
 			<h2>Settings</h2>
-			<form>
+			<form id="settings">
 				<label for="automatic_redirects">Automatically redirect:</label>
 				<input type="checkbox" name="automatic_redirects" id="automatic_redirects">
 			</form>
-		</div> -->
+		</div>
 	</div>
 
 	<dialog id="code_dialog">

public/settings.html

@@ -1,6 +1,5 @@
 import { getHandlersForUrl } from "./lib/index";
-import { RedirectSettings } from "./types/mastodon";
-import { validateUrl } from "./utils";
+import { getSettings, validateUrl } from "./utils";
 
 const handler = async () => {
 	const tab = (
@@ -16,10 +15,11 @@ const handler = async () => {
 
 	const handler = handlers[0];
 
-	const opts = (await browser.storage.local.get())[
-		handler.type
-	] as RedirectSettings;
-	if (new URL(opts.instance).origin == url.origin) return;
+	const opts = await getSettings();
+	if (!opts.automatic_redirects) return;
+	const handleropts = opts.handlers?.[handler.type];
+	if (!handleropts?.instance) return;
+	if (new URL(handleropts.instance).origin == url.origin) return;
 
 	const post = await handler.findRemote(url);
 

src/background.ts

@@ -1,8 +1,5 @@
-import {
-	MastodonApplication,
-	MastodonSearchResults,
-	RedirectSettings,
-} from "../types/mastodon";
+import { MastodonApplication, MastodonSearchResults } from "../types/mastodon";
+import { getSettings } from "../utils";
 import { Handler } from "./index";
 
 const MASTODON_REDIRECT_URI = "urn:ietf:wg:oauth:2.0:oob";
@@ -34,8 +31,8 @@ const makeAuthUrl = (instance: URL, app: MastodonApplication) => {
 };
 
 const findRemote = async (url: URL) => {
-	const opts = (await browser.storage.local.get())
-		.mastodon as RedirectSettings;
+	const opts = (await getSettings())?.handlers?.mastodon;
+	if (!opts?.instance) return;
 	const requrl = new URL(opts.instance);
 	requrl.pathname = "/api/v2/search";
 	requrl.searchParams.append("q", url.toString());

src/lib/mastodon.ts

@@ -1,6 +1,5 @@
 import handlers from "../lib/index";
-import { RedirectSettings } from "../types/mastodon";
-import { validateUrl } from "../utils";
+import { getSettings, setSettings, validateUrl } from "../utils";
 
 let currentlyHandling: string;
 const dialog = document.getElementById("code_dialog") as HTMLDialogElement;
@@ -19,13 +18,15 @@ const handler = async (event: SubmitEvent) => {
 
 	const app = await handler.createApp(instance);
 
-	await browser.storage.local.set({
-		[handler.type]: {
-			code: undefined,
-			instance: instance.toString(),
-			client_id: app.client_id,
-			client_secret: app.client_secret,
-		} as RedirectSettings,
+	await setSettings({
+		handlers: {
+			[handler.type]: {
+				code: undefined,
+				instance: instance.toString(),
+				client_id: app.client_id,
+				client_secret: app.client_secret,
+			},
+		},
 	});
 
 	currentlyHandling = handler.type;
@@ -36,17 +37,17 @@ const handler = async (event: SubmitEvent) => {
 	});
 };
 
-const forms = document.querySelectorAll(
+const handlerforms = document.querySelectorAll(
 	".handler form",
 ) as NodeListOf<HTMLFormElement>;
-[...forms].forEach(async (x) => {
+[...handlerforms].forEach(async (x) => {
 	x.addEventListener("submit", handler);
 
-	const opts = (await browser.storage.local.get())[
+	const opts = (await getSettings())?.handlers?.[
 		x.getAttribute("data-type")!
-	] as RedirectSettings;
+	];
 
-	if (opts.instance)
+	if (opts?.instance)
 		(x.elements.namedItem("url") as HTMLInputElement).value = opts.instance;
 });
 
@@ -55,17 +56,36 @@ document
 	.addEventListener("submit", async (event) => {
 		event.preventDefault();
 
-		const opts = (await browser.storage.local.get())[
-			currentlyHandling
-		] as RedirectSettings;
+		const opts = (await getSettings())?.handlers?.[currentlyHandling];
 
 		const data = new FormData(event.target as HTMLFormElement);
-		await browser.storage.local.set({
-			[currentlyHandling]: {
-				...opts,
-				code: data.get("code"),
-			} as RedirectSettings,
+		await setSettings({
+			handlers: {
+				[currentlyHandling]: {
+					code: data.get("code")?.toString(),
+				},
+			},
 		});
 
 		dialog.close();
 	});
+
+const settings = document.querySelectorAll(
+	"#settings input",
+) as NodeListOf<HTMLInputElement>;
+[...settings].forEach(async (x) => {
+	const key = x.getAttribute("name");
+	if (!key) return alert("you forgot to set the input name");
+
+	(x as HTMLInputElement).addEventListener("change", async (event) => {
+		const target = event.target as HTMLInputElement;
+		let value: string | boolean = target.value;
+		if (target.getAttribute("type") == "checkbox") value = target.checked;
+		await setSettings({ [key]: value });
+	});
+
+	const settings = await getSettings();
+	const value = settings[key as keyof typeof settings]; // silly
+	if (x.getAttribute("type") == "checkbox") x.checked = value as boolean;
+	else x.value = value as any as string;
+});

src/settings/index.ts

@@ -0,0 +1,2 @@
+export * from "./mastodon";
+export * from "./settings";

src/types/index.ts

@@ -8,13 +8,6 @@ export type MastodonApplication = {
 	vapid_key: string;
 };
 
-export type RedirectSettings = Partial<{
-	code: string;
-	instance: string;
-	client_id: string;
-	client_secret: string;
-}>;
-
 export type MastodonStatus = {
 	id: string;
 	url: string;

src/types/mastodon.ts

@@ -0,0 +1,11 @@
+export type HandlerSettings = Partial<{
+	code: string;
+	instance: string;
+	client_id: string;
+	client_secret: string;
+}>;
+
+export type ExtensionSettings = Partial<{
+	automatic_redirects: boolean;
+	handlers: { [key: string]: HandlerSettings };
+}>;

src/types/settings.ts

@@ -1,3 +1,6 @@
+import merge from "deepmerge";
+import { ExtensionSettings } from "./types";
+
 export const validateUrl = (url: string | undefined | null) => {
 	if (!url) return undefined;
 	try {
@@ -6,3 +9,12 @@ export const validateUrl = (url: string | undefined | null) => {
 		return undefined;
 	}
 };
+
+export const getSettings = async (): Promise<ExtensionSettings> => {
+	return await browser.storage.local.get();
+};
+
+export const setSettings = async (settings: Partial<ExtensionSettings>) => {
+	const old = await getSettings();
+	await browser.storage.local.set(merge(old, settings));
+};