fix: removed notify, migrtaed to alert, ref: #157

Author: gautamkrishnar

app/scripts/background.js

@@ -102,6 +102,7 @@ async function handleDownload(downloadItem) {
         aria2Service.addUri(downloadUrl, params),
         browser.downloads.getFileIcon(downloadItem.id).catch(() => ''),
       ]);
+      browser.storage.local.set({ motrixReachable: true }).catch(() => {});
 
       // Mark before erasing so onErased doesn't delete the store entry
       redirectedToAria.add(downloadItem.id);
@@ -127,19 +128,15 @@ async function handleDownload(downloadItem) {
       }
     } catch (error) {
       console.error('Motrix WebExtension: failed to send to Motrix:', error);
+      browser.storage.local.set({ motrixReachable: false }).catch(() => {});
 
       if (settings.downloadFallback !== false) {
         await browser.downloads.resume(downloadItem.id).catch(() => {});
         trackWithBrowser(downloadItem, downloadStore);
-        await notify('Motrix not reachable', 'Falling back to browser download');
       } else {
         redirectedToAria.add(downloadItem.id);
         await browser.downloads.cancel(downloadItem.id).catch(() => {});
         await browser.downloads.erase({ id: downloadItem.id }).catch(() => {});
-        await notify(
-          'Motrix not reachable',
-          'Download cancelled. Enable fallback in settings to use the browser.'
-        );
         await downloadStore.delete(downloadItem.id);
       }
     }
@@ -195,6 +192,16 @@ async function init() {
   createMenuItem();
 }
 
+async function checkMotrixStatus() {
+  await ensureInitialized();
+  try {
+    await aria2Service.ping();
+    await browser.storage.local.set({ motrixReachable: true });
+  } catch {
+    await browser.storage.local.set({ motrixReachable: false });
+  }
+}
+
 // ─── TOP-LEVEL LISTENER REGISTRATION ────────────────────────────────────────
 // In MV3, the service worker wakes up fresh for every event. Listeners MUST be
 // registered synchronously at the top level so Chrome can dispatch events to
