material-extensions · PKief · Jul 9, 2024 · Jul 5, 2024 · Jul 5, 2024 · Jul 7, 2024
diff --git a/scripts/build-src.ts b/scripts/build-src.ts
@@ -57,13 +57,10 @@ function src(
     );
   const bundleOptionsScript = (): Promise<esbuild.BuildResult> =>
     bundleJS(distPath, path.resolve(srcPath, 'ui', 'options', 'options.ts'));
-  const bundleBackgroundScript = (): Promise<esbuild.BuildResult> =>
-    bundleJS(distPath, path.resolve(srcPath, 'background', 'background.ts'));
 
   const bundleAll: Promise<esbuild.BuildResult> = bundleMainScript()
     .then(bundlePopupScript)
-    .then(bundleOptionsScript)
-    .then(bundleBackgroundScript);
+    .then(bundleOptionsScript);
 
   const copyPopup: Promise<void[]> = Promise.all(
     [

diff --git a/src/background/background.ts b/src/background/background.ts
diff --git a/src/manifests/base.json b/src/manifests/base.json
@@ -30,5 +30,32 @@
     "page": "options.html",
     "open_in_tab": true
   },
-  "permissions": ["storage", "activeTab", "scripting"]
+  "permissions": ["storage", "activeTab", "scripting"],
+  "manifest_version": 3,
+  "web_accessible_resources": [
+    {
+      "resources": ["*.svg"],
+      "matches": [
+        "*://github.com/*",
+        "*://bitbucket.org/*",
+        "*://dev.azure.com/*",
+        "*://*.visualstudio.com/*",
+        "*://gitea.com/*",
+        "*://gitlab.com/*",
+        "*://gitee.com/*",
+        "*://sourceforge.net/*",
+        "*://*/*"
+      ]
+    }
+  ],
+  "action": {
+    "default_title": "Material Icons Settings",
+    "default_popup": "settings-popup.html",
+    "default_icon": {
+      "16": "icon-16.png",
+      "32": "icon-32.png",
+      "48": "icon-48.png",
+      "128": "icon-128.png"
+    }
+  }
 }
diff --git a/src/manifests/chrome-edge.json b/src/manifests/chrome-edge.json
@@ -1,33 +1,3 @@
 {
-  "manifest_version": 3,
-  "web_accessible_resources": [
-    {
-      "resources": ["*.svg"],
-      "matches": [
-        "*://github.com/*",
-        "*://bitbucket.org/*",
-        "*://dev.azure.com/*",
-        "*://*.visualstudio.com/*",
-        "*://gitea.com/*",
-        "*://gitlab.com/*",
-        "*://gitee.com/*",
-        "*://sourceforge.net/*",
-        "*://*/*"
-      ]
-    }
-  ],
-  "action": {
-    "default_title": "Material Icons Settings",
-    "default_popup": "settings-popup.html",
-    "default_icon": {
-      "16": "icon-16.png",
-      "32": "icon-32.png",
-      "48": "icon-48.png",
-      "128": "icon-128.png"
-    }
-  },
-  "background": {
-    "service_worker": "./background.js"
-  },
   "optional_host_permissions": ["*://*/*"]
 }
diff --git a/src/manifests/firefox.json b/src/manifests/firefox.json
@@ -4,34 +4,5 @@
       "id": "{eac6e624-97fa-4f28-9d24-c06c9b8aa713}"
     }
   },
-  "manifest_version": 2,
-  "web_accessible_resources": ["*.svg"],
-  "browser_action": {
-    "default_title": "Material Icons Settings",
-    "default_popup": "settings-popup.html",
-    "default_icon": {
-      "16": "icon-16.png",
-      "32": "icon-32.png",
-      "48": "icon-48.png",
-      "128": "icon-128.png"
-    }
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "*://github.com/*",
-        "*://bitbucket.org/*",
-        "*://dev.azure.com/*",
-        "*://*.visualstudio.com/*",
-        "*://gitea.com/*",
-        "*://gitlab.com/*",
-        "*://gitee.com/*",
-        "*://sourceforge.net/*",
-        "*://*/*"
-      ],
-      "js": ["./main.js"],
-      "css": ["./injected-styles.css"],
-      "run_at": "document_start"
-    }
-  ]
+  "optional_permissions": ["activeTab", "<all_urls>"]
 }
diff --git a/src/ui/options/options.html b/src/ui/options/options.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

diff --git a/src/ui/popup/settings-popup.css b/src/ui/popup/settings-popup.css
@@ -4,6 +4,8 @@ body {
   color: #1a202c;
   font-size: 16px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  /** firefox has bigger popup width limit, this is to bring it to parity with chromium **/
+  max-width: 300px;
 }
 
 #content {
