From c8c83df1ebb220994a67a23f952f1c179657a50e Mon Sep 17 00:00:00 2001
From: ddjain <nnd.darshan@gmail.com>
Date: Fri, 13 Mar 2026 17:54:31 +0530
Subject: [PATCH] feat: add autofill append mode for concatenated OTP
 authentication (#1516)

Signed-off-by: ddjain <nnd.darshan@gmail.com>
Made-with: Cursor
---
 _locales/en/messages.json                | 12 ++++++++++++
 src/components/Popup/EntryComponent.vue  |  1 +
 src/components/Popup/PreferencesPage.vue | 17 +++++++++++++++++
 src/content.ts                           | 14 ++++++++++++--
 src/definitions/module-interface.d.ts    |  1 +
 src/models/settings.ts                   |  1 +
 src/store/Menu.ts                        | 10 ++++++++++
 7 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1509958f..0e9950d7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -297,6 +297,18 @@
     "message": "Use Autofill",
     "description": "Use Autofill"
   },
+  "autofill_mode": {
+    "message": "Autofill mode",
+    "description": "Label for autofill mode selector"
+  },
+  "autofill_mode_replace": {
+    "message": "Replace (dedicated OTP field)",
+    "description": "Autofill replaces the value in detected OTP field"
+  },
+  "autofill_mode_append": {
+    "message": "Append to focused field (password + OTP)",
+    "description": "Autofill appends the code to the currently focused input"
+  },
   "use_high_contrast": {
     "message": "Use High Contrast",
     "description": "Use High Contrast"
diff --git a/src/components/Popup/EntryComponent.vue b/src/components/Popup/EntryComponent.vue
index 92099b5b..6a4a2684 100644
--- a/src/components/Popup/EntryComponent.vue
+++ b/src/components/Popup/EntryComponent.vue
@@ -227,6 +227,7 @@ export default Vue.extend({
                 chrome.tabs.sendMessage(tab.id, {
                   action: "pastecode",
                   code: entry.code,
+                  mode: this.$store.state.menu.autofillMode,
                 });
               }
             }
diff --git a/src/components/Popup/PreferencesPage.vue b/src/components/Popup/PreferencesPage.vue
index 299b9d8d..2db6850d 100644
--- a/src/components/Popup/PreferencesPage.vue
+++ b/src/components/Popup/PreferencesPage.vue
@@ -30,6 +30,15 @@
       <option value="20">20%</option>
     </a-select-input>
     <a-toggle-input :label="i18n.use_autofill" v-model="useAutofill" />
+    <a-select-input
+      v-if="useAutofill"
+      :label="i18n.autofill_mode"
+      v-model="autofillMode"
+      style="margin-left: 10px"
+    >
+      <option value="replace">{{ i18n.autofill_mode_replace }}</option>
+      <option value="append">{{ i18n.autofill_mode_append }}</option>
+    </a-select-input>
     <a-toggle-input
       :label="i18n.browser_sync"
       v-model="browserSync"
@@ -83,6 +92,14 @@ export default Vue.extend({
         this.$store.commit("menu/setAutofill", useAutofill);
       },
     },
+    autofillMode: {
+      get(): "replace" | "append" {
+        return this.$store.state.menu.autofillMode;
+      },
+      set(autofillMode: "replace" | "append") {
+        this.$store.commit("menu/setAutofillMode", autofillMode);
+      },
+    },
     smartFilter: {
       get(): boolean {
         return this.$store.state.menu.smartFilter;
diff --git a/src/content.ts b/src/content.ts
index 5ac1805c..c05a8c4d 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -43,7 +43,7 @@ if (!document.getElementById("__ga_grayLayout__")) {
         alert(chrome.i18n.getMessage("updateSuccess"));
         break;
       case "pastecode":
-        pasteCode(message.code);
+        pasteCode(message.code, message.mode || "replace");
         break;
       case "stopCapture": {
         const captureBox = document.getElementById("__ga_captureBox__");
@@ -282,7 +282,17 @@ async function qrDecode(
   qr.src = url;
 }
 
-function pasteCode(code: string) {
+function pasteCode(code: string, mode: "replace" | "append" = "replace") {
+  if (mode === "append") {
+    const activeEl = document.activeElement;
+    if (activeEl && activeEl.tagName === "INPUT") {
+      const inputBox = activeEl as HTMLInputElement;
+      inputBox.value = inputBox.value + code;
+      fireInputEvents(inputBox);
+    }
+    return;
+  }
+
   const _inputBoxes = document.getElementsByTagName("input");
   const inputBoxes: HTMLInputElement[] = [];
   for (let i = 0; i < _inputBoxes.length; i++) {
diff --git a/src/definitions/module-interface.d.ts b/src/definitions/module-interface.d.ts
index 49426631..0b42e628 100644
--- a/src/definitions/module-interface.d.ts
+++ b/src/definitions/module-interface.d.ts
@@ -34,6 +34,7 @@ interface MenuState {
   zoom: number;
   autolock: number;
   useAutofill: boolean;
+  autofillMode: "replace" | "append";
   smartFilter: boolean;
   enableContextMenu: boolean;
   theme: string;
diff --git a/src/models/settings.ts b/src/models/settings.ts
index aac7a84b..97df0f52 100644
--- a/src/models/settings.ts
+++ b/src/models/settings.ts
@@ -25,6 +25,7 @@ interface UserSettingsData {
   // syncable settings
   advisorIgnoreList?: string[];
   autofill?: boolean;
+  autofillMode?: "replace" | "append";
   autolock?: number;
   enableContextMenu?: boolean;
   encodedPhrase?: string;
diff --git a/src/store/Menu.ts b/src/store/Menu.ts
index 48487d6e..72153857 100644
--- a/src/store/Menu.ts
+++ b/src/store/Menu.ts
@@ -11,6 +11,8 @@ export class Menu implements Module {
         version: chrome.runtime.getManifest()?.version || "0.0.0",
         zoom: Number(UserSettings.items.zoom) || 100,
         useAutofill: UserSettings.items.autofill === true,
+        autofillMode:
+          UserSettings.items.autofillMode === "append" ? "append" : "replace",
         smartFilter: UserSettings.items.smartFilter === true,
         enableContextMenu: UserSettings.items.enableContextMenu === true,
         theme: UserSettings.items.theme || (isSafari ? "flat" : "normal"),
@@ -38,6 +40,14 @@ export class Menu implements Module {
           UserSettings.items.autofill = useAutofill;
           UserSettings.commitItems();
         },
+        setAutofillMode(
+          state: MenuState,
+          autofillMode: "replace" | "append"
+        ) {
+          state.autofillMode = autofillMode;
+          UserSettings.items.autofillMode = autofillMode;
+          UserSettings.commitItems();
+        },
         setSmartFilter(state: MenuState, smartFilter: boolean) {
           state.smartFilter = smartFilter;
           UserSettings.items.smartFilter = smartFilter;