nobkd · nobkd · Apr 22, 2023 · Apr 19, 2023 · Apr 19, 2023 · Apr 20, 2023
diff --git a/public/manifest.json b/public/manifest.json
@@ -36,5 +36,8 @@
         },
         "default_area": "navbar",
         "default_title": "Replace Maps"
+    },
+    "options_ui": {
+        "page": "options.html"
     }
 }
diff --git a/public/trash.svg b/public/trash.svg
diff --git a/src/bg/action.ts b/src/bg/action.ts
@@ -1,6 +1,5 @@
 import { browserAction, webNavigation, type Tabs, tabs } from 'webextension-polyfill';
 import { getHostname, invertHostState } from './utils/storage';
-import { updateIcon } from './utils/actionIcon';
 import { matcher, runtimeMapUrl } from './bg';
 
 const replacedUrlMatcher = new RegExp(`^${runtimeMapUrl}\?`);
@@ -11,8 +10,6 @@ browserAction.onClicked.addListener(async (tab: Tabs.Tab) => {
     let hostname = getHostname(tab.url);
     await invertHostState(hostname);
 
-    updateIcon(hostname);
-
     let frames = (await webNavigation.getAllFrames({ tabId: tab.id })) ?? [];
 
     // matches osm frames (just reloading the frame ist not working for some reason, so in case of replaced maps the whole tab is reloaded)

diff --git a/src/bg/utils/storage.ts b/src/bg/utils/storage.ts
@@ -1,4 +1,5 @@
 import { storage } from 'webextension-polyfill';
+import { updateIcon } from './actionIcon';
 
 export const KEY_DISABLED_HOSTS = 'disabled_hosts';
 
@@ -23,10 +24,12 @@ export async function invertHostState(hostname: string): Promise<void> {
     await storage.local.set({
         [KEY_DISABLED_HOSTS]: disabledHosts,
     });
+
+    updateIcon(hostname);
 }
 
 export function getHostname(url: string): string {
     url = url.replace(/^\w+:\/\//, '');
-    url = url.split(/[\/#]/, 1)[0];
+    url = url.split(/[\/#\?]/, 1)[0];
     return url;
 }
diff --git a/src/map.html b/src/map.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="/map-normalize.css" />
+        <link rel="stylesheet" href="/styles/map.css" />
         <link rel="stylesheet" href="/leaflet.css" />
         <title>Leaflet Map</title>
     </head>

diff --git a/src/options.html b/src/options.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="dark light" />
+        <link rel="stylesheet" href="/styles/options.css" />
+        <script src="/options/options.ts" type="module"></script>
+        <title>Replace Maps Options</title>
+    </head>
+    <body>
+        <section class="form">
+            <form action="">
+                <input
+                    type="text"
+                    pattern="^([^\s\.\?#]+\.)+[^\s\.\?#]+$"
+                    placeholder="(sub.)domain.tld"
+                    name="hostname"
+                    id="hostname"
+                    required />
+                <input type="submit" value="Disable" />
+            </form>
+        </section>
+        <section class="table"></section>
+    </body>
+</html>
diff --git a/src/options/options.ts b/src/options/options.ts
@@ -0,0 +1,68 @@
+import { storage } from 'webextension-polyfill';
+import {
+    KEY_DISABLED_HOSTS,
+    disabledHosts,
+    getHostname,
+    invertHostState,
+} from '../bg/utils/storage';
+
+const table = document.querySelector('.table')!;
+
+function buildEntries() {
+    table.innerHTML = '';
+    disabledHosts.forEach(createEntry);
+}
+
+async function addEntry() {
+    const search = new URLSearchParams(document.location.search);
+    let hostname = search.get('hostname');
+    if (hostname === null) return;
+
+    hostname = getHostname(hostname);
+    if (disabledHosts.includes(hostname)) return;
+
+    await invertHostState(hostname);
+    createEntry(hostname);
+}
+
+function createEntry(hostname: string) {
+    const div = document.createElement('div');
+
+    let span = document.createElement('span');
+    span.innerText = hostname;
+
+    let button = document.createElement('button');
+    button.onclick = removeEntry;
+
+    div.append(span, button);
+    table.appendChild(div);
+}
+
+async function removeEntry(click: MouseEvent) {
+    let target: EventTarget | null = click.target;
+    if (target === null) return;
+
+    let index = getIndex(target as HTMLButtonElement);
+    if (index === -1) return;
+
+    await invertHostState(disabledHosts[index]);
+}
+
+function getIndex(button: HTMLButtonElement) {
+    let div: HTMLDivElement = button.parentElement as HTMLDivElement;
+    if (div === null) return -1;
+
+    let index = Array.from(table.children).indexOf(div);
+    div.remove();
+
+    return index;
+}
+
+storage.local.onChanged.addListener((changes) => {
+    if (KEY_DISABLED_HOSTS in changes) {
+        buildEntries();
+    }
+});
+
+buildEntries();
+addEntry();
diff --git a/src/map-normalize.css → src/styles/map.css b/src/map-normalize.css → src/styles/map.css
diff --git a/src/styles/options.css b/src/styles/options.css
@@ -0,0 +1,95 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --text: black;
+    --bg: white;
+
+    --table-even: #e3e2eb;
+    --table-odd: #c3c2cb;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: #ccc;
+        --bg: #1c1b22;
+
+        --table-even: #53525b;
+        --table-odd: #33323b;
+    }
+}
+
+body {
+    width: calc(100vw - (100vw - 100%));
+    min-height: 100vh;
+
+    color: var(--text);
+    background-color: var(--bg);
+
+    gap: 0.5rem;
+}
+
+body > section {
+    padding: 0.5rem;
+    gap: 0.25rem;
+    display: grid;
+}
+
+.table > * {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+}
+
+.table > :nth-child(even) {
+    background-color: var(--table-even);
+}
+
+.table > :nth-child(odd) {
+    background-color: var(--table-odd);
+}
+
+.table button {
+    padding: 0.1rem;
+    width: 2rem;
+    height: 2rem;
+}
+
+.table button::before {
+    display: block;
+    content: url('/trash.svg');
+    width: 100%;
+    height: 100%;
+}
+
+.form {
+    position: sticky;
+    top: 0;
+    background-color: var(--bg);
+    box-shadow: var(--text) 0 0 0.25rem;
+}
+
+form {
+    display: flex;
+    box-sizing: border-box;
+    gap: 0.5rem;
+}
+
+input {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    border-style: solid;
+}
+
+input[type='text'] {
+    width: 80%;
+}
+input[type='submit'] {
+    width: 20%;
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
             input: {
                 bg: normalizePath(resolve(__dirname, 'src/bg.html')),
                 map: normalizePath(resolve(__dirname, 'src/map.html')),
+                opt: normalizePath(resolve(__dirname, 'src/options.html')),
             },
         },
     },