feature: per-document settings

src/docs.ts

@@ -37,6 +37,7 @@ import {
     removeElement,
     setStorage,
     setStyleProperty,
+    getDocumentID,
 } from "./util";
 
 const browser_ns = getBrowserNamespace();
@@ -55,6 +56,9 @@ class DocsAfterDark {
 
         // Update extensionData with saved data (or use default values)
 
+        if (data.disabled_documents !== undefined) {
+            this.extensionData.disabled_documents = data.disabled_documents;
+        }
         if (data.mode !== undefined) {
             this.extensionData.mode = data.mode;
         }
@@ -185,6 +189,12 @@ class DocsAfterDark {
                 message.color as AccentColorOptions;
         }
 
+        if (message.type == "setDocumentEnabled") {
+            if (!message.enabled) {           
+                this.removeExtension();
+            }
+        }
+
         this.updateExtension();
     };
 
@@ -332,10 +342,19 @@ class DocsAfterDark {
         }
     }
 
-    private updateExtension() {
+    private async updateExtension() {
         // Always update version, regardless of extension mode
         this.updateVersion();
 
+        // Do not continue if this document is disabled
+        // We have to pull extensiondata for this again; this will cause a performance hit
+        // Currently this does not propagate On -> Off to other tabs
+        var newExtensionData = await getExtensionData();
+        if (newExtensionData.disabled_documents.indexOf(getDocumentID(window.location.href), 0) > -1) {
+            Logger.debug('updateExtension called but document is in disabled list');
+            return;
+        }
+
         // Do not continue update if extension is off
         if (!this.updateMode()) {
             return;

src/popup.html

@@ -54,6 +54,33 @@ <h1>DocsAfterDark Settings</h1>
                 </div>
             </div>
 
+            <div class="category">
+                <div class="categoryContent">
+                     <div class="section">
+                        <div class="sectionContent">
+                            <div class="checkboxRow">
+                                <label
+                                    class="checkboxButton"
+                                    for="documentEnabled"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        id="documentEnabled"
+                                        name="documentEnabled"
+                                        enabled
+                                    />
+
+                                    <span class="checkbox"></span>
+                                    <span class="content">
+                                        <span>Enable for this document</span>
+                                    </span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="category">
                 <div class="categoryContent">
                     <div class="section">

src/popup.ts

@@ -9,6 +9,7 @@ import {
 } from "./types";
 import {
     getBrowserNamespace,
+    getDocumentID,
     getExtensionData,
     messageTabs,
     setStorage,
@@ -421,6 +422,71 @@ class BorderComponent extends StateSubscriber {
     }
 }
 
+class EnabledComponent extends StateSubscriber {
+    private enabledCheckbox = document.querySelector(
+        "#documentEnabled"
+    ) as HTMLInputElement;
+
+    private layout_elements = document.querySelectorAll(
+        '.category'
+    ) as NodeListOf<HTMLElement>;
+
+    private getActiveURL = async (): Promise<string> => {
+        const [tab] = await browser_ns.tabs.query({active: true, lastFocusedWindow: true});
+        return tab?.url ?? "";
+    }
+
+    initialize(): void {
+        this.enabledCheckbox.addEventListener("click", async () => {
+            var checked = this.enabledCheckbox.checked;            
+            var disabled_documents = this.state.getData().disabled_documents;
+            var document_id = getDocumentID(await this.getActiveURL());
+
+            if (checked) {
+                // enabled
+                const index = disabled_documents.indexOf(document_id, 0);
+                if (index > -1) disabled_documents.splice(index, 1);
+                messageTabs<MessagePayload>({
+                    type: "setDocumentEnabled",
+                    enabled: true,
+                });
+            } else {
+                // disabled
+                disabled_documents.push(document_id);
+                messageTabs<MessagePayload>({
+                    type: "setDocumentEnabled",
+                    enabled: false,
+                });
+            }
+
+            this.state.setData({disabled_documents: disabled_documents});
+        });
+    }
+
+    async update(newData: ExtensionData): Promise<void> {
+        var disabled_documents = newData.disabled_documents;
+        var document_id = getDocumentID(await this.getActiveURL());
+
+        if (disabled_documents.indexOf(document_id, 0) > -1) {
+            // disabled
+            this.enabledCheckbox.checked = false;
+
+            this.layout_elements.forEach((el, i) => {
+                if(i==0) return;
+                el.classList.add('disabled');
+            })
+        } else {
+            // enabled
+            this.enabledCheckbox.checked = true;
+
+            this.layout_elements.forEach((el, i) => {
+                if(i==0) return;
+                el.classList.remove('disabled');
+            })
+        }
+    }
+}
+
 class ButtonComponent extends StateSubscriber {
     private showButtonCheckbox = document.querySelector(
         "#showButton"
@@ -596,6 +662,7 @@ class LinkManager {
 }
 
 class Popup extends PopupState {
+    private enabledComponent: EnabledComponent = new EnabledComponent(this);
     private modeComponent: ModeComponent = new ModeComponent(this);
     private darkModeComponent: DarkModeComponent = new DarkModeComponent(this);
     private spectrumComponent: SpectrumComponent = new SpectrumComponent(this);
@@ -621,6 +688,7 @@ class Popup extends PopupState {
         const extensionData = await getExtensionData();
         this.setData(extensionData);
 
+        this.enabledComponent.initialize();
         this.modeComponent.initialize();
         this.darkModeComponent.initialize();
         this.spectrumComponent.initialize();

src/scss/popup/_generic.scss

@@ -5,6 +5,7 @@
 .disabled {
     opacity: 0.25;
     cursor: not-allowed;
+    pointer-events: none;
 }
 
 .flexRow {

src/types.ts

@@ -87,6 +87,7 @@ type ExtensionData = {
     invert_mode: InvertMode;
 
     show_border: boolean;
+    disabled_documents: Array<string>;
 
     accent_color: AccentColorOptions;
     button_options: ButtonOptions;
@@ -125,7 +126,8 @@ type StorageListener = (
 
 interface MessagePayload {
     type: string;
-    color: AccentColorOptions;
+    color?: AccentColorOptions;
+    enabled?: boolean;
 }
 
 type MessageListener = (
@@ -143,11 +145,13 @@ interface ListenerFunctions<T> {
 interface QueryInfo {
     active?: boolean;
     currentWindow?: boolean;
+    lastFocusedWindow?: boolean;
 }
 
 interface Tab {
     active: boolean;
     id?: number;
+    url?: string;
 }
 
 interface CreateProperties {

src/util.ts

@@ -168,6 +168,7 @@ async function getExtensionData(): Promise<ExtensionData> {
         "doc_bg",
         "custom_bg",
         "show_border",
+        "disabled_documents",
         "accent_color",
         "button_options",
         "invert_enabled",
@@ -215,6 +216,22 @@ function removeClassFromHTML(...classes: string[]): void {
     );
 }
 
+function getDocumentID(url: string) {
+    return url?.split('/document/d/')[1]?.split('/')[0] ?? url;
+}
+
+async function isDisabledDocument(url: string): Promise<boolean> {
+    var data = await getExtensionData();
+    var document_id = getDocumentID(url);
+    if (data.disabled_documents?.includes(document_id)) return true;
+    return false;
+}
+
+async function getActiveURL(): Promise<string> {
+    const [tab] = await browser_ns.tabs.query({active: true, lastFocusedWindow: true});
+    return tab?.url ?? "";
+}
+
 function isOnHomepage(): boolean {
     return document.querySelector(".docs-homescreen-gb-container") != null;
 }
@@ -305,6 +322,9 @@ export {
     addClassToHTML,
     removeClassFromHTML,
     isOnHomepage,
+    isDisabledDocument,
+    getActiveURL,
+    getDocumentID,
     getElementId,
     removeElement,
     hasElement,

src/values.ts

@@ -96,6 +96,7 @@ const defaultExtensionData: ExtensionData = {
     },
 
     show_border: true,
+    disabled_documents: [],
 
     version: {
         last_version: "",