Use pollyfill for invidious registration

Fix #798

manifest/manifest.json

@@ -84,7 +84,8 @@
         "https://sponsor.ajay.app/*"
     ],
     "optional_permissions": [
-        "*://*/*"
+        "*://*/*",
+        "webNavigation"
     ],
     "browser_action": {
         "default_title": "SponsorBlock",

package-lock.json

@@ -28,6 +28,7 @@
       "license": "LGPL-3.0-or-later",
       "dependencies": {
         "@ajayyy/maze-utils": "^1.0.3",
+        "content-scripts-register-polyfill": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -4286,6 +4287,19 @@
         "url": "https://github.com/yeoman/configstore?sponsor=1"
       }
     },
+    "node_modules/content-scripts-register-polyfill": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2.tgz",
+      "integrity": "sha512-8hDm+tu3BkxHZP7EUIIIo/495F6QNXF7cI9Lwr4PQaiohw2wWmi9k2SE4W4kNrAaLnFw6RZ2ev8EmrQb+sCoGQ==",
+      "dependencies": {
+        "webext-content-scripts": "^2.5.2",
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -12811,6 +12825,48 @@
         "node": ">= 8"
       }
     },
+    "node_modules/webext-content-scripts": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/webext-content-scripts/-/webext-content-scripts-2.5.2.tgz",
+      "integrity": "sha512-N1Xq/E8dx0lVAOyPquuo+2Vj9Fx1GoqCFo79lWeJHbemaBJ53N3BHBmbJJYsQ8FOP1xiwN4bPRQY2dpSjHAD3Q==",
+      "dependencies": {
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
+    "node_modules/webext-patterns": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/webext-patterns/-/webext-patterns-1.3.0.tgz",
+      "integrity": "sha512-X9HMnic9ZtvSFKi2cdh0l+sxyj7f9oLedaa2JfxjnyEqGBz8OJjaHQ40jmraX1DJLTHOpqr+rCz1r3MW2+doUg==",
+      "dependencies": {
+        "escape-string-regexp": "^5.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
+    "node_modules/webext-patterns/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webext-polyfill-kinda": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/webext-polyfill-kinda/-/webext-polyfill-kinda-1.0.0.tgz",
+      "integrity": "sha512-Py/d3w/bC0KntuO60ePSWHsdrebZ3uYBLeFUjyPkDV3yTEQib0MRFvPh57t8XjImu4ylBoEAsFjzh/r22UtxMw==",
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -16550,6 +16606,16 @@
         "xdg-basedir": "^5.0.1"
       }
     },
+    "content-scripts-register-polyfill": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2.tgz",
+      "integrity": "sha512-8hDm+tu3BkxHZP7EUIIIo/495F6QNXF7cI9Lwr4PQaiohw2wWmi9k2SE4W4kNrAaLnFw6RZ2ev8EmrQb+sCoGQ==",
+      "requires": {
+        "webext-content-scripts": "^2.5.2",
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      }
+    },
     "convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -22820,6 +22886,35 @@
       "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
       "dev": true
     },
+    "webext-content-scripts": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/webext-content-scripts/-/webext-content-scripts-2.5.2.tgz",
+      "integrity": "sha512-N1Xq/E8dx0lVAOyPquuo+2Vj9Fx1GoqCFo79lWeJHbemaBJ53N3BHBmbJJYsQ8FOP1xiwN4bPRQY2dpSjHAD3Q==",
+      "requires": {
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      }
+    },
+    "webext-patterns": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/webext-patterns/-/webext-patterns-1.3.0.tgz",
+      "integrity": "sha512-X9HMnic9ZtvSFKi2cdh0l+sxyj7f9oLedaa2JfxjnyEqGBz8OJjaHQ40jmraX1DJLTHOpqr+rCz1r3MW2+doUg==",
+      "requires": {
+        "escape-string-regexp": "^5.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+          "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="
+        }
+      }
+    },
+    "webext-polyfill-kinda": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/webext-polyfill-kinda/-/webext-polyfill-kinda-1.0.0.tgz",
+      "integrity": "sha512-Py/d3w/bC0KntuO60ePSWHsdrebZ3uYBLeFUjyPkDV3yTEQib0MRFvPh57t8XjImu4ylBoEAsFjzh/r22UtxMw=="
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

package.json

@@ -4,9 +4,10 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
+    "@ajayyy/maze-utils": "^1.0.3",
+    "content-scripts-register-polyfill": "^4.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.0"
-    "@ajayyy/maze-utils": "^1.0.3"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.199",

src/background.ts

@@ -2,6 +2,7 @@ import * as CompileConfig from "../config.json";
 
 import Config from "./config";
 import { Registration } from "./types";
+import registerContentScript from 'content-scripts-register-polyfill/ponyfill.js';
 
 // Make the config public for debugging purposes
 
@@ -20,11 +21,9 @@ const popupPort: Record<string, chrome.runtime.Port> = {};
 const contentScriptRegistrations = {};
 
 // Register content script if needed
