feat: disable hosts from options, update options

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)

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;
 }

src/options.html

@@ -14,17 +14,14 @@
             <form action="">
                 <input
                     type="text"
-                    pattern="^\S+\.[^\s\.]+$"
+                    pattern="^([^\s\.\?#]+\.)+[^\s\.\?#]+$"
                     placeholder="(sub.)domain.tld"
                     name="hostname"
                     id="hostname"
                     required />
                 <input type="submit" value="Disable" />
             </form>
         </section>
-        <section class="table">
-            <div><span>test</span><button></button></div>
-            <div><span>test</span><button></button></div>
-        </section>
+        <section class="table"></section>
     </body>
 </html>

src/options/options.ts

@@ -1,21 +1,63 @@
-import { disabledHosts, invertHostState } from '../bg/utils/storage';
+import { storage } from 'webextension-polyfill';
+import { KEY_DISABLED_HOSTS, disabledHosts, getHostname, invertHostState } from '../bg/utils/storage';
 
-const table = document.querySelector('.table');
+const table = document.querySelector('.table')!;
 
-function tableEntries() {
-    const tableItems: HTMLDivElement[] = disabledHosts.map(createEntry);
-    tableItems.forEach((div) => table?.insertAdjacentElement('beforeend', div));
+function buildEntries() {
+    table.innerHTML = '';
+    disabledHosts.forEach(createEntry);
 }
 
-function createEntry(entryText: string, index: number): HTMLDivElement {
+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');
-    div.innerHTML = `<span>${entryText}</span><button onclick="removeEntry(${index})"></button>`;
-    return div;
+
+    let span = document.createElement('span');
+    span.innerText = hostname;
+
+    let button = document.createElement('button');
+    button.onclick = removeEntry;
+
+    div.append(span, button);
+    table.appendChild(div);
 }
 
-// TODO: function shouldn't be removed (because 'unused')
-function removeEntry(index: number) {
-    invertHostState(disabledHosts[index]).then(() => document.location.reload());
+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;
 }
 
-tableEntries();
+storage.local.onChanged.addListener((changes) => {
+    if (KEY_DISABLED_HOSTS in changes) {
+        buildEntries();
+    }
+});
+
+buildEntries();
+addEntry();