Skip to content

IL-24401: Added message handler for webview #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2017
Merged

IL-24401: Added message handler for webview #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
152 changes: 105 additions & 47 deletions browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ?
Expand All @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -142,7 +135,6 @@ function handleLoadCommit(event) {
return;
}


var webview = document.querySelector('webview');
}

Expand All @@ -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);
Expand All @@ -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);
4 changes: 4 additions & 0 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
},
"permissions": [
"webview",
"browser",
"alarms",
"storage",
"power",
Expand Down Expand Up @@ -61,5 +62,8 @@
],
"title": "Open Imagine Learning"
}
},
"externally_connectable": {
"matches": ["*://localhost:*/*", "*://127.0.0.1:*/*", "*://*.imaginelearning.com/*"]
}
}
4 changes: 4 additions & 0 deletions manifest_unityclient.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
},
"permissions": [
"webview",
"browser",
"alarms",
"storage",
"system.network",
Expand All @@ -42,5 +43,8 @@
},
"icons": {
"128": "images/ilandl_128.png"
},
"externally_connectable": {
"matches": ["*://localhost:*/*", "*://127.0.0.1:*/*", "*://*.imaginelearning.com/*"]
}
}
35 changes: 18 additions & 17 deletions parseSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
var baseUrl = "localhost:8887/";

var baseUrl = 'localhost:8887/';

function convertServerSettingsToUrl(serverSettings, launchUrl) {
var url = 'http://' + baseUrl;
Expand All @@ -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;
}
}