First draft

21 files changed, 479 insertions, 115 deletions

diff --git a/build.js b/build.js
index 0dfd1a9..ca8c4e8 100644
--- a/build.js
+++ b/build.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const fs = require('@npmcli/fs')
+const fs = require('@npmcli/fs');
 const util = require('util');
 const exec = util.promisify(require('child_process').exec);
 const zaf = require('zip-a-folder');
@@ -12,24 +12,11 @@ const BROWSERS = {
     'Chromium': 'manifest_chromium.json',
 };
 
-async function adjustManifest(manifest) {
+async function getDestinationFilename(manifest) {
     const manifestFile = await fs.readFile(DEFAULT, { encoding: 'utf8' });
     const data = JSON.parse(manifestFile);
     const browser = manifest.substring(manifest.indexOf('_') + 1, manifest.indexOf('.'));
 
-    if (manifest.includes('firefox')) {
-        for (const elem in data['icons']) {
-            data['icons'][elem] = 'icons/keepassxc.svg';
-        }
-        for (const elem in data['browser_action']['default_icon']) {
-            data['browser_action']['default_icon'][elem] = 'icons/keepassxc.svg';
-        }
-        delete data['version_name'];
-    } else if (manifest.includes('chromium')) {
-        delete data['applications'];
-    }
-
-    await fs.writeFile(manifest, JSON.stringify(data, null, 4));
     return `keepassxc-browser_${data['version']}_${browser}.zip`;
 }
 
@@ -46,15 +33,14 @@ async function updateTranslations() {
     for (const browser in BROWSERS) {
         console.log(`KeePassXC-Browser: Creating extension package for ${browser}`);
 
-        const fileName = await adjustManifest(BROWSERS[browser]);
-        await fs.copyFile(BROWSERS[browser], `${DEST}/manifest.json`);
+        const fileName = await getDestinationFilename(BROWSERS[browser]);
+        await fs.copyFile(`./dist/${BROWSERS[browser]}`, `${DEST}/manifest.json`);
 
         if (await fs.exists(fileName)) {
             await fs.rm(fileName);
         }
 
         await zaf.zip(DEST, fileName);
-        await fs.rm(BROWSERS[browser], { recursive: true });
         console.log('Done');
     }
 
diff --git a/dist/manifest_chromium.json b/dist/manifest_chromium.json
new file mode 100755
index 0000000..cd444a4
--- /dev/null
+++ b/dist/manifest_chromium.json
@@ -0,0 +1,163 @@
+{
+    "manifest_version": 3,
+    "name": "KeePassXC-Browser",
+    "version": "1.8.2.2",
+    "version_name": "1.8.2.2",
+    "description": "__MSG_extensionDescription__",
+    "author": "KeePassXC Team",
+    "icons": {
+        "16": "icons/keepassxc_16x16.png",
+        "48": "icons/keepassxc_48x48.png",
+        "64": "icons/keepassxc_64x64.png",
+        "96": "icons/keepassxc_96x96.png",
+        "128": "icons/keepassxc_128x128.png"
+    },
+    "action": {
+        "default_icon": {
+            "16": "icons/keepassxc_16x16.png",
+            "18": "icons/keepassxc_18x18.png",
+            "19": "icons/keepassxc_19x19.png",
+            "32": "icons/keepassxc_32x32.png",
+            "36": "icons/keepassxc_36x36.png",
+            "38": "icons/keepassxc_38x38.png",
+            "64": "icons/keepassxc_64x64.png"
+        },
+        "default_title": "KeePassXC-Browser",
+        "default_popup": "popups/popup.html"
+    },
+    "options_ui": {
+        "page": "options/options.html",
+        "open_in_tab": true
+    },
+    "background": {
+        "service_worker": "background/background_service.js"
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": [
+                "common/browser-polyfill.min.js",
+                "common/global.js",
+                "common/global_ui.js",
+                "common/sites.js",
+                "content/ui.js",
+                "content/banner.js",
+                "content/autocomplete.js",
+                "content/credential-autocomplete.js",
+                "content/custom-fields-banner.js",
+                "content/fields.js",
+                "content/fill.js",
+                "content/form.js",
+                "content/icons.js",
+                "content/keepassxc-browser.js",
+                "content/observer-helper.js",
+                "content/pwgen.js",
+                "content/totp-autocomplete.js",
+                "content/totp-field.js",
+                "content/username-field.js"
+            ],
+            "run_at": "document_idle",
+            "all_frames": true
+        }
+    ],
+    "commands": {
+        "fill_username_password": {
+            "description": "__MSG_contextMenuFillUsernameAndPassword__",
+            "suggested_key": {
+                "default": "Alt+Shift+U",
+                "mac": "MacCtrl+Shift+U"
+            }
+        },
+        "fill_password": {
+            "description": "__MSG_contextMenuFillPassword__",
+            "suggested_key": {
+                "default": "Alt+Shift+I",
+                "mac": "MacCtrl+Shift+I"
+            }
+        },
+        "fill_totp": {
+            "description": "__MSG_contextMenuFillTOTP__",
+            "suggested_key": {
+                "default": "Alt+Shift+O",
+                "mac": "MacCtrl+Shift+O"
+            }
+        },
+        "show_password_generator": {
+            "description": "__MSG_contextMenuShowPasswordGenerator__",
+            "suggested_key": {
+                "default": "Alt+Shift+G",
+                "mac": "MacCtrl+Shift+G"
+            }
+        },
+        "save_credentials": {
+            "description": "__MSG_contextMenuSaveCredentials__"
+        },
+        "redetect_fields": {
+            "description": "__MSG_popupRedetectButton__"
+        },
+        "choose_credential_fields": {
+            "description": "__MSG_popupChooseCredentialsText__"
+        },
+        "retrive_credentials_forced": {
+            "description": "__MSG_popupReopenButton__"
+        },
+        "request_autotype": {
+            "description": "__MSG_contextMenuRequestGlobalAutoType__"
+        },
+        "reload_extension": {
+            "description": "__MSG_popupReloadButton__"
+        }
+    },
+    "web_accessible_resources": [{
+        "resources": [
+            "icons/disconnected.svg",
+            "icons/help.svg",
+            "icons/keepassxc.svg",
+            "icons/key.svg",
+            "icons/locked.svg",
+            "icons/otp.svg",
+            "css/autocomplete.css",
+            "css/banner.css",
+            "css/button.css",
+            "css/colors.css",
+            "css/define.css",
+            "css/notification.css",
+            "css/pwgen.css",
+            "css/username.css",
+            "css/totp.css"
+        ],
+        "matches": [
+            "https://*/*",
+            "http://*/*"
+        ]
+    }],
+    "permissions": [
+        "activeTab",
+        "contextMenus",
+        "clipboardWrite",
+        "nativeMessaging",
+        "notifications",
+        "storage",
+        "tabs",
+        "webNavigation",
+        "webRequest",
+        "webRequestBlocking"
+    ],
+    "content_security_policy": {
+        "extension_pages": "default-src 'self'"
+    },
+    "host_permissions": [
+        "https://*/*",
+        "http://*/*",
+        "https://api.github.com/"
+    ],
+    "browser_specific_settings": {
+       "gecko": {
+           "id": "keepassxc-browser@keepassxc.org",
+           "strict_min_version": "101.0"
+       }
+    },
+    "default_locale": "en"
+}
diff --git a/dist/manifest_firefox.json b/dist/manifest_firefox.json
new file mode 100644
index 0000000..8c78079
--- /dev/null
+++ b/dist/manifest_firefox.json
@@ -0,0 +1,164 @@
+{
+    "manifest_version": 2,
+    "name": "KeePassXC-Browser",
+    "version": "1.8.2.2",
+    "description": "__MSG_extensionDescription__",
+    "author": "KeePassXC Team",
+    "icons": {
+        "16": "icons/keepassxc.svg",
+        "48": "icons/keepassxc.svg",
+        "64": "icons/keepassxc.svg",
+        "96": "icons/keepassxc.svg",
+        "128": "icons/keepassxc.svg"
+    },
+    "browser_action": {
+        "default_icon": {
+            "16": "icons/keepassxc.svg",
+            "18": "icons/keepassxc.svg",
+            "19": "icons/keepassxc.svg",
+            "32": "icons/keepassxc.svg",
+            "36": "icons/keepassxc.svg",
+            "38": "icons/keepassxc.svg",
+            "64": "icons/keepassxc.svg"
+        },
+        "default_title": "KeePassXC-Browser",
+        "default_popup": "popups/popup.html"
+    },
+    "options_ui": {
+        "page": "options/options.html",
+        "open_in_tab": true
+    },
+    "background": {
+        "scripts": [
+            "common/browser-polyfill.min.js",
+            "common/global.js",
+            "common/sites.js",
+            "background/nacl.min.js",
+            "background/nacl-util.min.js",
+            "background/client.js",
+            "background/keepass.js",
+            "background/httpauth.js",
+            "background/browserAction.js",
+            "background/page.js",
+            "background/event.js",
+            "background/init.js"
+        ]
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": [
+                "common/browser-polyfill.min.js",
+                "common/global.js",
+                "common/sites.js",
+                "content/ui.js",
+                "content/banner.js",
+                "content/autocomplete.js",
+                "content/credential-autocomplete.js",
+                "content/custom-fields-banner.js",
+                "content/fields.js",
+                "content/fill.js",
+                "content/form.js",
+                "content/icons.js",
+                "content/keepassxc-browser.js",
+                "content/observer-helper.js",
+                "content/pwgen.js",
+                "content/totp-autocomplete.js",
+                "content/totp-field.js",
+                "content/username-field.js"
+            ],
+            "run_at": "document_idle",
+            "all_frames": true
+        }
+    ],
+    "commands": {
+        "fill_username_password": {
+            "description": "__MSG_contextMenuFillUsernameAndPassword__",
+            "suggested_key": {
+                "default": "Alt+Shift+U",
+                "mac": "MacCtrl+Shift+U"
+            }
+        },
+        "fill_password": {
+            "description": "__MSG_contextMenuFillPassword__",
+            "suggested_key": {
+                "default": "Alt+Shift+I",
+                "mac": "MacCtrl+Shift+I"
+            }
+        },
+        "fill_totp": {
+            "description": "__MSG_contextMenuFillTOTP__",
+            "suggested_key": {
+                "default": "Alt+Shift+O",
+                "mac": "MacCtrl+Shift+O"
+            }
+        },
+        "show_password_generator": {
+            "description": "__MSG_contextMenuShowPasswordGenerator__",
+            "suggested_key": {
+                "default": "Alt+Shift+G",
+                "mac": "MacCtrl+Shift+G"
+            }
+        },
+        "save_credentials": {
+            "description": "__MSG_contextMenuSaveCredentials__"
+        },
+        "redetect_fields": {
+            "description": "__MSG_popupRedetectButton__"
+        },
+        "choose_credential_fields": {
+            "description": "__MSG_popupChooseCredentialsText__"
+        },
+        "retrive_credentials_forced": {
+            "description": "__MSG_popupReopenButton__"
+        },
+        "request_autotype": {
+            "description": "__MSG_contextMenuRequestGlobalAutoType__"
+        },
+        "reload_extension": {
+            "description": "__MSG_popupReloadButton__"
+        }
+    },
+    "web_accessible_resources": [
+        "icons/disconnected.svg",
+        "icons/help.svg",
+        "icons/keepassxc.svg",
+        "icons/key.svg",
+        "icons/locked.svg",
+        "icons/otp.svg",
+        "css/autocomplete.css",
+        "css/banner.css",
+        "css/button.css",
+        "css/colors.css",
+        "css/define.css",
+        "css/notification.css",
+        "css/pwgen.css",
+        "css/username.css",
+        "css/totp.css"
+    ],
+    "permissions": [
+        "activeTab",
+        "contextMenus",
+        "clipboardWrite",
+        "nativeMessaging",
+        "notifications",
+        "storage",
+        "tabs",
+        "webNavigation",
+        "webRequest",
+        "webRequestBlocking",
+        "https://*/*",
+        "http://*/*",
+        "https://api.github.com/"
+    ],
+    "content_security_policy": "script-src 'self' 'sha256-4nJ8uLezzRE3SiBFdkVN/uNwV9YTOGCqRXg6AvB5rCY='; object-src 'none'",
+    "applications": {
+        "gecko": {
+            "id": "keepassxc-browser@keepassxc.org",
+            "strict_min_version": "67.0"
+        }
+    },
+    "default_locale": "en"
+}
\ No newline at end of file
diff --git a/keepassxc-browser/background/background_service.js b/keepassxc-browser/background/background_service.js
new file mode 100644
index 0000000..06c21b8
--- /dev/null
+++ b/keepassxc-browser/background/background_service.js
@@ -0,0 +1,20 @@
+'use strict';
+
+try {
+    importScripts(
+        '../common/browser-polyfill.min.js',
+        '../common/global.js',
+        '../common/sites.js',
+        'nacl.min.js',
+        'nacl-util.min.js',
+        'client.js',
+        'keepass.js',
+        'httpauth.js',
+        'browserAction.js',
+        'page.js',
+        'event.js',
+        'init.js'
+    );
+} catch (e) {
+    console.log('Cannot import background scripts: ', e);
+}
diff --git a/keepassxc-browser/background/browserAction.js b/keepassxc-browser/background/browserAction.js
index 50e27c6..f757d74 100755
--- a/keepassxc-browser/background/browserAction.js
+++ b/keepassxc-browser/background/browserAction.js
@@ -9,12 +9,12 @@ browserAction.show = function(tab, popupData) {
 
     page.popupData = popupData;
 
-    browser.browserAction.setIcon({
+    browser.action.setIcon({
         path: browserAction.generateIconName(popupData.iconType)
     });
 
     if (popupData.popup) {
-        browser.browserAction.setPopup({
+        browser.action.setPopup({
             tabId: tab.id,
             popup: `popups/${popupData.popup}.html`
         });
@@ -55,7 +55,7 @@ browserAction.updateIcon = async function(tab, iconType) {
         tab = tabs[0];
     }
 
-    browser.browserAction.setIcon({
+    browser.action.setIcon({
         path: browserAction.generateIconName(iconType)
     });
 };
diff --git a/keepassxc-browser/background/event.js b/keepassxc-browser/background/event.js
index 6201429..de56646 100755
--- a/keepassxc-browser/background/event.js
+++ b/keepassxc-browser/background/event.js
@@ -157,7 +157,7 @@ kpxcEvent.onLoginPopup = async function(tab, logins) {
 };
 
 kpxcEvent.initHttpAuth = async function() {
-    httpAuth.init();
+    //httpAuth.init();
 };
 
 kpxcEvent.onHTTPAuthPopup = async function(tab, data) {
@@ -234,6 +234,7 @@ kpxcEvent.messageHandlers = {
     'get_database_hash': keepass.getDatabaseHash,
     'get_database_groups': keepass.getDatabaseGroups,
     'get_keepassxc_versions': kpxcEvent.onGetKeePassXCVersions,
+    'get_login_list': page.getLoginList,
     'get_status': kpxcEvent.onGetStatus,
     'get_tab_information': kpxcEvent.onGetTabInformation,
     'get_totp': keepass.getTotp,
diff --git a/keepassxc-browser/background/init.js b/keepassxc-browser/background/init.js
index 6d84218..c749de6 100644
--- a/keepassxc-browser/background/init.js
+++ b/keepassxc-browser/background/init.js
@@ -6,7 +6,7 @@
         await page.initSettings();
         await page.initSitePreferences();
         await page.initOpenedTabs();
-        await httpAuth.init();
+        //await httpAuth.init();
         await keepass.reconnect(null, 5000); // 5 second timeout for the first connect
         await keepass.enableAutomaticReconnect();
         await keepass.updateDatabase();
@@ -77,7 +77,7 @@ browser.tabs.onActivated.addListener(async function(activeInfo) {
  * @param {object} changeInfo
  * @param {object} tab
  */
-browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+ browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     // If the tab URL has changed (e.g. logged in) clear credentials
     if (changeInfo.url) {
         page.clearLogins(tabId);
@@ -135,14 +135,7 @@ for (const item of contextMenuItems) {
         title: item.title,
         contexts: menuContexts,
         visible: item.visible,
-        id: item.id,
-        onclick: (info, tab) => {
-            browser.tabs.sendMessage(tab.id, {
-                action: item.action
-            }).catch((err) => {
-                logError(err);
-            });
-        }
+        id: item.id || item.action
     });
 }
 
@@ -159,3 +152,11 @@ browser.commands.onCommand.addListener(async (command) => {
         }
     }
 });
+
+browser.contextMenus.onClicked.addListener(async (item, tab) => {
+    browser.tabs.sendMessage(tab.id, {
+        action: item.menuItemId
+    }).catch((err) => {
+        logError(err);
+    });
+});
diff --git a/keepassxc-browser/background/keepass.js b/keepassxc-browser/background/keepass.js
index 9e70670..c23292c 100755
--- a/keepassxc-browser/background/keepass.js
+++ b/keepassxc-browser/background/keepass.js
@@ -675,6 +675,7 @@ keepass.saveKey = function(hash, id, key) {
         keepass.keyRing[hash].created = new Date().valueOf();
         keepass.keyRing[hash].lastUsed = new Date().valueOf();
     }
+
     browser.storage.local.set({ 'keyRing': keepass.keyRing });
 };
 
diff --git a/keepassxc-browser/background/page.js b/keepassxc-browser/background/page.js
index 6e2b020..057245c 100755
--- a/keepassxc-browser/background/page.js
+++ b/keepassxc-browser/background/page.js
@@ -371,6 +371,14 @@ page.setAutoSubmitPerformed = async function(tab) {
     }
 };
 
+page.getLoginList = async function(tab, tabId) {
+    if (page.tabs[tabId]) {
+        return page.tabs[tabId].loginList;
+    }
+
+    return [];
+};
+
 // Update context menu for attribute filling
 page.updateContextMenu = async function(tab, credentials) {
     // Remove any old attribute items
@@ -407,6 +415,7 @@ page.updateContextMenu = async function(tab, credentials) {
 const createContextMenuItem = function({action, args, ...options}) {
     return browser.contextMenus.create({
         contexts: menuContexts,
+        id: action,
         onclick: (info, tab) => {
             browser.tabs.sendMessage(tab.id, {
                 action: action,
diff --git a/keepassxc-browser/common/global.js b/keepassxc-browser/common/global.js
index cbd874a..de25a54 100755
--- a/keepassxc-browser/common/global.js
+++ b/keepassxc-browser/common/global.js
@@ -186,11 +186,3 @@ const getFileAndLine = function() {
 
     return result;
 };
-
-HTMLElement.prototype.show = function() {
-    this.style.display = 'block';
-};
-
-HTMLElement.prototype.hide = function() {
-    this.style.display = 'none';
-};
diff --git a/keepassxc-browser/common/global_ui.js b/keepassxc-browser/common/global_ui.js
new file mode 100644
index 0000000..582a441
--- /dev/null
+++ b/keepassxc-browser/common/global_ui.js
@@ -0,0 +1,9 @@
+'use strict';
+
+HTMLElement.prototype.show = function() {
+    this.style.display = 'block';
+};
+
+HTMLElement.prototype.hide = function() {
+    this.style.display = 'none';
+};
diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js
index dd3a76e..e1bc5d3 100755
--- a/keepassxc-browser/content/keepassxc-browser.js
+++ b/keepassxc-browser/content/keepassxc-browser.js
@@ -10,7 +10,6 @@ const sendMessage = async function(action, args) {
     return await browser.runtime.sendMessage({ action: action, args: args });
 };
 
-
 /**
  * @Object kpxc
  * The main content script object.
diff --git a/keepassxc-browser/manifest.json b/keepassxc-browser/manifest.json
index 9f584f6..391d8a6 100755
--- a/keepassxc-browser/manifest.json
+++ b/keepassxc-browser/manifest.json
@@ -1,5 +1,5 @@
 {
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "KeePassXC-Browser",
     "version": "1.8.2.2",
     "version_name": "1.8.2.2",
@@ -12,7 +12,7 @@
         "96": "icons/keepassxc_96x96.png",
         "128": "icons/keepassxc_128x128.png"
     },
-    "browser_action": {
+    "action": {
         "default_icon": {
             "16": "icons/keepassxc_16x16.png",
             "18": "icons/keepassxc_18x18.png",
@@ -30,21 +30,8 @@
         "open_in_tab": true
     },
     "background": {
-        "scripts": [
-            "common/browser-polyfill.min.js",
-            "common/global.js",
-            "common/sites.js",
-            "background/nacl.min.js",
-            "background/nacl-util.min.js",
-            "background/client.js",
-            "background/keepass.js",
-            "background/httpauth.js",
-            "background/browserAction.js",
-            "background/page.js",
-            "background/event.js",
-            "background/init.js"
-            ]
-        },
+        "service_worker": "background/background_service.js"
+    },
     "content_scripts": [
         {
             "matches": [
@@ -53,6 +40,7 @@
             "js": [
                 "common/browser-polyfill.min.js",
                 "common/global.js",
+                "common/global_ui.js",
                 "common/sites.js",
                 "content/ui.js",
                 "content/banner.js",
@@ -122,23 +110,29 @@
             "description": "__MSG_popupReloadButton__"
         }
     },
-    "web_accessible_resources": [
-        "icons/disconnected.svg",
-        "icons/help.svg",
-        "icons/keepassxc.svg",
-        "icons/key.svg",
-        "icons/locked.svg",
-        "icons/otp.svg",
-        "css/autocomplete.css",
-        "css/banner.css",
-        "css/button.css",
-        "css/colors.css",
-        "css/define.css",
-        "css/notification.css",
-        "css/pwgen.css",
-        "css/username.css",
-        "css/totp.css"
-    ],
+    "web_accessible_resources": [{
+        "resources": [
+            "icons/disconnected.svg",
+            "icons/help.svg",
+            "icons/keepassxc.svg",
+            "icons/key.svg",
+            "icons/locked.svg",
+            "icons/otp.svg",
+            "css/autocomplete.css",
+            "css/banner.css",
+            "css/button.css",
+            "css/colors.css",
+            "css/define.css",
+            "css/notification.css",
+            "css/pwgen.css",
+            "css/username.css",
+            "css/totp.css"
+        ],
+        "matches": [
+            "https://*/*",
+            "http://*/*"
+        ]
+    }],
     "permissions": [
         "activeTab",
         "contextMenus",
@@ -149,17 +143,20 @@
         "tabs",
         "webNavigation",
         "webRequest",
-        "webRequestBlocking",
+        "webRequestBlocking"
+    ],
+    "content_security_policy": {
+        "extension_pages": "default-src 'self'"
+    },
+    "host_permissions": [
         "https://*/*",
         "http://*/*",
         "https://api.github.com/"
     ],
-    "content_security_policy": "script-src 'self' 'sha256-UD5WN2QEhRDEZ6vkLdHKFlkHwzbemzW2ppJiOLooI8o='; object-src 'none'",
-    "content_security_policy": "script-src 'self' 'sha256-4nJ8uLezzRE3SiBFdkVN/uNwV9YTOGCqRXg6AvB5rCY='; object-src 'none'",
-    "applications": {
+    "browser_specific_settings": {
        "gecko": {
            "id": "keepassxc-browser@keepassxc.org",
-           "strict_min_version": "67.0"
+           "strict_min_version": "101.0"
        }
    },
    "default_locale": "en"
diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index b6933f4..340af6c 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -13,19 +13,20 @@
     <link rel="icon" type="image/png" href="../icons/keepassxc_96x96.png" sizes="96x96">
     <script src="../common/browser-polyfill.min.js"></script>
     <script src="../common/global.js"></script>
+    <script src="../common/global_ui.js"></script>
     <script src="../common/sites.js"></script>
     <script src="../bootstrap/bootstrap.min.js"></script>
     <script src="options.js"></script>
     <script src="../common/translate.js" defer></script>
   </head>
   <body class="pt-3 pb-5">
-    <script>
+    <!--<script>
     // We eagerly load the theme here to avoid a white flash
     let colorTheme = localStorage.getItem('colorTheme');
     if (colorTheme) {
       document.body.setAttribute('data-color-theme', colorTheme);
     }
-    </script>
+    </script>-->
     <div class="container-fluid">
       <div class="row">
         <nav class="col-md-3 col-lg-2 sidebar">
diff --git a/keepassxc-browser/popups/popup.css b/keepassxc-browser/popups/popup.css
index e6ab076..f6ac43f 100644
--- a/keepassxc-browser/popups/popup.css
+++ b/keepassxc-browser/popups/popup.css
@@ -115,6 +115,14 @@ code {
     text-align: start;
 }
 
+#filter-block,
+#not-configured,
+#need-reconfigure,
+#configured-not-associated,
+#configured-and-associated,
+#error-encountered,
+#database-not-opened,
+#username-field-detected,
 #update-available,
 #getting-started-guide,
 #troubleshooting-guide {
@@ -164,6 +172,10 @@ code {
     text-align: right;
 }
 
+#left-margin {
+    margin-left: 1em;
+}
+
 @media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
     body {
         background: var(--kpxc-background-color) !important;
diff --git a/keepassxc-browser/popups/popup.html b/keepassxc-browser/popups/popup.html
index 74fac81..34809ca 100644
--- a/keepassxc-browser/popups/popup.html
+++ b/keepassxc-browser/popups/popup.html
@@ -9,15 +9,16 @@
     <link rel="stylesheet" href="../fonts/fork-awesome.min.css" />
     <script src="../common/browser-polyfill.min.js"></script>
     <script src="../common/global.js"></script>
+    <script src="../common/global_ui.js"></script>
     <script src="../bootstrap/bootstrap.min.js"></script>
     <script src="popup_functions.js"></script>
     <script defer src="popup.js"></script>
     <script defer src="../common/translate.js"></script>
   </head>
   <body>
-    <script>
+    <!--<script>
       setDefaultPopupSize();
-    </script>
+    </script>-->
     <div class="container">
       <div id="settings" class="settings">
         <div class="function-buttons-area">
@@ -61,16 +62,16 @@
         <p><div class="loader"></div> <span data-i18n="popupCheckingStatus"/></p>
       </div>
 
-      <div id="not-configured" style="display: none">
+      <div id="not-configured">
         <p data-i18n="popupNotConfigured"></p>
         <div id="right-align">
           <button id="connect-button" class="btn btn-sm btn-primary"><i class="fa fa-link" aria-hidden="true"></i> <span data-i18n="popupConnectButton"></span></button>
         </div>
       </div>
 
-      <div id="need-reconfigure" style="display: none">
+      <div id="need-reconfigure">
         <p data-i18n="popupNeedReconfigure"></p>
-        <p style="margin-left: 1em">
+        <p id="left-margin">
           <code id="need-reconfigure-message"></code>
         </p>
         <p data-i18n="popupNeedReconfigureMessage"></p>
@@ -79,20 +80,20 @@
         </div>
       </div>
 
-      <div id="configured-not-associated" style="display: none">
+      <div id="configured-not-associated">
         <span data-i18n="popupConfiguredNotAssociated" i18n-placeholder="<span class='bg-warning' id='unassociated-identifier'></span>"></span>
       </div>
 
-      <div id="configured-and-associated" style="display: none">
+      <div id="configured-and-associated">
         <p data-i18n="popupConfiguredAndAssociated" i18n-placeholder="<span class='bg-success' id='associated-identifier'></span>"></p>
         <div id="right-align">
           <button id="redetect-fields-button" class="btn btn-sm btn-primary"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupRedetectButton"></span></button>
         </div>
       </div>
 
-      <div id="error-encountered" style="display: none">
+      <div id="error-encountered">
         <p data-i18n="popupErrorEncountered"></p>
-        <p style="margin-left: 1em">
+        <p id="left-margin">
           <code id="error-message"></code>
         </p>
         <div id="right-align">
@@ -100,9 +101,9 @@
         </div>
       </div>
 
-      <div id="database-not-opened" style="display: none">
+      <div id="database-not-opened">
         <p data-i18n="popupErrorEncountered"></p>
-        <p style="margin-left: 1em">
+        <p id="left-margin">
           <code id="database-error-message"></code>
         </p>
         <div id="right-align">
@@ -110,7 +111,7 @@
         </div>
       </div>
 
-      <div id="username-field-detected" style="display: none">
+      <div id="username-field-detected">
         <hr />
         <p data-i18n="popupUsernameFieldDetected"></p>
         <div id="right-align">
diff --git a/keepassxc-browser/popups/popup_functions.js b/keepassxc-browser/popups/popup_functions.js
index 8795b1c..557fab6 100644
--- a/keepassxc-browser/popups/popup_functions.js
+++ b/keepassxc-browser/popups/popup_functions.js
@@ -48,6 +48,20 @@ async function initColorTheme() {
     }
 }
 
+async function getLoginData() {
+    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+    if (tabs.length === 0) {
+        return [];
+    }
+
+    const logins = await browser.runtime.sendMessage({
+        action: 'get_login_list',
+        args: tabs[0].id
+    });
+
+    return logins;
+}
+
 // Sets default popup size for Chromium based browsers to prevent flash on popup open
 function setDefaultPopupSize() {
     if (!isFirefox()) {
diff --git a/keepassxc-browser/popups/popup_httpauth.html b/keepassxc-browser/popups/popup_httpauth.html
index ff66afd..b2e44a8 100644
--- a/keepassxc-browser/popups/popup_httpauth.html
+++ b/keepassxc-browser/popups/popup_httpauth.html
@@ -9,15 +9,16 @@
     <link rel="stylesheet" href="../fonts/fork-awesome.min.css" />
     <script src="../common/browser-polyfill.min.js"></script>
     <script src="../common/global.js"></script>
+    <script src="../common/global_ui.js"></script>
     <script src="../bootstrap/bootstrap.min.js"></script>
     <script src="popup_functions.js"></script>
     <script defer src="popup_httpauth.js"></script>
     <script defer src="../common/translate.js"></script>
   </head>
   <body>
-    <script>
+    <!--<script>
       setDefaultPopupSize();
-    </script>
+    </script>-->
     <div class="container">
       <div id="settings" class="settings">
         <div class="function-buttons-area">
@@ -43,12 +44,12 @@
         </p>
       </div>
 
-      <div id="database-not-opened" style="display: none">
+      <div id="database-not-opened">
         <p data-i18n="popupErrorEncountered"/>
-        <p style="margin-left: 1em">
+        <p id="left-margin">
           <code id="database-error-message"></code>
         </p>
-        <div style="text-align: right">
+        <div id="right-align">
           <button id="reopen-database-button" class="btn btn-sm btn-primary"><i class="fa fa-lock" aria-hidden="true"></i> <span data-i18n="popupReopenButton"></span></button>
         </div>
       </div>
diff --git a/keepassxc-browser/popups/popup_httpauth.js b/keepassxc-browser/popups/popup_httpauth.js
index 5ab96e0..cc7ac58 100644
--- a/keepassxc-browser/popups/popup_httpauth.js
+++ b/keepassxc-browser/popups/popup_httpauth.js
@@ -1,11 +1,5 @@
 'use strict';
 
-const getLoginData = async () => {
-    const global = await browser.runtime.getBackgroundPage();
-    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-    return global.page.tabs[tabs[0].id].loginList;
-};
-
 (async () => {
     resizePopup();
     await initColorTheme();
diff --git a/keepassxc-browser/popups/popup_login.html b/keepassxc-browser/popups/popup_login.html
index 37f4ba6..6871f67 100644
--- a/keepassxc-browser/popups/popup_login.html
+++ b/keepassxc-browser/popups/popup_login.html
@@ -9,15 +9,16 @@
     <link rel="stylesheet" href="../fonts/fork-awesome.min.css" />
     <script src="../common/browser-polyfill.min.js"></script>
     <script src="../common/global.js"></script>
+    <script src="../common/global_ui.js"></script>
     <script src="../bootstrap/bootstrap.min.js"></script>
     <script src="popup_functions.js"></script>
     <script defer src="popup_login.js"></script>
     <script defer src="../common/translate.js"></script>
   </head>
   <body>
-    <script>
+    <!--<script>
       setDefaultPopupSize();
-    </script>
+    </script>-->
     <div class="container">
       <div id="settings" class="settings">
         <div class="function-buttons-area">
@@ -37,16 +38,16 @@
 
       <div id="credentialsList" class="credentials">
         <p data-i18n="popupLoginText"></p>
-        <div id="filter-block" style="display: none;">
+        <div id="filter-block">
           <label for="login-filter" data-i18n="popupFilterText"></label>
           <input type="text" id="login-filter">
         </div>
         <div id="login-list" class="list-group"></div>
       </div>
 
-       <div id="database-not-opened" style="display: none">
+       <div id="database-not-opened">
         <p data-i18n="popupErrorEncountered"/>
-        <p style="margin-left: 1em">
+        <p id="left-margin">
           <code id="database-error-message"></code>
         </p>
         <div id="right-align">
diff --git a/keepassxc-browser/popups/popup_login.js b/keepassxc-browser/popups/popup_login.js
index ac2d547..c6604d1 100644
--- a/keepassxc-browser/popups/popup_login.js
+++ b/keepassxc-browser/popups/popup_login.js
@@ -6,14 +6,12 @@
 
     $('#lock-database-button').show();
 
-    const global = await browser.runtime.getBackgroundPage();
     const tabs = await browser.tabs.query({ active: true, currentWindow: true });
     if (tabs.length === 0) {
-        return; // For example: only the background devtools or a popup are opened
+        return [];
     }
 
-    const tab = tabs[0];
-    const logins = global.page.tabs[tab.id].loginList;
+    const logins = await getLoginData();
     const ll = document.getElementById('login-list');
 
     for (let i = 0; i < logins.length; i++) {
@@ -29,7 +27,7 @@
             }
 
             const id = e.target.id;
-            browser.tabs.sendMessage(tab.id, {
+            browser.tabs.sendMessage(tabs[0].id, {
                 action: 'fill_user_pass_with_specific_login',
                 id: Number(id),
                 uuid: uuid