-if (utils.isFirefox()) {
+utils.wait(() => Config.config !== null).then(function() {
-    utils.wait(() => Config.config !== null).then(function() {
+    if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
-        if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
+});
-    });
-}
 
 function onTabUpdatedListener(tabId: number) {
     chrome.tabs.sendMessage(tabId, {
@@ -167,7 +166,7 @@ function registerFirefoxContentScript(options: Registration) {
     const oldRegistration = contentScriptRegistrations[options.id];
     if (oldRegistration) oldRegistration.unregister();
 
-    browser.contentScripts.register({
+    registerContentScript({
         allFrames: options.allFrames,
         js: options.js,
         css: options.css,
@@ -181,8 +180,10 @@ function registerFirefoxContentScript(options: Registration) {
  *
  */
 function unregisterFirefoxContentScript(id: string) {
-    contentScriptRegistrations[id].unregister();
+    if (contentScriptRegistrations[id]) {
-    delete contentScriptRegistrations[id];
+        contentScriptRegistrations[id].unregister();
+        delete contentScriptRegistrations[id];
+    }
 }
 
 async function submitVote(type: number, UUID: string, category: string) {

src/utils.ts

@@ -120,8 +120,8 @@ export default class Utils {
      */
     setupExtraSitePermissions(callback: (granted: boolean) => void): void {
         // Request permission
-        let permissions = ["declarativeContent"];
+        let permissions = ["declarativeContent", "webNavigation"];
-        if (this.isFirefox()) permissions = [];        
+        if (this.isFirefox() && !isSafari()) permissions = [];        
 
         chrome.permissions.request({
             origins: this.getPermissionRegex(),
@@ -145,52 +145,28 @@ export default class Utils {
      * For now, it is just SB.config.invidiousInstances.
      */
     setupExtraSiteContentScripts(): void {
-        if (this.isFirefox()) {
+        const firefoxJS = [];
-            const firefoxJS = [];
+        for (const file of this.js) {
-            for (const file of this.js) {
+            firefoxJS.push({file});
-                firefoxJS.push({file});
+        }
-            }
+        const firefoxCSS = [];
-            const firefoxCSS = [];
+        for (const file of this.css) {
-            for (const file of this.css) {
+            firefoxCSS.push({file});
-                firefoxCSS.push({file});
+        }
-            }
 
-            const registration: Registration = {
+        const registration: Registration = {
-                message: "registerContentScript",
+            message: "registerContentScript",
-                id: "invidious",
+            id: "invidious",
-                allFrames: true,
+            allFrames: true,
-                js: firefoxJS,
+            js: firefoxJS,
-                css: firefoxCSS,
+            css: firefoxCSS,
-                matches: this.getPermissionRegex()
+            matches: this.getPermissionRegex()
-            };
+        };
 
-            if (this.backgroundScriptContainer) {
+        if (this.backgroundScriptContainer) {
-                this.backgroundScriptContainer.registerFirefoxContentScript(registration);
+            this.backgroundScriptContainer.registerFirefoxContentScript(registration);
-            } else {
-                chrome.runtime.sendMessage(registration);
-            }
         } else {
-            chrome.declarativeContent.onPageChanged.removeRules(["invidious"], () => {
+            chrome.runtime.sendMessage(registration);
-                const conditions = [];
-                for (const regex of this.getPermissionRegex()) {
-                    conditions.push(new chrome.declarativeContent.PageStateMatcher({
-                        pageUrl: { urlMatches: regex }
-                    }));
-                }
-
-                // Add page rule
-                const rule = {
-                    id: "invidious",
-                    conditions,
-                    actions: [new chrome.declarativeContent.RequestContentScript({
-                        allFrames: true,
-                        js: this.js,
-                        css: this.css
-                    })]
-                };
-                
-                chrome.declarativeContent.onPageChanged.addRules([rule]);
-            });
         }
     }
 
@@ -198,18 +174,18 @@ export default class Utils {
      * Removes the permission and content script registration.
      */
     removeExtraSiteRegistration(): void {
-        if (this.isFirefox()) {
+        const id = "invidious";
-            const id = "invidious";
 
-            if (this.backgroundScriptContainer) {
+        if (this.backgroundScriptContainer) {
-                this.backgroundScriptContainer.unregisterFirefoxContentScript(id);
+            this.backgroundScriptContainer.unregisterFirefoxContentScript(id);
-            } else {
+        } else {
-                chrome.runtime.sendMessage({
+            chrome.runtime.sendMessage({
-                    message: "unregisterContentScript",
+                message: "unregisterContentScript",
-                    id: id
+                id: id
-                });
+            });
-            }
+        }
-        } else if (chrome.declarativeContent) {
+
+        if (!this.isFirefox() && chrome.declarativeContent) {
             // Only if we have permission
             chrome.declarativeContent.onPageChanged.removeRules(["invidious"]);
         }