Add global popup toggle to settings (#541)

browser-extensions/chrome/src/app/App.tsx

@@ -44,7 +44,7 @@ const App: React.FC = () => {
     { path: '/credentials/:id', element: <CredentialDetails />, showBackButton: true, title: 'Credential details' },
     { path: '/emails', element: <EmailsList />, showBackButton: false },
     { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: 'Email details' },
-    { path: '/settings', element: <Settings />, showBackButton: true, title: 'Settings' },
+    { path: '/settings', element: <Settings />, showBackButton: false },
   ];
 
   useEffect(() => {

browser-extensions/chrome/src/app/pages/EmailsList.tsx

@@ -117,8 +117,8 @@ const EmailsList: React.FC = () => {
   if (emails.length === 0) {
     return (
       <div>
-        <div className="flex justify-between items-center">
-          <h2 className="text-gray-900 dark:text-white text-xl mb-4">Emails</h2>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-gray-900 dark:text-white text-xl">Emails</h2>
           <ReloadButton onClick={loadEmails} />
         </div>
         <div className="text-gray-500 dark:text-gray-400 space-y-2">
@@ -132,8 +132,8 @@ const EmailsList: React.FC = () => {
 
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <h2 className="text-gray-900 dark:text-white text-xl mb-4">Emails</h2>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-gray-900 dark:text-white text-xl">Emails</h2>
         <ReloadButton onClick={loadEmails} />
       </div>
       <div className="space-y-2">

browser-extensions/chrome/src/app/pages/Settings.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { DISABLED_SITES_KEY } from '../../contentScript/Popup';
+import { DISABLED_SITES_KEY, GLOBAL_POPUP_ENABLED_KEY } from '../../contentScript/Popup';
 
 /**
  * Popup settings type.
@@ -8,6 +8,7 @@ type PopupSettings = {
   disabledUrls: string[];
   currentUrl: string;
   isEnabled: boolean;
+  isGloballyEnabled: boolean;
 }
 
 /**
@@ -17,7 +18,8 @@ const Settings: React.FC = () => {
   const [settings, setSettings] = useState<PopupSettings>({
     disabledUrls: [],
     currentUrl: '',
-    isEnabled: true
+    isEnabled: true,
+    isGloballyEnabled: true
   });
 
   /**
@@ -36,16 +38,19 @@ const Settings: React.FC = () => {
     const tab = await getCurrentTab();
     const currentUrl = new URL(tab.url || '').hostname;
 
-    // Load disabled URLs from chrome.storage.local
-    chrome.storage.local.get([DISABLED_SITES_KEY], (result) => {
+    // Load settings from chrome.storage.local
+    chrome.storage.local.get([DISABLED_SITES_KEY, GLOBAL_POPUP_ENABLED_KEY], (result) => {
       const disabledUrls = result[DISABLED_SITES_KEY] || [];
+      const isGloballyEnabled = result[GLOBAL_POPUP_ENABLED_KEY] !== false; // Default to true if not set
+
       setSettings({
         disabledUrls,
         currentUrl,
-        isEnabled: !disabledUrls.includes(currentUrl)
+        isEnabled: !disabledUrls.includes(currentUrl),
+        isGloballyEnabled
       });
     });
-  }, []); // No dependencies needed since it only uses external APIs
+  }, []);
 
   useEffect(() => {
     loadSettings();
@@ -88,45 +93,91 @@ const Settings: React.FC = () => {
     }));
   };
 
+  const toggleGlobalPopup = async () : Promise<void> => {
+    const newGloballyEnabled = !settings.isGloballyEnabled;
+
+    await chrome.storage.local.set({
+      [GLOBAL_POPUP_ENABLED_KEY]: newGloballyEnabled
+    });
+
+    setSettings(prev => ({
+      ...prev,
+      isGloballyEnabled: newGloballyEnabled
+    }));
+  };
+
   return (
-    <div>
-      <div className="flex justify-between items-center">
-        <h2 className="text-gray-900 dark:text-white text-xl mb-4">Popup Settings</h2>
+    <div className="space-y-6">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-gray-900 dark:text-white text-xl">Settings</h2>
       </div>
 
-      <div className="space-y-4">
-        <div>
-          <div className="text-gray-500 dark:text-gray-400 space-y-2 mb-4">
-            <p className="text-sm">
-            You can disable the autofill popup by either dismissing the popup or enabling/disabling via the button below.
-            </p>
-          </div>
-          <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-            <div>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">{settings.currentUrl}</p>
-              <p className={`text-sm ${settings.isEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
-                Popup is {settings.isEnabled ? 'enabled' : 'disabled'} for this site
-              </p>
+      {/* Global Settings Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Global Settings</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-900 dark:text-white">Autofill Popup</p>
+                <p className={`text-sm mt-1 ${settings.isGloballyEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {settings.isGloballyEnabled ? 'Active on all sites (unless disabled below)' : 'Disabled on all sites'}
+                </p>
+              </div>
+              <button
+                onClick={toggleGlobalPopup}
+                className={`px-4 py-2 rounded-md transition-colors ${
+                  settings.isGloballyEnabled
+                    ? 'bg-red-500 hover:bg-red-600 text-white'
+                    : 'bg-green-500 hover:bg-green-600 text-white'
+                }`}
+              >
+                {settings.isGloballyEnabled ? 'Disable' : 'Enable'}
+              </button>
             </div>
-            <button
-              onClick={toggleCurrentSite}
-              className={`px-4 py-2 rounded-md ${
-                settings.isEnabled
-                  ? 'bg-red-500 hover:bg-red-600 text-white'
-                  : 'bg-green-500 hover:bg-green-600 text-white'
-              }`}
-            >
-              {settings.isEnabled ? 'Disable' : 'Enable'}
-            </button>
           </div>
         </div>
-        <button
-          onClick={resetSettings}
-          className="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-gray-900 dark:text-white"
-        >
-          (Re)enable popup for all sites
-        </button>
-      </div>
+      </section>
+
+      {/* Site-Specific Settings Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Site-Specific Settings</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              Control the autofill popup behavior for individual websites. You can disable it for specific sites that you don't want the popup to appear on.
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+              <div>
+                <p className="text-sm font-medium text-gray-900 dark:text-white">Current Site: {settings.currentUrl}</p>
+                <p className={`text-sm mt-1 ${settings.isEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {settings.isEnabled ? 'Popup is active' : 'Popup is disabled'}
+                </p>
+              </div>
+              <button
+                onClick={toggleCurrentSite}
+                className={`px-4 py-2 rounded-md transition-colors ${
+                  settings.isEnabled
+                    ? 'bg-red-500 hover:bg-red-600 text-white'
+                    : 'bg-green-500 hover:bg-green-600 text-white'
+                }`}
+              >
+                {settings.isEnabled ? 'Disable' : 'Enable'}
+              </button>
+            </div>
+
+            <div className="mt-4">
+              <button
+                onClick={resetSettings}
+                className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-gray-700 dark:text-gray-300 transition-colors text-sm"
+              >
+                Reset all site-specific settings
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };

browser-extensions/chrome/src/background/VaultMessageHandler.ts

@@ -146,9 +146,7 @@ export async function handleGetCredentials(
 
   try {
     const sqliteClient = await createVaultSqliteClient(vaultState);
-
     const credentials = sqliteClient.getAllCredentials();
-
     sendResponse({ credentials: credentials, status: 'OK' });
   } catch (error) {
     console.error('Error getting credentials:', error);

browser-extensions/chrome/src/contentScript/Popup.ts

@@ -786,14 +786,18 @@ function createCredentialList(credentials: Credential[], input: HTMLInputElement
 }
 
 export const DISABLED_SITES_KEY = 'aliasvault_disabled_sites';
+export const GLOBAL_POPUP_ENABLED_KEY = 'aliasvault_global_popup_enabled';
 
 /**
  * Check if auto-popup is disabled for current site
  */
 export async function isAutoShowPopupDisabled(): Promise<boolean> {
-  const result = await chrome.storage.local.get(DISABLED_SITES_KEY);
-  const disabledSites = result[DISABLED_SITES_KEY] || [];
-  return disabledSites.includes(window.location.hostname);
+  const settings = await chrome.storage.local.get([DISABLED_SITES_KEY, GLOBAL_POPUP_ENABLED_KEY]);
+  const disabledUrls = settings[DISABLED_SITES_KEY] || [];
+  const isGloballyEnabled = settings[GLOBAL_POPUP_ENABLED_KEY] !== false;
+  const currentHostname = window.location.hostname;
+
+  return !isGloballyEnabled || disabledUrls.includes(currentHostname);
 }
 
 /**

docs/misc/dev/browser-extensions.md

@@ -49,6 +49,8 @@ npm run test
 In order to test for client side issues, here is a list of public websites that have caused issues in the past and can be used to test whether the extension is (still) working correctly.
 
 ### Websites that have caused issues
+The following websites have been known to cause issues in the past (but should be fixed now).
+
 | Website | Reason |
 | --- | --- |
 | https://www.paprika-shopping.nl/nieuwsbrief/newsletter-register-landing.html | Popup CSS style conflicts |