Note: this is part of the Bookshelf Project I’m working on.
Before I can do anything useful in a Chrome Web Application, I’ve got to figure out the very basics. This post is going to cover my “Hello, World” equivalent start, maybe going a bit deeper than that.
At a minimum, my Chrome web app needs four things:
- A web page to display and run.
- An icon to show on the Chrome applications page.
- A favicon.
- A manifest describing where the above pieces are, plus anything else I end up needing.
I started by creating a folder to put all these pieces in. I named it bookshelf, but it could have been called anything.
My first web page is going to be just about the bare minimum for HTML5:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>A sample page</title> </head> <body> <p>This is the sample page.</p> </body> </html>
I put that text into a file called main.html in my folder, then went searching for icons. I found a very nice one, in a variety of sizes, at designmoo.com. It’s called Book_icon_by_@akterpnd, and is licensed under a Creative Commons 3.0 Attribution license, so there should be no problems with my using it here. I need a 128 by 128 icon for the application page, and 16 by 16 for the favicon. The set didn’t have a 16 by 16 icon in it, so I resized the smallest one for that. I called the two icons I ended up with icon_128.png and icon_16.png, and put them in my folder, too. They look pretty good, don’t they?
Now I have to write the manifest file. It’s in JSON format, which is just text in a specific syntax. With a text editor I created mainfest.json in my folder, with the following content:
{
"name": "Books to Buy",
"description": "Keep a list of books to buy on Amazon, with their price and availability",
"version": "1",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"16": "icon_16.png",
"128": "icon_128.png"
}
}
You can see that this file points my three other files, and also gives the app a name, description, and version. I don’t know what the best practices are for the version numbering, so for now I’ll just keep it at 1.
I think I have a complete Chrome app now. You can create a folder with these files to see for yourself. Once you have these four files in a folder, open Chrome and click the wrench icon in the upper right to get the menu. Select Tools, then Extensions. Check the “Developer Mode” box on the resulting page if you haven’t already, then click the Load Unpacked Extension button. Select the folder with the manifest in it, and you should be good to go. It should look like this:
Pretty nice, I think. Go ahead and close this tab. To run the app (with the version of Chrome current as I write this), open a new tab and click Apps on the bar at the bottom of the resulting page. The new app should show up at the end of the page:
Click on the application icon, and the page should open, and even have the right favicon:
Okay, that’s not much, but this post is the “Hello, World” equivalent. Next time we will add a skeleton for a minimal application, one where you can enter an ISBN and have the page look it up and display the result in the page.
Charles Engelke's Blog 
[…] this is part 2 of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” […]
Pingback by Chrome Web App Bookshelf – Part 2 « Charles Engelke’s Blog — December 6, 2011 @ 11:54 pm
[…] this is part 3 of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” equivalent, and part 2 added basic functionality. This part […]
Pingback by Chrome Web App Bookshelf – Part 3 « Charles Engelke’s Blog — December 11, 2011 @ 11:21 am
[…] this is part 4 of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” equivalent, part 2 added basic functionality, and part 3 […]
Pingback by Chrome Web App Bookshelf – Part 4 « Charles Engelke’s Blog — December 28, 2011 @ 4:25 pm
[…] this is part 5 of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” equivalent, part 2 added basic functionality, part […]
Pingback by Chrome Web App Bookshelf – Part 5 « Charles Engelke’s Blog — January 1, 2012 @ 6:22 pm
[…] this is part 6 of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” equivalent, part 2 added basic functionality, part […]
Pingback by Chrome Web App Bookshelf – Part 6 « Charles Engelke’s Blog — January 7, 2012 @ 3:52 pm
[…] this is part 7 (the final part) of the Bookshelf Project I’m working on. Part 1 was a Chrome app “Hello, World” equivalent, part 2 added basic functionality, part […]
Pingback by Chrome Web App Bookshelf – Part 7 of 7 « Charles Engelke’s Blog — January 8, 2012 @ 1:36 pm