@@ -215,3 +222,9 @@ browser.downloads.onErased.addListener(async (id) => {
 // onInstalled / onStartup pre-warm init so the first download is snappier
 browser.runtime.onInstalled.addListener(ensureInitialized);
 browser.runtime.onStartup.addListener(ensureInitialized);
+
+browser.runtime.onMessage.addListener((message) => {
+  if (message?.type === 'checkMotrixStatus') {
+    checkMotrixStatus();
+  }
+});

app/scripts/hooks/useBrowserStorage.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import * as browser from 'webextension-polyfill';
+
+/**
+ * Subscribe to browser.storage values and re-render on changes.
+ *
+ * @param {'local'|'sync'} area   - Storage area to read from.
+ * @param {string[]}       keys   - Keys to read from that area.
+ * @returns {object}               - Plain object with the requested keys.
+ */
+export function useBrowserStorage(area, keys) {
+  const [values, setValues] = useState({});
+
+  useEffect(() => {
+    const storage = browser.storage[area];
+
+    storage.get(keys).then((result) => setValues(result));
+
+    const listener = (changes, changedArea) => {
+      if (changedArea !== area) return;
+      const relevant = keys.filter((k) => k in changes);
+      if (relevant.length === 0) return;
+      setValues((prev) => {
+        const next = { ...prev };
+        for (const k of relevant) next[k] = changes[k].newValue;
+        return next;
+      });
+    };
+
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [area]);
+
+  return values;
+}

app/scripts/popup.js

@@ -1,5 +1,5 @@
 'use strict';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { Grid, Paper, IconButton, LinearProgress } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -10,6 +10,7 @@ import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import createThemed from './createThemed';
 import PropTypes from 'prop-types';
 import * as browser from 'webextension-polyfill';
+import { useBrowserStorage } from './hooks/useBrowserStorage';
 
 function OptProgress({ status, downloaded, size }) {
   if (status !== 'downloading') return null;
@@ -51,44 +52,16 @@ FolderButton.propTypes = {
 };
 
 function PopupView() {
-  const [downloadHistory, setDownloadHistory] = useState([]);
-  const [extensionStatus, setExtensionStatus] = useState(false);
-  const [showOnlyAriaDownloads, setShowOnlyAriaDownloads] = useState(false);
+  const { history: downloadHistory = [], motrixReachable = null } = useBrowserStorage('local', ['history', 'motrixReachable']);
+  const { extensionStatus = false, showOnlyAria: showOnlyAriaDownloads = false } = useBrowserStorage('sync', ['extensionStatus', 'showOnlyAria']);
 
   useEffect(() => {
-    browser.storage.local.get(['history']).then(({ history = [] }) => {
-      setDownloadHistory(history);
-    });
-
-    const listener = (changes, area) => {
-      if (area !== 'local') return;
-      if (changes.history) setDownloadHistory(changes.history.newValue ?? []);
-    };
-    browser.storage.onChanged.addListener(listener);
-    return () => browser.storage.onChanged.removeListener(listener);
-  }, []);
-
-  useEffect(() => {
-    browser.storage.sync
-      .get(['extensionStatus', 'showOnlyAria'])
-      .then(({ extensionStatus: status, showOnlyAria }) => {
-        setExtensionStatus(status ?? false);
-        setShowOnlyAriaDownloads(showOnlyAria ?? false);
-      });
-
-    const listener = (changes, area) => {
-      if (area !== 'sync') return;
-      if (changes.extensionStatus) setExtensionStatus(changes.extensionStatus.newValue);
-      if (changes.showOnlyAria) setShowOnlyAriaDownloads(changes.showOnlyAria.newValue);
-    };
-    browser.storage.onChanged.addListener(listener);
-    return () => browser.storage.onChanged.removeListener(listener);
+    browser.runtime.sendMessage({ type: 'checkMotrixStatus' }).catch(() => {});
   }, []);
 
   const onExtensionStatusChange = (status) => {
     browser.storage.sync.set({ extensionStatus: status });
     if (!status) browser.downloads.setShelfEnabled?.(true);
-    setExtensionStatus(status);
   };
 
   const parseName = (name) => {
@@ -128,7 +101,6 @@ function PopupView() {
         <IconButton
           variant="outlined"
           onClick={() => {
-            setDownloadHistory([]);
             browser.storage.local.set({ history: [], downloads: {} });
           }}
         >
@@ -143,6 +115,31 @@ function PopupView() {
           <FolderIcon />
         </IconButton>
       </Grid>
+      {motrixReachable === false && (
+        <Grid item xs={11}>
+          <Paper
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '8px 12px',
+              marginBottom: '8px',
+              backgroundColor: '#fff3e0',
+            }}
+          >
+            <span style={{ fontSize: '13px', color: '#e65100' }}>
+              Motrix is not reachable. Please open Motrix.
+            </span>
+            <IconButton
+              size="small"
+              onClick={() => browser.tabs.create({ url: 'motrix://' })}
+              style={{ color: '#e65100' }}
+            >
+              <PowerSettingsNewIcon fontSize="small" />
+            </IconButton>
+          </Paper>
+        </Grid>
+      )}
       <Grid item xs={11}>
         {downloadHistory
           .filter((el) => !showOnlyAriaDownloads || el.downloader === 'aria')

app/scripts/services/Aria2Service.js

@@ -63,6 +63,11 @@ class Aria2Service {
     return this.#connectingPromise;
   }
 
+  async ping() {
+    const conn = await this.#getConnection();
+    await conn.call('getVersion');
+  }
+
   async addUri(url, params) {
     const conn = await this.#getConnection();
     return conn.call('addUri', [url], params);

tests/mock-aria2/server.js

@@ -109,6 +109,8 @@ class MockAria2Server {
         return this.#onAddUri(ws, id, params);
       case 'aria2.tellStatus':
         return this.#onTellStatus(ws, id, params);
+      case 'aria2.getVersion':
+        return this.#respond(ws, id, { version: '1.36.0', enabledFeatures: [] });
       default:
         // Acknowledge unknown calls so the client doesn't hang
         this.#respond(ws, id, 'OK');

tests/specs/chrome/extension.test.js

@@ -23,7 +23,7 @@ const { DOWNLOAD_DIR, cleanupDownloads, waitFor } = require('../../helpers/exten
 
 // ── Constants ──────────────────────────────────────────────────────────────────
 const EXTENSION_PATH = path.resolve(__dirname, '../../../dist/chrome');
-const ARIA2_PORT = 16800;
+const ARIA2_PORT = 16900;
 const FILE_SERVER_PORT = 8080;
 const TEST_API_KEY = 'e2e-test-secret';
 
@@ -130,6 +130,36 @@ async function suppressExtensionNotifications() {
   });
 }
 
+/** Read a value from chrome.storage.local. */
+async function readLocalStorage(key) {
+  const page = await context.newPage();
+  try {
+    await page.goto(`chrome-extension://${extensionId}/pages/config.html`, {
+      waitUntil: 'domcontentloaded',
+    });
+    return await page.evaluate(
+      (k) => new Promise((r) => chrome.storage.local.get(k, (res) => r(res[k]))),
+      key
+    );
+  } finally {
+    await page.close();
+  }
+}
+
+/** Write values into chrome.storage.local. */
+async function setLocalStorage(obj) {
+  const page = await context.newPage();
+  try {
+    await page.goto(`chrome-extension://${extensionId}/pages/config.html`, {
+      waitUntil: 'domcontentloaded',
+    });
+    await page.evaluate((o) => chrome.storage.local.set(o), obj);
+    await page.waitForTimeout(200);
+  } finally {
+    await page.close();
+  }
+}
+
 /** Open a fresh page pointing at the file server index. */
 async function openFileServerPage() {
   const page = await context.newPage();
@@ -656,13 +686,13 @@ test.describe('Prompt Before Download', () => {
   });
 
   test('download is intercepted when prompt_for_download is enabled', async () => {
-    const mockAria2Pbd = new MockAria2Server(16_801);
+    const mockAria2Pbd = new MockAria2Server(16_901);
     await mockAria2Pbd.start();
 
     try {
       const configPage = await pbdContext.newPage();
       await configPage.goto(`chrome-extension://${pbdExtensionId}/pages/config.html`, { waitUntil: 'domcontentloaded' });
-      await configPage.evaluate(async (s) => { await chrome.storage.sync.set(s); }, { ...DEFAULT_SETTINGS, motrixPort: 16_801 });
+      await configPage.evaluate(async (s) => { await chrome.storage.sync.set(s); }, { ...DEFAULT_SETTINGS, motrixPort: 16_901 });
       await configPage.waitForTimeout(400);
       await configPage.close();
 
@@ -679,6 +709,75 @@ test.describe('Prompt Before Download', () => {
   });
 });
 
+// ══════════════════════════════════════════════════════════════════════════════
+// 8. Motrix Reachability
+// ══════════════════════════════════════════════════════════════════════════════
+test.describe('Motrix Reachability', () => {
+  test.afterEach(async () => {
+    await setLocalStorage({ motrixReachable: null });
+  });
+
+  test('motrixReachable is set to true after a successful intercept', async () => {
+    const page = await openFileServerPage();
+    await page.click('#large-download');
+    await waitFor(() => mockAria2.getCalls('addUri').length > 0, 25_000);
+    await waitFor(async () => (await readLocalStorage('motrixReachable')) === true, 5_000);
+    expect(await readLocalStorage('motrixReachable')).toBe(true);
+    await page.close();
+  });
+
+  test('motrixReachable is set to false when Aria2 is unreachable', async () => {
+    await configureExtension({ motrixPort: 19_999, downloadFallback: true });
+    const page = await openFileServerPage();
+    await page.click('#mini-download');
+    await waitFor(async () => (await readLocalStorage('motrixReachable')) === false, 15_000, 500);
+    expect(await readLocalStorage('motrixReachable')).toBe(false);
+    await page.close();
+    await restoreDefaults();
+  });
+
+  test('popup shows reachability banner when motrixReachable is false', async () => {
+    // Reject aria2 connections so the on-open ping also fails and doesn't clear the flag
+    mockAria2.setRejectConnections(true);
+    try {
+      await setLocalStorage({ motrixReachable: false });
+      const page = await context.newPage();
+      await page.goto(`chrome-extension://${extensionId}/pages/popup.html`, {
+        waitUntil: 'networkidle',
+      });
+      await sleep(1_000);
+      await expect(page.locator('text=Motrix is not reachable')).toBeVisible();
+      await page.close();
+    } finally {
+      mockAria2.setRejectConnections(false);
+    }
+  });
+
+  test('popup does not show banner when motrixReachable is true', async () => {
+    await setLocalStorage({ motrixReachable: true });
+    const page = await context.newPage();
+    await page.goto(`chrome-extension://${extensionId}/pages/popup.html`, {
+      waitUntil: 'networkidle',
+    });
+    await sleep(500);
+    await expect(page.locator('text=Motrix is not reachable')).toHaveCount(0);
+    await page.close();
+  });
+
+  test('opening popup with Motrix running clears the unreachable flag', async () => {
+    await setLocalStorage({ motrixReachable: false });
+    const page = await context.newPage();
+    await page.goto(`chrome-extension://${extensionId}/pages/popup.html`, {
+      waitUntil: 'networkidle',
+    });
+    // Popup sends checkMotrixStatus on mount; background pings mock aria2 (running)
+    await waitFor(async () => (await readLocalStorage('motrixReachable')) === true, 8_000, 300);
+    expect(await readLocalStorage('motrixReachable')).toBe(true);
+    await expect(page.locator('text=Motrix is not reachable')).toHaveCount(0);
+    await page.close();
+  });
+});
+
 // ══════════════════════════════════════════════════════════════════════════════
 // 9. File Cleanup
 // ══════════════════════════════════════════════════════════════════════════════