@@ -44,8 +46,8 @@ body {
 
 #options-btn {
   margin-left: auto;
-  width: 24;
-  height: 24;
+  width: 24px;
+  height: 24px;
   filter: grayscale(1);
 }
 

diff --git a/src/ui/popup/settings-popup.html b/src/ui/popup/settings-popup.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

diff --git a/src/ui/popup/settings-popup.ts b/src/ui/popup/settings-popup.ts
@@ -7,9 +7,6 @@ import {
   providerConfig,
 } from '../../providers';
 
-const HOST_IS_NEW = 1;
-const HOST_NO_MATCH = 2;
-
 const isPageSupported = (domain: string) => getGitProvider(domain);
 
 function getCurrentTab() {
@@ -150,7 +147,7 @@ function guessProvider(tab: Browser.Tabs.Tab) {
 
   return Browser.tabs.sendMessage(tab.id ?? 0, cmd).then((match) => {
     if (match === null) {
-      return HOST_NO_MATCH;
+      return false;
     }
 
     return match;
@@ -174,30 +171,88 @@ function checkAccess(tab: Browser.Tabs.Tab) {
     origins: [`*://${host}/*`],
   };
 
-  return Browser.permissions.contains(perm).then((r) => {
+  return Browser.permissions.contains(perm).then(async (r) => {
     if (r) {
+      await ensureContentScriptRegistered(tab);
+
       return tab;
     }
 
-    return HOST_IS_NEW;
+    return false;
   });
 }
 
 function requestAccess(tab: Browser.Tabs.Tab) {
   const { host } = new URL(tab.url ?? '');
 
-  return Browser.runtime.sendMessage({
-    event: 'request-access',
-    data: {
-      tabId: tab.id,
-      host,
-    },
+  const perm: Browser.Permissions.Permissions = {
+    permissions: ['activeTab'],
+    origins: [`*://${host}/*`],
+  };
+
+  // request the permission
+  Browser.permissions.request(perm).then(async (granted: boolean) => {
+    if (!granted) {
+      return;
+    }
+
+    // when granted reload the popup to show ui changes
+    window.location.reload();
+  });
+
+  // close the popup, in firefox it stays open for some reason.
+  window.close();
+}
+
+async function ensureContentScriptRegistered(tab: Browser.Tabs.Tab) {
+  const { host } = new URL(tab.url ?? '');
+
+  const scripts = await Browser.scripting.getRegisteredContentScripts({
+    ids: ['material-icons'],
   });
+
+  const pattern: string = `*://${host}/*`;
+
+  if (!scripts.length) {
+    // run the script now in the current tab to prevent need for reloading
+    await Browser.scripting.executeScript({
+      files: ['./main.js'],
+      target: {
+        tabId: tab.id ?? 0,
+      },
+    });
+
+    // register content script for future use
+    return Browser.scripting.registerContentScripts([
+      {
+        id: 'material-icons',
+        js: ['./main.js'],
+        css: ['./injected-styles.css'],
+        matches: [pattern],
+        runAt: 'document_start',
+      },
+    ]);
+  }
+
+  const matches = scripts[0].matches ?? [];
+
+  // if we somehow already registered the script for requested origin, skip it
+  if (matches.includes(pattern)) {
+    return;
+  }
+
+  // add new origin to content script
+  return Browser.scripting.updateContentScripts([
+    {
+      id: 'material-icons',
+      matches: [...matches, pattern],
+    },
+  ]);
 }
 
 function doGuessProvider(tab: Browser.Tabs.Tab, domain: string) {
   return guessProvider(tab).then((match) => {
-    if (match !== HOST_NO_MATCH) {
+    if (match !== false) {
       registerControls(domain);
       displayDomainSettings();
 
@@ -208,10 +263,6 @@ function doGuessProvider(tab: Browser.Tabs.Tab, domain: string) {
   });
 }
 
-function isFirefox() {
-  return navigator.userAgent.toLowerCase().includes('firefox');
-}
-
 function init(tab: Browser.Tabs.Tab) {
   const domain = new URL(tab.url ?? '').host;
 
@@ -224,15 +275,8 @@ function init(tab: Browser.Tabs.Tab) {
         return displayPageNotSupported(domain);
       }
 
-      // overwrite for firefox browser, currently does not support
-      // asking for permissions from background, so it will run
-      // on all pages.
-      if (isFirefox()) {
-        return doGuessProvider(tab, domain);
-      }
-
       return checkAccess(tab).then((access) => {
-        if (access === HOST_IS_NEW) {
+        if (access === false) {
           return askDomainAccess(tab);
         }