Merge pull request #1330 from bershanskiy/history

Use Navigation API when available

src/background.ts

@@ -23,14 +23,37 @@ if (utils.isFirefox()) {
     });
 } 
 
-chrome.tabs.onUpdated.addListener(function(tabId) {
+function onTabUpdatedListener(tabId: number) {
-	chrome.tabs.sendMessage(tabId, {
+    chrome.tabs.sendMessage(tabId, {
         message: 'update',
-	}, () => void chrome.runtime.lastError ); // Suppress error on Firefox
+    }, () => void chrome.runtime.lastError ); // Suppress error on Firefox
+}
+
+function onNavigationApiAvailableChange(changes: {[key: string]: chrome.storage.StorageChange}) {
+    if (changes.navigationApiAvailable) {
+        if (changes.navigationApiAvailable.newValue) {
+            chrome.tabs.onUpdated.removeListener(onTabUpdatedListener);
+        } else {
+            chrome.tabs.onUpdated.addListener(onTabUpdatedListener);
+        }
+    }
+}
+
+// If Navigation API is not supported, then background has to inform content script about video change.
+// This happens on Safari, Firefox, and Chromium 101 (inclusive) and below.
+chrome.tabs.onUpdated.addListener(onTabUpdatedListener);
+utils.wait(() => Config.local !== null).then(() => {
+    if (Config.local.navigationApiAvailable) {
+        chrome.tabs.onUpdated.removeListener(onTabUpdatedListener);
+    }
 });
 
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+if (!Config.configSyncListeners.includes(onNavigationApiAvailableChange)) {
-	switch(request.message) {
+        Config.configSyncListeners.push(onNavigationApiAvailableChange);
+}
+
+chrome.runtime.onMessage.addListener(function (request, _, callback) {
+    switch(request.message) {
         case "openConfig":
             chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))});
             return;
@@ -61,7 +84,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         case "unregisterContentScript": 
             unregisterFirefoxContentScript(request.id)
             return false;
-	}
+    }
 });
 
 //add help page on install

src/config.ts

@@ -102,9 +102,11 @@ export type VideoDownvotes = { segments: { uuid: HashedValue, hidden: SponsorHid
 interface SBStorage {
     /* VideoID prefixes to UUID prefixes */
     downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
+    navigationApiAvailable: boolean,
 }
 
 export interface SBObject {
+    configLocalListeners: Array<(changes: StorageChangesObject) => unknown>;
     configSyncListeners: Array<(changes: StorageChangesObject) => unknown>;
     syncDefaults: SBConfig;
     localDefaults: SBStorage;
@@ -121,6 +123,7 @@ const Config: SBObject = {
     /**
      * Callback function when an option is updated
      */
+    configLocalListeners: [],
     configSyncListeners: [],
     syncDefaults: {
         userID: null,
@@ -285,7 +288,8 @@ const Config: SBObject = {
         }
     },
     localDefaults: {
-        downvotedSegments: {}
+        downvotedSegments: {},
+        navigationApiAvailable: null
     },
     cachedSyncConfig: null,
     cachedLocalStorage: null,
@@ -312,6 +316,10 @@ function configProxy(): { sync: SBConfig, local: SBStorage } {
             for (const key in changes) {
                 Config.cachedLocalStorage[key] = changes[key].newValue;
             }
+
+            for (const callback of Config.configLocalListeners) {
+                callback(changes);
+            }
         }
     });
 

src/content.ts

@@ -2204,3 +2204,18 @@ function checkForPreloadedSegment() {
         Config.forceSyncUpdate("unsubmittedSegments");
     }
 }
+
+// Register listener for URL change via Navigation API
+const navigationApiAvailable = "navigation" in window;
+if (navigationApiAvailable) {
+    // TODO: Remove type cast once type declarations are updated
+    (window as unknown as { navigation: EventTarget }).navigation.addEventListener("navigate", () => videoIDChange(getYouTubeVideoID(document)));
+}
+
+// Record availability of Navigation API
+utils.wait(() => Config.local !== null).then(() => {
+    if (Config.local.navigationApiAvailable !== navigationApiAvailable) {
+        Config.local.navigationApiAvailable = navigationApiAvailable;
+        Config.forceLocalUpdate("navigationApiAvailable");
+    }
+});