Use promises for options in WebExtension driver

src/drivers/bookmarklet/driver.js

@@ -1,7 +1,10 @@
 /**
- * Bookmarklet driver
+ * WebExtension driver
  */
 
+/** global: wappalyzer */
+/** global: XMLHttpRequest */
+
 (function() {
 	if ( typeof wappalyzer === 'undefined' ) {
 		return;

src/drivers/phantomjs/driver.js

@@ -1,3 +1,10 @@
+/**
+ * PhantomJS driver
+ */
+
+/** global: phantom */
+/** global: wappalyzer */
+
 (function() {
 	var
 		url,
@@ -16,7 +23,9 @@
 		require('fs').changeWorkingDirectory(scriptDir);
 
 		require('system').args.forEach(function(arg, i) {
-			var arr = /^(--[^=]+)=(.+)$/.exec(arg);
+			var
+				value,
+				arr = /^(--[^=]+)=(.+)$/.exec(arg);
 
 			if ( arr && arr.length === 3 ) {
 				arg   = arr[1];
@@ -35,7 +44,9 @@
 
 					break;
 				case '--resource-timeout':
-					resourceTimeout = value;
+					if ( value ) {
+						resourceTimeout = value;
+					}
 
 					break;
 				default:
@@ -112,7 +123,7 @@
 			init: function() {
 				var
 					page, hostname,
-					headers = {};
+					headers = {},
 					a       = document.createElement('a'),
 					json    = JSON.parse(require('fs').read('apps.json'));
 

src/drivers/webextension/css/options.css

@@ -83,7 +83,7 @@ a:active {
 
 #about {
 	border-top: 1px solid #dbdbdb;
-	margin-top: 2.5rem;
+	margin-top: 1.5rem;
 	padding: 1.5rem 0 0 0;
 }
 

src/drivers/webextension/js/content.js

@@ -1,3 +1,5 @@
+/** global: browser */
+
 (function() {
 	var c = {
 		init: function() {

src/drivers/webextension/js/defaults.js

@@ -1,6 +0,0 @@
-var defaults = {
-	autoAnalyzeHeaders: 0,
-	upgradeMessage: 1,
-	dynamicIcon: 1,
-	tracking: 1
-};

src/drivers/webextension/js/driver.js

@@ -24,6 +24,26 @@
 			console.log('[wappalyzer ' + args.type + '] ' + args.message);
 		},
 
+		/**
+		 * Get a value from localStorage
+		 */
+		getOption: function(name, defaultValue, callback) {
+			browser.storage.local.get(name).then(function(item) {
+				callback(item.hasOwnProperty(name) ? item[name] : defaultValue);
+			});
+		},
+
+		/**
+		 * Set a value in localStorage
+		 */
+		setOption: function(name, value) {
+			var option = {};
+
+			option[name] = value;
+
+			browser.storage.local.set(option);
+		},
+
 		/**
 		 * Initialize
 		 */
@@ -54,19 +74,27 @@
 			try {
 				var version = browser.runtime.getManifest().version;
 
-				if ( localStorage['version'] == null ) {
+				w.driver.getOption('version', null, function(previousVersion) {
-					firstRun = true;
+					if ( previousVersion === null ) {
-
+						w.driver.goToURL({
-					// Set defaults
+						 	url: w.config.websiteURL + 'installed'
-					for ( var option in defaults ) {
+						});
-						localStorage[option] = defaults[option];
+					} else if ( version !== previousVersion ) {
+						w.driver.getOption('upgradeMessage', true, function(upgradeMessage) {
+							if ( upgradeMessage ) {
+								w.driver.goToURL({
+									url: w.config.websiteURL + 'upgraded',
+									background: true
+								});
+							}
+						});
 					}
-				} else if ( version !== localStorage['version'] && parseInt(localStorage['upgradeMessage'], 10) ) {
-					upgraded = true;
-				}
 
-				localStorage['version'] = version;
+					w.driver.setOption('version', version);
-			} catch(e) { }
+				});
+			} catch(e) {
+				// Do nothing
+			}
 
       if ( typeof chrome === 'undefined' ) {
         browser.runtime.onMessage.addListener(w.driver.onMessage);
@@ -183,10 +211,14 @@
 
 		},
 
+		/**
+		 * Open a tab
+		 */
 		goToURL: function(args) {
-			var url = args.url + ( typeof args.medium === 'undefined' ? '' :  '?pk_campaign=chrome&pk_kwd=' + args.medium);
+			browser.tabs.create({
-
+				url: args.url,
-			browser.tabs.create({ url: url, active: args.background === undefined || !args.background });
+				active: args.background === undefined || !args.background
+			});
 		},
 
 		/**
@@ -208,37 +240,42 @@
 			tabCache[tab.id].appsDetected = w.detected[url];
 
 			if ( count > 0 ) {
-				// Find the main application to display
+				w.driver.getOption('dynamicIcon', true, function(dynamicIcon) {
-				var appName, found = false;
+					var appName, found = false;
 
-				w.driver.categoryOrder.forEach(function(match) {
+					// Find the main application to display
-					for ( appName in w.detected[url] ) {
+					w.driver.categoryOrder.forEach(function(match) {
-						w.apps[appName].cats.forEach(function(cat) {
+						for ( appName in w.detected[url] ) {
-							var icon = w.apps[appName].icon || 'default.svg';
+							w.apps[appName].cats.forEach(function(cat) {
+								var icon = w.apps[appName].icon || 'default.svg';
 
-							if ( !parseInt(localStorage['dynamicIcon'], 10) ) {
+								if ( !dynamicIcon ) {
-								icon = 'default.svg';
+									icon = 'default.svg';
-							}
-
-							if ( cat == match && !found ) {
-								if ( /\.svg$/i.test(icon) ) {
-									icon = 'converted/' + icon + '.png';
 								}
 
-								browser.pageAction.setIcon({ tabId: tab.id, path: 'images/icons/' + icon });
+								if ( cat === match && !found ) {
+									if ( /\.svg$/i.test(icon) ) {
+										icon = 'converted/' + icon + '.png';
+									}
 
-								found = true;
+									browser.pageAction.setIcon({
-							}
+										tabId: tab.id,
-						});
+										path: 'images/icons/' + icon
+									});
+
+									found = true;
+								}
+							});
+						}
+					});
+
+					if ( typeof chrome !== 'undefined' ) {
+						// Browser polyfill doesn't seem to work here
+						chrome.pageAction.show(tab.id);
+					} else {
+						browser.pageAction.show(tab.id);
 					}
 				});
-
-				if ( typeof chrome !== 'undefined' ) {
-					// Browser polyfill doesn't seem to work here
-					chrome.pageAction.show(tab.id);
-				} else {
-					browser.pageAction.show(tab.id);
-				}
 			};
 		},
 
@@ -246,17 +283,19 @@
 		 * Anonymously track detected applications for research purposes
 		 */
 		ping: function() {
-			if ( Object.keys(w.ping.hostnames).length && parseInt(localStorage['tracking'], 10) ) {
+			w.driver.getOption('tracking', true, function(tracking) {
-				w.driver.post('http://ping.wappalyzer.com/v2/', w.ping);
+				if ( Object.keys(w.ping.hostnames).length && tracking ) {
+					w.driver.post('http://ping.wappalyzer.com/v2/', w.ping);
 
-				w.log('w.driver.ping: ' + JSON.stringify(w.ping));
+					w.log('w.driver.ping: ' + JSON.stringify(w.ping));
 
-				w.ping = { hostnames: {} };
+					w.ping = { hostnames: {} };
 
-				w.driver.post('https://ad.wappalyzer.com/log/wp/', w.adCache);
+					w.driver.post('https://ad.wappalyzer.com/log/wp/', w.adCache);
 
-				w.adCache = [];
+					w.adCache = [];
-			}
+				}
+			});
 		},
 
 		/**

src/drivers/webextension/js/options.js

@@ -1,57 +1,61 @@
+/** global: localStorage */
+
 document.addEventListener('DOMContentLoaded', function() {
 	var d = document;
 
 	var options = {
-		opts: defaults,
-
 		init: function() {
 			options.load();
 
-			d.getElementById('github'    ).addEventListener('click', function() { window.open(wappalyzer.config.githubURL);  });
+			d.querySelector('#github'    ).addEventListener('click', function() { open(wappalyzer.config.githubURL);  });
-			d.getElementById('twitter'   ).addEventListener('click', function() { window.open(wappalyzer.config.twitterURL); });
+			d.querySelector('#twitter'   ).addEventListener('click', function() { open(wappalyzer.config.twitterURL); });
-			d.getElementById('wappalyzer').addEventListener('click', function() { window.open(wappalyzer.config.websiteURL + '?pk_campaign=chrome&pk_kwd=options'); });
+			d.querySelector('#wappalyzer').addEventListener('click', function() { open(wappalyzer.config.websiteURL); });
+		},
 
-			d.getElementById('options-save').addEventListener('click', options.save);
+		get: function(name, defaultValue, callback) {
+			browser.storage.local.get(name).then(function(item) {
+				callback(item.hasOwnProperty(name) ? item[name] : defaultValue);
+			});
 		},
 
-		load: function() {
+		set: function(name, value) {
-			var option, value;
+			var option = {};
 
-			for ( option in options.opts ) {
+			option[name] = value;
-				if ( value = localStorage[option] ) {
-					options.opts[option] = value;
-				}
-			}
 
-			if ( parseInt(options.opts.upgradeMessage) ) {
+			browser.storage.local.set(option);
-				d.getElementById('option-upgrade-message').setAttribute('checked', 'checked');
+		},
-			}
 
-			if ( parseInt(options.opts.dynamicIcon) ) {
+		load: function() {
-				d.getElementById('option-dynamic-icon').setAttribute('checked', 'checked');
+			options.get('upgradeMessage', true, function(value) {
-			}
+				var el = d.querySelector('#option-upgrade-message');
 
-			if ( parseInt(options.opts.tracking) ) {
+				el.checked = value;
-				d.getElementById('option-tracking').setAttribute('checked', 'checked');
+
-			}
+				el.addEventListener('change', function() {
-		},
+					options.set('upgradeMessage', el.checked);
+				});
+			});
+
+			options.get('dynamicIcon', true, function(value) {
+				var el = d.querySelector('#option-dynamic-icon');
 
-		save: function() {
+				el.checked = value;
-			var option;
 
-			options.opts.upgradeMessage = d.getElementById('option-upgrade-message').checked ? 1 : 0;
+				el.addEventListener('change', function() {
-			options.opts.dynamicIcon    = d.getElementById('option-dynamic-icon'   ).checked ? 1 : 0;
+					options.set('dynamicIcon', el.checked);
-			options.opts.tracking       = d.getElementById('option-tracking'       ).checked ? 1 : 0;
+				});
+			});
 
-			for ( option in options.opts ) {
+			options.get('tracking', true, function(value) {
-				localStorage[option] = options.opts[option];
+				var el = d.querySelector('#option-tracking');
-			}
 
-			d.getElementById('options-saved').style.display = 'inline';
+				el.checked = value;
 
-			setTimeout(function(){
+				el.addEventListener('change', function() {
-				d.getElementById('options-saved').style.display = 'none';
+					options.set('tracking', el.checked);
-			}, 2000);
+				});
+			});
 		}
 	};
 

src/drivers/webextension/manifest.json

@@ -63,6 +63,7 @@
 		"open_in_tab": false
 	},
 	"permissions": [
+		"storage",
 		"tabs",
 		"webRequest",
 		"webNavigation",

src/drivers/webextension/options.html

@@ -33,10 +33,6 @@
 					<label for="option-tracking"><input id="option-tracking" type="checkbox"> <span data-i18n="optionTracking">Anonymously send reports on detected applications to wappalyzer.com for research</span></label>
 				</p>
 
-				<p>
-					<button id="options-save" data-i18n="optionsSave">Save options</button> <span id="options-saved" data-i18n="optionsSaved">Saved</span>
-				</p>
-
 				<div id="about">
 					<p>
 						<button id="github"><img src="images/github.png"  width="16" height="16" alt=""/> <span data-i18n="github" >Fork Wappalyzer on GitHub!</span></button><!--