build: add firefox support

\#9

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "lint": "eslint ./src",
     "test": "jest --verbose",
-    "dev": "rsbuild build -w --mode=development",
+    "dev": "rsbuild build -w",
     "tsc": "tsc --noEmit",
     "build": "rsbuild build",
     "storybook": "storybook dev -p 6006",
@@ -78,6 +78,7 @@
     "@storybook/react": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@types/chrome": "^0.0.299",
+    "@types/firefox-webext-browser": "^120.0.4",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/react-transition-group": "^4.4.12",

src/_locales/en/messages.json

@@ -47,6 +47,10 @@
     "message": "Chrome Web Store",
     "description": "Chrome Web Store dock icon title"
   },
+  "i18nMozillaAddons": {
+    "message": "Mozilla Addons",
+    "description": "Mozilla Addons dock icon title"
+  },
 
   "i18nGroupClock": {
     "message": "Clock"

src/components/Dock/Dock.tsx

@@ -23,6 +23,7 @@ const Dock = ({ className, onSettingsClick }: Props) => {
   return (
     <div className={dockClassName}>
       {dock
+        .filter((d) => d.enabled === true)
         .filter((d) => dockSettings[d.url] !== false)
         .map((dockItem) => (
           <DockIcon

src/components/Settings/SettingsPanelAbout/SettingsPanelAbout.tsx

@@ -1,22 +1,26 @@
 import './SettingsPanelAbout.scss';
 import { SettingsPanel } from '../SettingsPanel/SettingsPanel';
 import lang from '../../../services/lang';
+import { currentRuntime } from '../../../utils/currentRuntime';
 
+// TODO: add link to Mozilla Add-ons
 export const SettingsPanelAbout = () => {
   const manifest = chrome.runtime.getManifest();
 
   return (
     <SettingsPanel className="settings-panel-about">
       <h1>{manifest.name}</h1>
       <h3>{manifest.version}</h3>
-      <a
-        href={`https://chrome.google.com/webstore/detail/${chrome.runtime.id}`}
-        className="settings-about__like">
-        <svg viewBox="0 0 24 24" width="24" height="24">
-          <use xlinkHref="#favorite"></use>
-        </svg>
-        <span>{lang.t('i18nRate')}</span>
-      </a>
+      {currentRuntime === 'chrome' && (
+        <a
+          href={`https://chrome.google.com/webstore/detail/${chrome.runtime.id}`}
+          className="settings-about__like">
+          <svg viewBox="0 0 24 24" width="24" height="24">
+            <use xlinkHref="#favorite"></use>
+          </svg>
+          <span>{lang.t('i18nRate')}</span>
+        </a>
+      )}
     </SettingsPanel>
   );
 };

src/config/dock.ts

@@ -1,6 +1,7 @@
 import { I18nMessageKey } from '../services/lang/providers/interface';
+import { currentRuntime } from '../utils/currentRuntime';
 
-export type DockURL =
+type ChromeURL =
   | 'chrome://flags'
   | 'chrome://inspect'
   | 'chrome://history'
@@ -10,12 +11,73 @@ export type DockURL =
   | 'chrome://apps'
   | 'https://chrome.google.com/webstore';
 
+type FirefoxURL =
+  | 'about:preferences'
+  | 'about:addons'
+  | 'about:debugging'
+  | 'about:downloads'
+  | 'about:config'
+  | 'https://addons.mozilla.org';
+
+type URLCategory =
+  | 'store'
+  | 'apps'
+  | 'extensions'
+  | 'downloads'
+  | 'bookmarks'
+  | 'history'
+  | 'inspect'
+  | 'flags';
+
+const URLS: { [key in URLCategory]: { chrome: ChromeURL; firefox?: FirefoxURL } } = {
+  store: {
+    chrome: 'https://chrome.google.com/webstore',
+    firefox: 'https://addons.mozilla.org',
+  },
+  apps: {
+    chrome: 'chrome://apps',
+  },
+  extensions: {
+    chrome: 'chrome://extensions',
+    //firefox: 'about:addons',
+  },
+  downloads: {
+    chrome: 'chrome://downloads',
+    //firefox: 'about:downloads',
+  },
+  bookmarks: {
+    chrome: 'chrome://bookmarks',
+  },
+  history: {
+    chrome: 'chrome://history',
+  },
+  inspect: {
+    chrome: 'chrome://inspect',
+    //firefox: 'about:debugging',
+  },
+  flags: {
+    chrome: 'chrome://flags',
+    //firefox: 'about:config',
+  },
+};
+
+const getURL = (category: URLCategory): DockURL => {
+  return URLS[category][currentRuntime];
+};
+
+const isEnabled = (category: URLCategory): boolean => {
+  return !!URLS[category][currentRuntime];
+};
+
+export type DockURL = ChromeURL | FirefoxURL;
+
 export type DockItem = {
   url: DockURL | 'settings';
   icon: string;
   iconViewbox: string;
   text: I18nMessageKey;
   className: string;
+  enabled?: boolean;
 };
 
 const dock: DockItem[] = [
@@ -25,62 +87,71 @@ const dock: DockItem[] = [
     iconViewbox: '0 -960 960 960',
     text: 'i18nSettings',
     className: 'settings',
+    enabled: true,
   },
   {
-    url: 'chrome://flags',
+    url: getURL('flags'),
     icon: 'flag',
     iconViewbox: '0 -960 960 960',
     text: 'i18nFlags',
     className: 'chrome-flags',
+    enabled: isEnabled('flags'),
   },
   {
-    url: 'chrome://inspect',
+    url: getURL('inspect'),
     icon: 'inspect',
     iconViewbox: '0 -960 960 960',
     text: 'i18nInspect',
     className: 'chrome-inspect',
+    enabled: isEnabled('inspect'),
   },
   {
-    url: 'chrome://history',
+    url: getURL('history'),
     icon: 'history',
     iconViewbox: '0 -960 960 960',
     text: 'i18nHistory',
     className: 'chrome-history',
+    enabled: isEnabled('history'),
   },
   {
-    url: 'chrome://bookmarks',
+    url: getURL('bookmarks'),
     icon: 'bookmark',
     iconViewbox: '0 -960 960 960',
     text: 'i18nBookmarks',
     className: 'chrome-bookmarks',
+    enabled: isEnabled('bookmarks'),
   },
   {
-    url: 'chrome://downloads',
+    url: getURL('downloads'),
     icon: 'download',
     iconViewbox: '0 -960 960 960',
     text: 'i18nDownloads',
     className: 'chrome-downloads',
+    enabled: isEnabled('downloads'),
   },
   {
-    url: 'chrome://extensions',
+    url: getURL('extensions'),
     icon: 'extensions',
     iconViewbox: '0 -960 960 960',
     text: 'i18nExtensions',
     className: 'chrome-extensions',
+    enabled: isEnabled('extensions'),
   },
   {
-    url: 'chrome://apps',
+    url: getURL('apps'),
     icon: 'apps',
     iconViewbox: '0 -960 960 960',
     text: 'i18nApplications',
     className: 'chrome-apps',
+    enabled: isEnabled('apps'),
   },
   {
-    url: 'https://chrome.google.com/webstore',
+    url: getURL('store'),
     icon: 'store',
     iconViewbox: '0 -960 960 960',
-    text: 'i18nChromeWebStore',
+    text: currentRuntime === 'firefox' ? 'i18nMozillaAddons' : 'i18nChromeWebStore',
     className: 'chrome-store',
+    enabled: isEnabled('store'),
   },
 ];
 

src/manifest.json

@@ -12,5 +12,4 @@
     "128": "/assets/img/icons/icon128.png"
   },
   "permissions": ["storage"],
-  "offline_enabled": true
 }

src/services/storage/providers/chromeSyncStorage.ts

@@ -8,30 +8,30 @@ class ChromeSyncStorage {
     this.key = key;
   }
 
-  load(): Promise<(SettingsState & DockState) | null> {
-    return new Promise((resolve, reject) => {
-      chrome.storage.sync.get(this.key, (data) => {
-        if (!data || !Object.keys(data).length || !data[this.key]) {
-          reject();
-        } else {
-          data = data[this.key];
-          resolve(data);
-        }
-      });
-    }).then(
-      (data) => data,
-      () => null,
-    );
+  async load() {
+    let data: unknown;
+    try {
+      data = await chrome.storage.sync.get(this.key);
+    } catch (e) {
+      return null;
+    }
+    if (!data || !Object.keys(data).length || !data[this.key]) {
+      return null;
+    }
+    return data[this.key] as SettingsState & DockState;
   }
 
-  sync(data: AppState) {
+  async sync(data: AppState) {
     if (!data) return;
     const { settings, dock } = data;
     if (!settings && !dock) return;
-
-    return chrome.storage.sync.set({
-      [this.key]: { ...settings, ...dock },
-    });
+    try {
+      await chrome.storage.sync.set({
+        [this.key]: { ...settings, ...dock },
+      });
+    } catch (e) {
+      return Promise.resolve();
+    }
   }
 }
 

src/utils/currentRuntime.ts

@@ -0,0 +1,7 @@
+export const getCurrentRuntime = (): 'chrome' | 'firefox' => {
+  // probably there's a better way to detect the runtime
+  if (typeof browser !== 'undefined' && browser?.storage?.sync?.get) return 'firefox';
+  return 'chrome';
+};
+
+export const currentRuntime = getCurrentRuntime();