2. AGENDA
PART 1 - BASIC CONCEPTS
PART 2 - FIRST-TIME ACCOUNT SETUP
PART 3 - PREPARING TO PUBLISH
PART 4 - PUBLISHING, UPGRADING, AND TRACKING
PART 5 - RESOURCES
!2
4. 1. IN A NUTSHELL
Chrome App = Zip file (Manifest + Icon) + Screenshots +
Promotional Images + Detailed Description + Settings!
It can be as simple as a link to an existing website or web app!
Or, it can be as complex as a full-blown offline-capable,
server-independent HTML5/CSS3/JS app!
Chrome Web Store Apps can be available to all, or restricted to
your Google Apps domain, or to Trusted Testers only!
Note: Publishing an app is heavy on graphics/illustration skills
!4
5. 2.A. ADVANTAGES - NAMING
Can disconnect your App Name from a .com Domain!
Users don’t load your .com site, they go to their Apps list!
Users can refer your app to friends by its App Name!
Your Chrome app shows up on Google search results
!5
6. 2.B. ADVANTAGES - DISTRIBUTION
Benefits from increasing ChromeOS, Chrome browser users!
Increasing users with Google Apps or Google Accounts!
Because they Install your app in Chrome, they don’t have to
memorize your URL!
Google takes care of tracking interest in your app!
Google can take care of the financial transaction (subscription)!
If Google likes your app, they can add it to a collection, or feature
it close to the top (more impressions)
!6
7. 2.C. ADVANTAGES - TECHNOLOGY
Helps increase your percentage of Chrome users!
Past a threshold you can evolve your code to use the latest and
greatest in web technologies (HTML5, CSS, ...)!
Can take advantage in Notifications, which originally is in
ChromeOS, but is making its way to Windows and Mac OS X
!7
8. 3. KINDS OF CHROME APPS
Hosted Apps - Served from your web server!
Zip contains a Manifest + Icon!
“A Chrome App is just a Link”!
Packaged Apps - Self-contained, doesn’t need to hit any web
server!
Zip contains Manifest + Icon + HTML5/CSS3/JS/other files!
Packaged Apps can reference content of its Zip file!
This presentation focuses on Hosted Apps!
!8
9. 4. SUBSCRIPTION TIERS
Free, One-Time, Monthly, Yearly!
Can use your own custom payment, or Chrome Web Store
Payments service (5% fee)!
US Pricing Tiers:!
$1.99, $2.99, $3.99, $4.99, $5.99, $6.99, $7.99, $8.99, $9.99,
$14.99, $19.99, $24.99, $29.99, $34.99, $39.99, $44.99, $49.99,
any value up to $1000!
https://developers.google.com/chrome/web-store/docs/pricing
!9
10. 5. VISIBILITY OPTIONS
There are Four visibility options:!
1. All Chrome Web Store users!
2. Chrome users with [YourDomain] account or people with
the link!
3. Chrome Web Store users with a [YourDomain] account!
4. Trusted Testers (Requires app to be Unpublished)
!10
11. 6. PUBLISHING WORKFLOW
1. Setup Google Account used for publishing to the Chrome store!
2. Produce and Upload the Zip!
3. Produce and Upload Screenshots!
4. Produce and Upload Promotional tile images!
5. Detailed Description, Regions, Pricing, Visibility!
Tip: Give yourself at least half a day. The “Produce” parts of
Steps 2, 3, and 4 take a long time
!11
13. 1. PICK A GOOGLE ACCOUNT
Decide on a Google Account to create the app with!
For a Hosted app, this account must go to Google WebMaster
Tools and verify control of the domain:!
https://support.google.com/webmasters/answer/34592?hl=en!
You can transfer account ownership ($5 fee) !
https://support.google.com/chrome_webstore/contact/
dev_account_transfer
!13
14. 2. PAY THE ONE-TIME FEE
1. Go to the Chrome Developer Dashboard!
https://chrome.google.com/webstore/developer/dashboard!
2. If you need a Visibility option of All, you need to pay this onetime $5 fee to verify your account!
Chrome Developer Dashboard > Pay this fee now
!14
16. 1. FOLDER STRUCTURE
Since you will relase many
versions over time, it’s a
great idea to structure your
folders well.!
To the right is a starting
point that can handle
multiple versions!
Folders are in green!
Substitute [string] with your
app’s values
[Project Folder]
Builds
yyyymmdd
[appname]dev
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional920x680al440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
[appname]prod
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
yyyymmddhhmm-appname.zip
!16
17. 2. PRODUCE THE REQUIRED FILES
For a Hosted app, you need to provide the following:!
1. A Zip file containing a manifest.json file, and an icon.png!
2. Five (5) Screenshots!
3. Three (3) Promotional images
!17
18. 2.A. ZIP FILE STRUCTURE
The zip file contains a folder,
which contains two files!
The manifest.json file
defines the app (name,
description, version, urls,
permissions, etc)!
Zip the folder in Prod, and
upload the zip in a later step!
Dev - see Slide 37
[Project Folder]
Builds
yyyymmdd
[appname]dev
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional920x680al440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
[appname]prod
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
yyyymmddhhmm-appname.zip
!18
19. MANIFEST.JSON FILE
The Manifest file defines
your app!
{
Modify everything in green!
Increment your version and
upload it to CWS when:!
A. manifest is updated!
B. hosted app changes!
"name": "imgExpress",
"short_name": "imgExpress",
"description": "Photo processing tool",
"version": "0.0.0.1",
"manifest_version": 2,
"app": {
"urls": [
"http://www.imgExpressApp.com/"
],
"launch": {
"web_url": "http://www.imgExpressApp.com/",
"container": "panel",
"height": 650,
"width": 1280
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"unlimitedStorage",
"notifications"
]
We will now cover
highlighted variables in
detail
}
http://developer.chrome.com/extensions/manifest.html
!19
20. VERSION NUMBERS
Versions must be > 0 and < 65535!
Versions follow the format: n down to n.n.n.nnnn!
Can be a “1” down to “0.0.0.1234”!
Must increment version when something in manifest.json file
changes!
Version changes trigger autoupdate (see link for subtleties)!
http://developer.chrome.com/extensions/autoupdate.html
!20
21. URLS
These are the pages that will be granted permissions requested
in the permissions section!
Must begin with http, https, or *!
Do not include port numbers!
Chrome uses Begins With matching (has an implicit * at the
end)
!21
22. WEB_URL
This is the absolute URL that Chrome will load upon launch!
This is the landing page you want the user to end up when
they run your Hosted app
!22
23. CONTAINER STYLES
A container is where your app’s UI runs!
There are two options:!
1. tab (default)!
2. panel - new window without navigation, no omni bar
!23
24. PERMISSIONS
Available Permissions for Hosted apps:!
background - runs in the background after login and until user quits Chrome!
clipboardRead - required if you use document.execCommand(‘paste’)!
clipboardWrite - required if you use document.execCommand(‘copy’) or
document.execCommand(‘cut’), especially Hosted apps.!
geolocation - allows app to use HTML5 Geolocation API without prompting!
notifications - Allows app to use HTML5 Notification API without calling
checkPermission()!
unlimitedStorage - Bumps up your app’s storage limit from 5MB to
Unlimited (for SQL DB and application cache)!
http://developer.chrome.com/extensions/declare_permissions.html
!24
25. MEDIA FILES
Most users will decide to Install your app based on either your Icon,
Screenshots, or Promotional images!
When sizes are specified, you must upload at exactly those sizes!
Simple tools to make these:!
OS Built-in Print Screen - take screenshots!
Keynote or PowerPoint - Make promotional images!
GIMP - Make icons and crop/resize screenshots and promotional
images!
Workflow: Screenshot > Keynote > GIMP > {PNG, JPG}!
https://developers.google.com/chrome/web-store/docs/images
!25
26. ICON
This is displayed in two situations:!
A. When the user goes to their installed apps!
B. When you don’t have any approved Promotional images!
Steps to create an Icon!
1. Create a baseline icon that’s 96x96 pixels!
2. Create another icon (PNG) that’s 128x128 pixels with Transparency,
then paste the 96x96 in the center of this 128x128!
TIP: You can use GIMP to make this
!26
27. 2.B. SCREENSHOTS
These are shown in a carousel when they look at your app’s
details!
You need at least one, and can have up to five!
Must be 1280x800 (exact, cannot deviate)!
Could be 640x400, but better to produce higher-resolution!
Could show the entire screen or zoom in to some functions!
Tip: Your screenshots should tell a story
!27
29. 2.C. PROMOTIONAL IMAGES
Represents your app in the app wall!
Three Promotional image sizes:!
1. 440x280 - small tile (required)!
2. 920x680 - large tile!
3. 1400x560 - Marquee!
On the Chrome Store’s app wall, the system picks one of these
images to display your app to prospective users!
Tip: Submit promotional images in all three sizes
!29
30. PROMOTIONAL IMAGES
Google recommends the following:!
Avoid text.!
Make sure your image works even when shrunk to half size.!
Assume the image will be on a light gray background.!
Use saturated colors if possible; they tend to work well.!
Avoid using a lot of white and light gray.!
Fill the entire region.!
Make sure the edges are well defined.!
https://developers.google.com/chrome/web-store/docs/images#promo
!30
33. 3. SITE MODIFICATIONS
Make it easy for existing site users to convert to Chrome app
users, put an icon/link in a good spot!
Steps:!
1. Go here for icons:!
https://developers.google.com/chrome/web-store/branding!
!
2. Then link the icon to your (future) Chrome app’s page from
the Chrome Web Store
!33
35. 4. CHANGES FOR PAID APPS
If you’re going to have some parts of your site be designated as
a paid section of your Chrome app, you should lock it down in
the most transparent way possible!
Typically use Google Account authentication
!35
36. 5. DEV TESTING
Once you have all the files produced, you should test it out before publishing to
the Chrome Web Store!
Follow these steps on your computer’s Chrome browser:!
1. From Chrome, go to this address chrome://extensions/!
2. Click the Developer mode checkbox on top!
3. Click the Load unpacked extension… button!
4. Select the folder containing your manifest and icon!
5. Go here: chrome://apps/ (or new Tab, click apps)!
6. Click on your app’s icon
!36
38. PART 4 - PUBLISHING,
UPGRADING, AND
TRACKING
!38
39. 1. CREATE APP SKELETON
These are the steps to create the initial part of your app!
1. Go to the Chrome Developer Dashboard!
https://chrome.google.com/webstore/developer/
dashboard!
2. Click the “Add new item” button!
3. Upload your Zip file
!39
40. 2. ENTER DETAILED DESCRIPTION
The Detailed Description is a plain text field that holds up to
16,000 characters!
When a user looks at your app from the Chrome store, the
Detailed Description appears in two places:!
1. Overview tab - to the right of the screenshot carousel!
2. Details tab - this is the main highlight!
Tip: Keep it interesting yet factual, and to the point.
!40
41. 3. UPLOAD AN ICON
Upload the same icon PNG file contained in your zip
!41
42. 4. UPLOAD SCREENSHOTS
Upload all the screenshots you made!
Tip: Upload them one at a time, in the proper sequence
!42
43. 5. UPLOAD PROMOTIONAL
IMAGES
Click “Upload new image” for each size, and upload the
corresponding Promotional image!
Tip: Click “Preview my promotional tiles” to see how it looks
so far
!43
44. 6. LINK TO YOUR WEBSITE
From the drop-down, pick the domain that your app goes to!
If it’s not there, add it via Google WebMaster tools!
https://www.google.com/webmasters/tools/home?hl=en
!44
45. 7. PICK A CATEGORY
Figure out what Category you want to
place your app under!
Sorry, you cannot pick Popular!
!45
46. 8. PICK YOUR PRICING
Click the Change pricing button
!46
47. 9. PICK YOUR SALES REGIONS
Pick which country’s Chrome Web Store can see your app
!47
48. 10. ENTER GOOGLE ANALYTICS
Enter your Google Analytics ID!
At the very least, you will see these on Google Analytics:!
1. those who go to your app’s details page!
2. Installs!
For Packaged Apps, you can hit the Analytics JS API!
http://developer.chrome.com/apps/analytics.html
!48
49. 11. SET APP VISIBILITY
This sets Visibility from a Domain perspective!
Set to All to make it visible to anyone!
Set to Chrome Web Store users with a [domain] account to only
make it visible to those in your Google Apps domain
!49
50. 12. OTHER
Set the Language, OpenID, and Mature content fields as
appropriate
!50
51. 13. PREVIEW
When you’ve filled out all the appropriate fields, go through
them one more time!
Click the Preview button at the bottom
!51
53. 15. DONE
Your part is done!!!!
Now you wait. Google will review your Promotional images,
and do some other processing.
!53
54. UPGRADING
You can change majority of values related to your Chrome app!
To change, simple modify the values or upload a new version
of the file!
Increment your Version when:!
A. Modified your manifest.json file!
B. You made changes to your app on the server-side!
Changes take a few minutes before they go into effect
!54
55. TRACKING
Google tracks the following for you:!
1. Weekly Users - How many still have it installed for the week (Total
Installs - Total Uninstalls)!
2. Impressions (Daily) - How many times did a user browse the
Chrome Web Store and your app came into view that day!
https://groups.google.com/a/chromium.org/forum/#!msg/
chromium-apps/WKLVaktnzxs/I1oi3D4NXRIJ!
3. Installations (Daily) - How many installed it that day!
4. Star Ratings and +1s on your app details page
!55
57. 1. RESOURCES
This presentation: http://goo.gl/7kO15T!
Important Links:!
https://chrome.google.com/webstore/developer/dashboard!
https://developers.google.com/chrome/web-store/docs/get_started_simple!
https://developers.google.com/chrome/apps/docs/developers_guide!
https://developers.google.com/chrome/web-store/docs/images!
http://developer.chrome.com/extensions/manifest.html!
http://developer.chrome.com/extensions/declare_permissions.html!
Next Evolution: Packaged Apps!
https://docs.google.com/presentation/d/1EmexDf1ZgZ-2fG5tsjFdLjhv_AhLAwWNl0szDKMs2g/edit?pli=1#slide=id.p
!57
58. ABOUT THE IMGEXPRESS APP
Objective:!
Reduce Image File Sizes while maintaining good Image Quality!
Avg. 80% - 90% Reduction from camera-generated JPEG!
Operations:!
Resize, Auto-Enhance, Watermark, Compress!
Use Cases:!
Make sites load faster from smaller image payloads!
Reduce file size of documents/presentations containing screenshots or pictures!
https://chrome.google.com/webstore/detail/imgexpress/
gdiiemjihjdlbgmpapglfmhjgddkacig