PoC handle navigation centrally

Author: jonathanKingston

injected/src/config-feature.js

@@ -29,6 +29,13 @@ export default class ConfigFeature {
         }
     }
 
+    /**
+     * @param {Site} site
+     */
+    urlChanged(site) {
+        this.#args.site = site;
+    }
+
     get args() {
         return this.#args;
     }

injected/src/content-feature.js

@@ -30,6 +30,7 @@ export default class ContentFeature extends ConfigFeature {
     #messaging;
     /** @type {boolean} */
     #isDebugFlagSet = false;
+    listenForUrlChanges = false;
 
     /** @type {ImportMeta} */
     #importConfig;

injected/src/content-scope-features.js

@@ -2,6 +2,7 @@ import { initStringExemptionLists, isFeatureBroken, isGloballyDisabled, platform
 import { platformSupport } from './features';
 import { PerformanceMonitor } from './performance';
 import platformFeatures from 'ddg:platformFeatures';
+import { registerForURLChanges } from './url-change';
 
 let initArgs = null;
 const updates = [];
@@ -74,6 +75,9 @@ export async function init(args) {
     resolvedFeatures.forEach(({ featureInstance, featureName }) => {
         if (!isFeatureBroken(args, featureName) || alwaysInitExtensionFeatures(args, featureName)) {
             featureInstance.callInit(args);
+            if (featureInstance.listenForUrlChanges) {
+                registerForURLChanges((args) => featureInstance.urlChanged(args));
+            }
         }
     });
     // Fire off updates that came in faster than the init

injected/src/features/autofill-password-import.js

@@ -34,6 +34,7 @@ export const DELAY_BEFORE_ANIMATION = 300;
  * 3. Animate the element, or tap it if it should be autotapped.
  */
 export default class AutofillPasswordImport extends ContentFeature {
+    listenForUrlChanges = true;
     #exportButtonSettings;
 
     #settingsButtonSettings;
@@ -490,23 +491,15 @@ export default class AutofillPasswordImport extends ContentFeature {
         this.#settingsButtonSettings = this.getFeatureSetting('settingsButton');
     }
 
+    urlChanged(site) {
+        this.handlePath();
+        super.urlChanged(site)
+    }
+
     init() {
         this.setButtonSettings();
 
         const handlePath = this.handlePath.bind(this);
-        const historyMethodProxy = new DDGProxy(this, History.prototype, 'pushState', {
-            async apply(target, thisArg, args) {
-                const path = args[1] === '' ? args[2].split('?')[0] : args[1];
-                await handlePath(path);
-                return DDGReflect.apply(target, thisArg, args);
-            },
-        });
-        historyMethodProxy.overload();
-        // listen for popstate events in order to run on back/forward navigations
-        window.addEventListener('popstate', async () => {
-            const path = window.location.pathname;
-            await handlePath(path);
-        });
 
         this.#domLoaded = new Promise((resolve) => {
             if (document.readyState !== 'loading') {

injected/src/features/element-hiding.js

@@ -302,6 +302,7 @@ function forgivingSelector(selector) {
 }
 
 export default class ElementHiding extends ContentFeature {
+    listenForUrlChanges = true;
     init() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         featureInstance = this;
@@ -360,19 +361,12 @@ export default class ElementHiding extends ContentFeature {
         } else {
             applyRules(activeRules);
         }
-        // single page applications don't have a DOMContentLoaded event on navigations, so
-        // we use proxy/reflect on history.pushState to call applyRules on page navigations
-        const historyMethodProxy = new DDGProxy(this, History.prototype, 'pushState', {
-            apply(target, thisArg, args) {
-                applyRules(activeRules);
-                return DDGReflect.apply(target, thisArg, args);
-            },
-        });
-        historyMethodProxy.overload();
-        // listen for popstate events in order to run on back/forward navigations
-        window.addEventListener('popstate', () => {
-            applyRules(activeRules);
-        });
+        this.activeRules = activeRules;
+    }
+
+    urlChanged(site) {
+        this.applyRules(this.activeRules);
+        super.urlChanged(site)
     }
 
     /**

injected/src/url-change.js

@@ -0,0 +1,36 @@
+import { DDGProxy, DDGReflect, computeLimitedSiteObject } from './utils.js';
+
+const urlChangeListeners = new Set();
+/**
+ * Register a listener to be called when the URL changes.
+ * @param {function} listener
+ */
+export function registerForURLChanges(listener) {
+    if (urlChangeListeners.size === 0) {
+        listenForURLChanges();
+    }
+    urlChangeListeners.add(listener);
+}
+
+function handleURLChange() {
+    const site = computeLimitedSiteObject();
+    for (const listener of urlChangeListeners) {
+        listener.urlChanged(site);
+    }
+}
+
+function listenForURLChanges() {
+    // single page applications don't have a DOMContentLoaded event on navigations, so
+    // we use proxy/reflect on history.pushState to call applyRules on page navigations
+    const historyMethodProxy = new DDGProxy(this, History.prototype, 'pushState', {
+        apply(target, thisArg, args) {
+            handleURLChange();
+            return DDGReflect.apply(target, thisArg, args);
+        },
+    });
+    historyMethodProxy.overload();
+    // listen for popstate events in order to run on back/forward navigations
+    window.addEventListener('popstate', () => {
+        handleURLChange();
+    });
+}