Fix hidden root navigation and browser fill matching

browser/extension/content.js

@@ -13,10 +13,24 @@ function isVisibleInput(input) {
 }
 
 function dispatchFillEvents(input) {
-  input.dispatchEvent(new Event("input", { bubbles: true }));
+  if (typeof InputEvent === "function") {
+    input.dispatchEvent(new InputEvent("input", { bubbles: true, data: input.value, inputType: "insertText" }));
+  } else {
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  }
   input.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
+function setInputValue(input, value) {
+  const prototype = Object.getPrototypeOf(input);
+  const descriptor = prototype ? Object.getOwnPropertyDescriptor(prototype, "value") : null;
+  if (descriptor?.set) {
+    descriptor.set.call(input, value);
+    return;
+  }
+  input.value = value;
+}
+
 function findPasswordInput() {
   return Array.from(document.querySelectorAll('input[type="password"]')).find(isVisibleInput) || null;
 }
@@ -24,12 +38,16 @@ function findPasswordInput() {
 function findUsernameInput(passwordInput) {
   const form = passwordInput?.form || null;
   const scope = form || document;
-  const candidates = Array.from(scope.querySelectorAll('input[type="text"], input[type="email"], input:not([type])'))
+  const candidates = Array.from(scope.querySelectorAll('input[type="text"], input[type="email"], input:not([type]), input[autocomplete="username"], input[autocomplete="email"]'))
     .filter(isVisibleInput);
   if (passwordInput) {
-    const sameForm = candidates.find((input) => input.form === passwordInput.form);
-    if (sameForm) {
-      return sameForm;
+    const sameForm = candidates.filter((input) => input.form === passwordInput.form);
+    if (sameForm.length !== 0) {
+      const priorSibling = sameForm.find((input) =>
+        typeof input.compareDocumentPosition === "function" &&
+        Boolean(input.compareDocumentPosition(passwordInput) & Node.DOCUMENT_POSITION_FOLLOWING)
+      );
+      return priorSibling || sameForm[0];
     }
   }
   return candidates[0] || null;
@@ -41,12 +59,12 @@ function fillCredential(credential) {
 
   if (usernameInput && credential.username) {
     usernameInput.focus();
-    usernameInput.value = credential.username;
+    setInputValue(usernameInput, credential.username);
     dispatchFillEvents(usernameInput);
   }
   if (passwordInput && credential.password) {
     passwordInput.focus();
-    passwordInput.value = credential.password;
+    setInputValue(passwordInput, credential.password);
     dispatchFillEvents(passwordInput);
   }
 

browser/extension/manifest.firefox.json

@@ -6,6 +6,7 @@
   "permissions": ["activeTab", "nativeMessaging", "storage", "tabs"],
   "host_permissions": ["http://*/*", "https://*/*"],
   "background": {
+    "scripts": ["background.js"],
     "service_worker": "background.js"
   },
   "action": {