chrome extension integration

extension/content.js

@@ -1,8 +1,8 @@
-console.log('content script');
 import {getLoginForm} from './form-parser';
-
 chrome.runtime.onMessage.addListener(message => {
   const loginForm = getLoginForm();
+  loginForm.loginField.value = message.login;
   loginForm.passwordField.value = message.password;
+  loginForm.form.submit();
 });
 

extension/dist/content.min.js

@@ -0,0 +1,40 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var _formParser = require('./form-parser');
+
+chrome.runtime.onMessage.addListener(function (message) {
+  var loginForm = (0, _formParser.getLoginForm)();
+  loginForm.loginField.value = message.login;
+  loginForm.passwordField.value = message.password;
+  loginForm.form.submit();
+});
+
+},{"./form-parser":2}],2:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function getLoginForm() {
+  var loginForm = {};
+  Array.from(document.forms).forEach(function (form) {
+    var i = 0;
+    var inputs = Array.from(document.querySelectorAll('input'));
+    inputs.forEach(function (node) {
+      if (node.type === 'password') {
+        loginForm.form = form;
+        loginForm.passwordField = node;
+        if (i > 0) {
+          loginForm.loginField = inputs[i - 1];
+        }
+      }
+      i++;
+    });
+  });
+  return loginForm;
+}
+
+exports.getLoginForm = getLoginForm;
+
+},{}]},{},[1]);

extension/manifest.json

@@ -10,7 +10,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.js"],
+      "js": ["dist/content.min.js"],
       "run_at": "document_end"
     }
   ],

extension/popup.html

@@ -15,7 +15,6 @@
         <p><input id="login-container-btn" type="submit" value="Let's go !"></p>
     </form>
 </div>
-<!--<script src="tldjs.js"></script>-->
-<!--<script src="lesspass.js"></script>-->
+<script src="dist/popup.min.js"></script>
 </body>
 </html>

extension/popup.js

@@ -5,36 +5,63 @@ const emailField = document.querySelector('#login-container-email');
 const passwordField = document.querySelector('#login-container-password');
 const siteField = document.querySelector('#login-container-site');
 
-function createPassword(email, masterPassword, site, options) {
-  const entry = {
-    site,
-    password: options.password
-  };
-
-  return lesspass.createMasterPassword(email, masterPassword).then(hash => {
-    return lesspass.createPassword(hash, entry);
+function getLocalStore(storeName) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get(storeName, result => {
+      if (result === null) {
+        return reject(`${storeName} not found`);
+      }
+      resolve(result);
+    });
+  });
+}
+
+function updateStore(store) {
+  return new Promise(resolve => {
+    chrome.storage.local.set(store, () => {
+      resolve(store);
+    });
+  });
+}
+
+function getCurrentTab() {
+  return new Promise(resolve => {
+    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+      resolve(tabs[0]);
+    });
   });
 }
 
 document.getElementById('login-container-btn').addEventListener('click', () => {
   const email = emailField.value;
-  const password = passwordField.value;
   const site = siteField.value;
+  const masterPassword = passwordField.value;
 
-  if (!email || !password || !site) {
+  if (!email || !masterPassword || !site) {
     return;
   }
 
-  chrome.storage.local.get('lesspassStore', result => {
-    const store = result.lesspassStore;
-    store.email = email;
-    chrome.storage.local.set({lesspassStore: store});
+  const storagePromise = getLocalStore('lesspassStore').then(store => {
+    store.lesspassStore.email = email;
+    return updateStore(store);
+  });
 
-    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
-      createPassword(email, password, site, store.options).then(lesspassPassword => {
-        chrome.tabs.sendMessage(tabs[0].id, {password: lesspassPassword});
-      });
+  const hashPromise = lesspass.createMasterPassword(email, masterPassword);
+
+  const lesspassPromise = Promise.all([hashPromise, storagePromise])
+    .then(values => {
+      const entry = {
+        site,
+        password: values[1].lesspassStore.password
+      };
+      return lesspass.createPassword(values[0], entry);
     });
+
+  const tabPromise = getCurrentTab();
+
+  Promise.all([lesspassPromise, tabPromise]).then(values => {
+    chrome.tabs.sendMessage(values[1].id, {login: email, password: values[0]});
+    window.close();
   });
 });
 
@@ -46,15 +73,35 @@ function setEmail(email) {
   emailField.value = email;
 }
 
+function initStore(callback) {
+  chrome.storage.local.get('lesspassStore', result => {
+    const store = {
+      password: {length: 12, settings: ['lowercase', 'uppercase', 'numbers', 'symbols'], counter: 1},
+      email: ''
+    };
+    const lesspassStore = result.lesspassStore;
+    if (typeof lesspassStore !== 'undefined') {
+      if ('email' in lesspassStore) {
+        store.email = lesspassStore.email;
+      }
+      if ('password' in lesspassStore) {
+        store.password = lesspassStore.password;
+      }
+    }
+    chrome.storage.local.set({lesspassStore: store}, () => {
+      callback(store);
+    });
+  });
+}
+
 chrome.tabs.query({active: true, currentWindow: true}, tabs => {
   if (tabs[0]) {
-    chrome.storage.local.get('lesspassStore', result => {
-      if (result && 'email' in result.lesspassStore) {
-        setEmail(result.lesspassStore.email);
-      }
+    initStore(store => {
+      setEmail(store.email);
     });
 
     const currentTab = tabs[0];
     setDomainName(getDomainName(currentTab.url));
+    passwordField.focus();
   }
 });

package.json

@@ -1,11 +1,14 @@
 {
   "scripts": {
+    "build": "rm -rf extension/dist && mkdir extension/dist && browserify ./extension/content.js -o ./extension/dist/content.min.js && browserify ./extension/popup.js -o ./extension/dist/popup.min.js",
     "test": "xo && ava tests --require babel-core/register"
   },
   "devDependencies": {
     "ava": "*",
     "babel-core": "*",
     "babel-preset-es2015": "*",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1",
     "jsdom": "^9.0.0",
     "xo": "*"
   },
@@ -18,7 +21,8 @@
       "webextensions"
     ],
     "ignores": [
-      "extension/vendor/**"
+      "extension/vendor/**",
+      "extension/dist/**"
     ]
   },
   "ava": {
@@ -34,7 +38,13 @@
       "es2015"
     ]
   },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
   "dependencies": {
+    "lesspass": "^1.1.1",
     "tldjs": "^1.6.2"
   }
 }