Google Chrome
Apps, Web Store And The New File APIs

Ido Green (@greenido)
May 31, 2011 goo.gl/P6OWs

Agenda

Chrome Web Store - Why?

Integrated and Frictionless

A Web App

What should I create?


Leverage the technologies you know and love + new ones: App Cache, CSS3, Local Storage, GEO, Video, Audio and more...

Add Manifest.json

{
	  "name" : "Todo List",
	  "description" : "The amazing Todo list - help you getting things done",
	  "version": "0.0.1",
	  "icons": {
	    "24": "logo-24.png", 
	    "128": "logo-128.png"
	  },
	  "permissions": [
	    "unlimitedStorage", "notification"
	  ],
	  "app" : {
	    "urls": ["http://best-apps4.me/todo/"],
	    "launch": {
	      "web_url": "http://best-apps4.me/todo/index.html"
	    }
	  }
}
Todo List Demo

The Chrome Web Store - Upload (0)

The Chrome Web Store - Upload (1)

Provide store content

The Chrome Web Store - Upload (2)

Provide store content

The Chrome Web Store - Upload (3)

Provide store content

The Chrome Web Store - Upload App

chrome.fileBrowserHandler

Use chrome.fileBrowserHandler module to extend the Chrome OS file browser.


File API - Manifest

Declare the "fileBrowserHandler" permission in the extension manifest. 

{
"name": "Upload to flickr",
  ...
  "file_browser_handlers": [
    {
      "id": "upload",
      "default_title": "Save to flickr", // What the button will display
      "file_filters": [
        "filesystem:*.jpg",
        "filesystem:*.jpeg",
        "filesystem:*.png"
      ]
    }
  ],
  "permissions" : [
    "fileBrowserHandler"
  ],
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
            "128": "icon128.png" }
}

File Uploader JS Example 

        uploadFile: function(file) {
            var pro1 = document.querySelector('#pro1');
            var progressBar =  pro1.querySelector('progress');
            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', this.uploadServer, true);

            xhr.onload = function(e) {
                if (this.status == 200) {
                    console.log(this.response);
                    alert("The image is safe in Flickr " + this.response);
                }
            };

            xhr.onerror = function(e) {
                console.log(this, this.status, this.responseText, 
			    this.getAllResponseHeaders())
            };

            xhr.send(formData);
        },
...

Thank You!