IL-24401: Added handler so webview can use chrome.runtime.sendMessage to store settings with Chrome storage. Also added handler for opening external links in new browser tab. (#4)

ericgibby · web-flow · commit e7edd82a6f5b · 2017-08-22T14:52:26.000-06:00
diff --git a/browser.html b/browser.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <link rel="stylesheet" href="browser.css">
-    <script src="browser.js"></script>
-	<script src="parseSettings.js"></script>
+
+<head>
+  <link rel="stylesheet" href="browser.css">
+  <script src="underscore.js"></script>
+  <script src="browser.js"></script>
+  <script src="parseSettings.js"></script>
+
   <body>
     <div id="controls">
       <button id="reload" title="Reload">&#10227;</button>
@@ -19,8 +22,8 @@
       <h2 id="crashed-label">Aw, Snap!</h2>
       <h2 id="killed-label">He's Dead, Jim!</h2>
 
-      <p>Something went wrong while displaying this webpage.
-      To continue, reload or go to another page.</p>
+      <p>Something went wrong while displaying this webpage. To continue, reload or go to another page.</p>
     </div>
   </body>
+
 </html>
diff --git a/browser.js b/browser.js
@@ -1,9 +1,9 @@
-var reload = chrome.runtime.reload
+var reload = chrome.runtime.reload;
+var storage = chrome.storage.local;
 window.onresize = doLayout;
 var isLoading = false;
 
 function ui_ready() {
-
 	if (window.webapp) {
 		if (!(webapp.started || webapp.starting)) {
 			// autostart ?
@@ -18,37 +18,32 @@ function settings_ready(d) {
 	ui_ready();
 }
 
-chrome.runtime.getBackgroundPage(function (bg) {
+chrome.runtime.getBackgroundPage(function(bg) {
 	window.bg = bg;
-	chrome.storage.local.get(null, settings_ready);
-})
-
+	storage.get(null, settings_ready);
+});
 
-
-onload = function () {
+onload = function() {
 	getServerSettings(receivedServerSettings);
 	var webview = document.querySelector('webview');
 	doLayout();
 
-	document.querySelector('#reset').onclick = function () {
+	document.querySelector('#reset').onclick = function() {
 		window.close();
 	};
 
-	document.querySelector('#reload').onclick = function () {
+	document.querySelector('#reload').onclick = function() {
 		if (isLoading) {
 			webview.stop();
 		} else {
 			webview.reload();
 		}
 	};
-	document.querySelector('#reload').addEventListener(
-		'webkitAnimationIteration',
-		function () {
-			if (!isLoading) {
-				document.body.classList.remove('loading');
-			}
-		});
-
+	document.querySelector('#reload').addEventListener('webkitAnimationIteration', function() {
+		if (!isLoading) {
+			document.body.classList.remove('loading');
+		}
+	});
 
 	webview.addEventListener('exit', handleExit);
 	webview.addEventListener('loadstart', handleLoadStart);
@@ -57,44 +52,42 @@ onload = function () {
 	webview.addEventListener('loadredirect', handleLoadRedirect);
 	webview.addEventListener('loadcommit', handleLoadCommit);
 	webview.addEventListener('permissionrequest', handleRequest);
+	webview.addEventListener('newwindow', handleNewWindow);
 };
 
-
 function getServerSettings(callback) {
-	chrome.storage.managed.get("serverSettings", function (results) {
+	storage.get('serverSettings', function(results) {
 		if (chrome.runtime.lastError) {
-			console.log("error, returning empty. Error Message: " + chrome.runtime.lastError.message);
+			console.log('error, returning empty. Error Message: ' + chrome.runtime.lastError.message);
 			return;
 		} else {
-			console.log("got server settings, returning");
-			callback(results.serverSettings)
-
+			console.log('got server settings, returning');
+			callback(results.serverSettings);
 		}
 	});
 }
 
 function receivedServerSettings(serverSettings) {
-	console.log("got server settings");
+	console.log('got server settings');
 	console.log(serverSettings);
-	chrome.storage.local.get('relativeLaunchUrl', function (obj) {
+	storage.get('relativeLaunchUrl', function(obj) {
 		var relativeLaunchUrl = obj && obj.relativeLaunchUrl,
 			url = convertServerSettingsToUrl(serverSettings, relativeLaunchUrl);
 
 		if (url && url.length > 0) {
-			console.log("calling navigateTo url: " + url);
+			console.log('calling navigateTo url: ' + url);
 			navigateTo(url);
 		}
 	});
 }
 
-
 function handleRequest(e) {
-	console.log("permission request");
+	console.log('permission request');
 	if (e.permission === 'media') {
-		console.log("Audio permission request");
+		console.log('Audio permission request');
 		e.request.allow();
 	}
-	console.log("Done with permission request");
+	console.log('Done with permission request');
 }
 
 function navigateTo(url) {
@@ -142,7 +135,6 @@ function handleLoadCommit(event) {
 		return;
 	}
 
-
 	var webview = document.querySelector('webview');
 }
 
@@ -162,49 +154,47 @@ function handleLoadStop(event) {
 	// finish, so that the spinner doesn't jerkily reset back to the 0 position.
 	isLoading = false;
 
-	chrome.storage.sync.get(null, function (items) {
+	chrome.storage.sync.get(null, function(items) {
 		settings = items;
 
 		var webview = document.querySelector('webview');
 		//by sending this message the webview can then send messages back to the listener added above
-		webview.contentWindow.postMessage({
-			command: 'handshake',
-			settings: settings
-		}, '*');
+		webview.contentWindow.postMessage(
+			{
+				command: 'handshake',
+				settings: settings
+			},
+			'*'
+		);
 	});
 
-	window.addEventListener("message", function (event) {
+	window.addEventListener('message', function(event) {
 		console.log('window received message:', event.data);
 		processCommand(event.data);
 	});
 }
 
 function processCommand(data) {
-
 	if (data.command === 'handshakereply') {
 		//ignore because this is just the client telling us it can talk back
 		return;
 	}
 
 	if (data.command === 'deletePref') {
 		delete settings[data.data.key];
-	}
-	else if (data.command === 'setPref') {
+	} else if (data.command === 'setPref') {
 		settings[data.data.key] = data.data;
 	}
 
-	chrome.storage.sync.set(settings, function () {
-
+	chrome.storage.sync.set(settings, function() {
 		if (!chrome.runtime.lastError) {
 			console.log('settings set');
 		}
 	});
-
-
 }
 
 function handleLoadAbort(event) {
-	console.log('oadAbort');
+	console.log('loadAbort');
 	console.log('  url: ' + event.url);
 	console.log('  isTopLevel: ' + event.isTopLevel);
 	console.log('  type: ' + event.type);
@@ -217,4 +207,72 @@ function handleLoadRedirect(event) {
 	}
 
 	document.querySelector('#location').value = event.newUrl;
-}
+}
+
+function handleNewWindow(event) {
+	event.preventDefault();
+
+	// event.targetUrl contains the target URL of the original link click
+	// or window.open() call: use it to open your own window to it.
+	// See: https://stackoverflow.com/a/18452171/6326743
+	var url = event.targetUrl;
+
+	// `chrome.browser.openTab` with `browser` permission will open the link in the browser.
+	// See: https://stackoverflow.com/a/36530347/6326743
+	chrome.browser.openTab({ url: url });
+}
+
+/**
+ * Handler for messages sent with `chrome.runtime.sendMessage`
+ * 
+ * @param {any} message The message sent by the calling script
+ * @param {MessageSender} sender 
+ * @param {function} sendResponse Function to call (at most once) when you have a response.
+ */
+function handleMessage(message, sender, sendResponse) {
+	console.log('handleMessage:', message);
+	if (message.command === 'settings.get') {
+		storage.get('serverSettings', function(items) {
+			if (sendResponse) {
+				var response = {
+					success: !chrome.runtime.lastError,
+					data: chrome.runtime.lastError
+				};
+				if (response.success) {
+					var data = items.serverSettings || {};
+					if (typeof message.data === 'string') {
+						response.data = data[message.data];
+					} else if (Array.isArray(message.data)) {
+						response.data = message.data.reduce(function(aggregator, current) {
+							return (aggregator[current] = data[current]);
+						}, {});
+					} else {
+						response.data = data;
+					}
+				}
+				console.log('response:', response);
+				sendResponse(response);
+			}
+		});
+		return !!sendResponse; // wait for response
+	} else if (message.command === 'settings.patch') {
+		storage.get('serverSettings', function(items) {
+			var settings = {
+				serverSettings: _.extend(items.serverSettings || {}, message.data)
+			};
+			storage.set(settings, function() {
+				if (sendResponse) {
+					var response = {
+						success: !chrome.runtime.lastError,
+						data: chrome.runtime.lastError
+					};
+					console.log('response:', response);
+					sendResponse(response);
+				}
+			});
+		});
+		return !!sendResponse; // wait for response
+	}
+}
+
+chrome.runtime.onMessageExternal.addListener(handleMessage);
diff --git a/manifest.json b/manifest.json
@@ -16,6 +16,7 @@
     },
     "permissions": [
         "webview",
+        "browser",
         "alarms",
         "storage",
         "power",
@@ -61,5 +62,8 @@
             ],
             "title": "Open Imagine Learning"
         }
+    },
+    "externally_connectable": {
+        "matches": ["*://localhost:*/*", "*://127.0.0.1:*/*", "*://*.imaginelearning.com/*"]
     }
 }
diff --git a/manifest_unityclient.json b/manifest_unityclient.json
@@ -18,6 +18,7 @@
     },
     "permissions": [
         "webview",
+        "browser",
         "alarms",
         "storage",
         "system.network",
@@ -42,5 +43,8 @@
     },
     "icons": { 
         "128": "images/ilandl_128.png"
+    },
+    "externally_connectable": {
+        "matches": ["*://localhost:*/*", "*://127.0.0.1:*/*", "*://*.imaginelearning.com/*"]
     }
 }
diff --git a/parseSettings.js b/parseSettings.js
@@ -1,5 +1,4 @@
-var baseUrl = "localhost:8887/";
-
+var baseUrl = 'localhost:8887/';
 
 function convertServerSettingsToUrl(serverSettings, launchUrl) {
 	var url = 'http://' + baseUrl;
@@ -8,35 +7,37 @@ function convertServerSettingsToUrl(serverSettings, launchUrl) {
 		url += launchUrl.replace(/^\//, '');
 	}
 
+	var queryString = ['chromeappid=' + chrome.runtime.id];
+
 	if (serverSettings) {
-		var queryString = [];
-		if (serverSettings && serverSettings.cloudSiteCode && serverSettings.cloudSiteCode.length > 0 && url.indexOf('sitecode') < 0) {
-			queryString.push('sitecode=' + serverSettings.cloudSiteCode);
-		} else if (serverSettings && serverSettings.engineAddress && serverSettings.engineAddress.length > 0) {
+		if ((serverSettings.sitecode || serverSettings.cloudSiteCode) && url.indexOf('sitecode') < 0) {
+			queryString.push('sitecode=' + serverSettings.sitecode || serverSettings.cloudSiteCode);
+		} else if (serverSettings.engineAddress) {
 			queryString.push('engineaddress=' + serverSettings.engineAddress);
 		}
-		
-		if (serverSettings && serverSettings.forceCloudLogUpload && serverSettings.forceCloudLogUpload === true) {
+
+		if (serverSettings.forceCloudLogUpload && serverSettings.forceCloudLogUpload === true) {
 			queryString.push('forceCloudLogUpload');
 		}
 
-		if (serverSettings && serverSettings.adaptive && serverSettings.adaptive === true) {
+		if (serverSettings.adaptive && serverSettings.adaptive === true) {
 			queryString.push('adaptive');
 		}
 
-		if (serverSettings && serverSettings.env && serverSettings.env.length > 0) {
+		if (serverSettings.env) {
 			queryString.push('env=' + serverSettings.env);
 		}
-
-		if (queryString.length) {
-			url += (url.indexOf('?') < 0 ? '?' : '&') + queryString.join('&');
-		}
 	}
 
 	//if no environment set then default to production
-	if(url.indexOf("env") < 0) {
-		url += (url.indexOf('?') < 0 ? '?' : '&') + 'env=production';
+	var envIndex = queryString.findIndex(function(item) {
+		return /^env=/.test(item);
+	});
+	if (envIndex < 0) {
+		queryString.push('env=production');
 	}
 
+	url += (url.indexOf('?') < 0 ? '?' : '&') + queryString.join('&');
+
 	return url;
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@`
`16`	`16`	`},`
`17`	`17`	`"permissions": [`
`18`	`18`	`"webview",`
	`19`	`+ "browser",`
`19`	`20`	`"alarms",`
`20`	`21`	`"storage",`
`21`	`22`	`"power",`
`@@ -61,5 +62,8 @@`
`61`	`62`	`],`
`62`	`63`	`"title": "Open Imagine Learning"`
`63`	`64`	`}`
	`65`	`+ },`
	`66`	`+ "externally_connectable": {`
	`67`	`+ "matches": ["://localhost:/", "://127.0.0.1:/", "://.imaginelearning.com/*"]`
`64`	`68`	`}`
`65`	`69`	`}`