Skip to content

Instantly share code, notes, and snippets.

@travellingprog

travellingprog/GooglePrepackageApp.md

Created September 26, 2013 06:31
Show Gist options
  • Save travellingprog/6710525 to your computer and use it in GitHub Desktop.
Save travellingprog/6710525 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
GooglePrepackageApp.md

  • Swig templates must be pre-compiled via command-line. The resulting *.js file must be given to the prepackaged app.

  • Inline scripting is not allowed.

  • The complete security restrictions are here: http://developer.chrome.com/apps/contentSecurityPolicy.html

  • You can get images with xhr.responseType='blob', and then assign them a BlobURL which stores the entire blob in a url that looks like this: blob:chrome-extension%3A//dabmgdknkbnloipddgldbcmngnacejkh/530e737b-63cf-4309-b526-74013259c4b2

  • You can store images in a sandboxed filesystem with the HTML5 FileSystem API, without needing to get any user permission. Have yet to try using this file as the image source.

  • There's a good tutorial on the HTML5 FileSystem API here.

  • Many online suggest using the wrapper library Filer instead of the direct FileSystem API methods.

  • Don't know if I'll be able to use the socket.io connection without any problem. But it does seem that other have been able to do so.

  • Able to launch/relaunch by command line with a command similar to this: google-chrome --load-and-launch-app=/home/erick/work/chromeApp/test

  • You can find a bunch of commandline switches here

  • Packaged Apps seem to be a relatively new thing. The documentation isn't all that great, lots of it seems to be just copy-pasted from the Chrome Extension docs, and the StackOverflow community is quite small.

  • Some of the Chrome APIs available to Packaged Apps are quite powerful, although we wouldn't use most of them.

  • There is a way to do auto-updates as detailed here.

Raw
index.html
<!doctype html>
<html>
<head>
</head>
<body>
<img style="max-height: 855px; max-width: 1280px;"></img>
<script src="load.js"></script>
</body>
</html>
Raw
load.js
(function() {
var blobContent;
var loadImage = function(uri, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
callback(xhr.response, uri);
};
xhr.open('GET', uri, true);
xhr.send();
};
var errorHandler = function (e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
}
console.log('Error: ' + msg);
};
var onInitFs = function onInitFs(fs) {
fs.root.getFile('testFile.jpg', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
console.log('Write completed.');
};
fileWriter.onerror = function(e) {
console.log('Write failed: ' + e.toString());
};
// var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
fileWriter.write(blobContent);
}, errorHandler);
}, errorHandler);
};
window.addEventListener('DOMContentLoaded', function() {
var img = document.querySelector('img');
var testURL = "http://fc07.deviantart.net/fs71/f/2013/264/6/a/6ab436b4f571638a8d06667477a635da-d6na2cu.jpg";
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
loadImage(testURL, function(response, requested_uri) {
blobContent = response;
img.src = window.webkitURL.createObjectURL(blobContent);
navigator.webkitPersistentStorage.requestQuota(20*1024*1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
});
});
})();
Raw
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'mainWindow',
bounds: {
width: 1280,
height: 1000
}
});
});
Raw
manifest.json
{
"manifest_version": 2,
"name": "My first app",
"version": "1",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": ["<all_urls>", "unlimitedStorage"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment