autofill implementation from current tab sites in popup.

src/autofillContent.js

@@ -76,12 +76,12 @@ End 1Password Extension
 */
 
 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-    if (msg.text === 'collectFormData') {
+    if (msg.command === 'collectPageDetails') {
-        var formData = collect(document);
+        var pageDetails = collect(document);
-        sendResponse(JSON.parse(formData));
+        sendResponse(JSON.parse(pageDetails));
         return true;
     }
-    else if (msg.text === 'fillForm') {
+    else if (msg.command === 'fillForm') {
         fill(document, msg.fillScript);
         sendResponse();
         return true;

src/manifest.json

@@ -13,7 +13,7 @@
   },
   "content_scripts": [
     {
-      "js": [ "formDataContent.js" ],
+      "js": [ "autofillContent.js" ],
       "matches": [ "http://*/*", "https://*/*", "file:///*" ],
       "run_at": "document_start"
     },

src/popup/app/current/currentController.js

@@ -2,12 +2,18 @@ angular
     .module('bit.current')
 
     .controller('currentController', function ($scope, siteService, cipherService, tldjs, toastr, $q) {
+        var pageDetails = null,
+            tabId = null;
+        $scope.canAutofill = false;
+
         chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
             var url = null;
-            var id = null;
             if (tabs.length > 0) {
-                url = tabs[0].url
+                url = tabs[0].url;
-                id = tabs[0].id
+                tabId = tabs[0].id;
+            }
+            else {
+                return;
             }
 
             var domain = tldjs.getDomain(url);
@@ -16,7 +22,11 @@ angular
                 return;
             }
 
-            chrome.tabs.sendMessage(id, { text: 'collectFormData' }, function (formData) {
+            chrome.tabs.sendMessage(tabId, { command: 'collectPageDetails' }, function (details) {
+                pageDetails = details;
+                $scope.canAutofill = true;
+            });
+
             var filteredPromises = [],
                 filteredSites = [],
                 promises = [],
@@ -74,5 +84,109 @@ angular
                 });
             });
         });
-        });
+
+        $scope.fillSite = function (site) {
+            var fillScript = null;
+            if (site && $scope.canAutofill && pageDetails) {
+                fillScript = makeFillScript(site.username, site.password);
+            }
+
+            if (tabId && fillScript) {
+                chrome.tabs.sendMessage(tabId, {
+                    command: 'fillForm',
+                    fillScript: fillScript
+                }, function () { });
+            }
+        };
+
+        function makeFillScript(fillUsername, fillPassword) {
+            if (!pageDetails) {
+                return null;
+            }
+
+            var fillScript = {
+                documentUUID: pageDetails.documentUUID,
+                script: [],
+                autosubmit: null,
+                properties: {},
+                options: {},
+                metadata: {}
+            };
+
+            var passwordFields = [];
+            for (var i = 0; i < pageDetails.fields.length; i++) {
+                if (pageDetails.fields[i].type == 'password') {
+                    passwordFields.push(pageDetails.fields[i]);
+                }
+            }
+
+            var passwordForms = [];
+            for (var formKey in pageDetails.forms) {
+                for (var j = 0; j < passwordFields.length; j++) {
+                    if (formKey == passwordFields[j].form) {
+                        passwordForms.push(pageDetails.forms[formKey]);
+                        break;
+                    }
+                }
+            }
+
+            if (!passwordForms.length) {
+                return null;
+            }
+
+            var loginForm = null;
+            if (passwordForms.length > 1) {
+                // More than one form with a password field is on the page.
+                // This usually occurs when a website has a login and signup form on the same page.
+                // Let's try to guess which one is the login form.
+
+                // First let's try to guess the correct login form by examining the form attribute strings
+                // for common login form attribute.
+
+                // TODO
+
+                if (!loginForm) {
+                    // Next we can try to find the login form that only has one password field. Typically
+                    // a registration form may have two password fields for password confirmation.
+
+                    // TODO
+                }
+            }
+
+            if (!loginForm) {
+                loginForm = passwordForms[0];
+            }
+
+            var password = null;
+            for (i = 0; i < pageDetails.fields.length; i++) {
+                var f = pageDetails.fields[i];
+                if (f.form == loginForm.opid && f.type == 'password') {
+                    password = f;
+                    break;
+                }
+            }
+
+            var username = null;
+            for (i = 0; i < pageDetails.fields.length; i++) {
+                var f = pageDetails.fields[i];
+                if (f.form == loginForm.opid && (f.type == 'text' || f.type == 'email')
+                    && f.elementNumber < password.elementNumber) {
+                    username = f;
+                }
+            }
+
+            if (username) {
+                fillScript.script.push(['click_on_opid', username.opid]);
+                fillScript.script.push(['fill_by_opid', username.opid, fillUsername]);
+            }
+
+            fillScript.script.push(['click_on_opid', password.opid]);
+            fillScript.script.push(['fill_by_opid', password.opid, fillPassword]);
+
+            if (loginForm.htmlAction) {
+                fillScript.autosubmit = { focusOpid: password.opid };
+            }
+
+            return fillScript;
+        }
     });