Add feature: highlight the form fields Browserpass will fill

src/background.js

@@ -43,7 +43,7 @@ chrome.browserAction.setBadgeBackgroundColor({
 });
 
 // watch for tab updates
-chrome.tabs.onUpdated.addListener((tabId, info) => {
+chrome.tabs.onUpdated.addListener(async (tabId, info) => {
     // unregister any auth listeners for this tab
     if (info.status === "complete") {
         if (authListeners[tabId]) {
@@ -53,7 +53,25 @@ chrome.tabs.onUpdated.addListener((tabId, info) => {
     }
 
     // redraw badge counter
-    updateMatchingPasswordsCount(tabId);
+    let matchCount = await updateMatchingPasswordsCount(tabId);
+
+    // highlight the default login & secret fields
+    if (matchCount) {
+        try {
+            await chrome.tabs.executeScript(tabId, {
+                allFrames: true,
+                file: "js/inject.dist.js",
+            });
+            await chrome.tabs.executeScript(tabId, {
+                allFrames: true,
+                code: `window.browserpass.highlightLoginFields();`,
+            });
+        } catch (e) {
+            // errors here mean that the browser denied the script injection, typically
+            // because the tab is not allowed to run content scripts (e.g. chrome://
+            // pages etc). We can safely ignore these errors.
+        }
+    }
 });
 
 // handle incoming messages
@@ -155,6 +173,8 @@ async function updateMatchingPasswordsCount(tabId, forceRefresh = false) {
             text: "" + (matchedPasswordsCount || ""),
             tabId: tabId,
         });
+
+        return matchedPasswordsCount;
     } catch (e) {
         console.log(e);
     }

src/inject.js

@@ -135,6 +135,23 @@
         ],
     };
 
+    /**
+     * Highlight fields to be filled for login & password
+     *
+     * @since 3.8.1
+     *
+     * @return void
+     */
+    function highlightLoginFields() {
+        let loginForm = form(INPUT_FIELDS),
+            login = find(USERNAME_FIELDS, loginForm),
+            secret = find(PASSWORD_FIELDS, loginForm),
+            openid = find(OPENID_FIELDS, loginForm);
+        if (login) login.style.outline = "2px solid #1A7B84";
+        if (secret) secret.style.outline = "2px solid #1A7B84";
+        if (openid) openid.style.outline = "2px solid #1A7B84";
+    }
+
     /**
      * Fill password
      *
@@ -498,5 +515,6 @@
     window.browserpass = {
         fillLogin: fillLogin,
         focusOrSubmit: focusOrSubmit,
+        highlightLoginFields: highlightLoginFields,
     };
 })();