Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Publishing to the Chrome Web Store


Published on

An end-to-end guide on how to convert your .com site into a Hosted App on the Chrome Web Store.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Publishing to the Chrome Web Store

  3. 3. PART 1 - BASIC CONCEPTS !3
  4. 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. 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. 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. 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. 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. 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! !9
  10. 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. 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. 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:!! You can transfer account ownership ($5 fee) ! dev_account_transfer !13
  14. 14. 2. PAY THE ONE-TIME FEE 1. Go to the Chrome 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. 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 !16
  17. 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. 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 !18
  19. 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": "", "manifest_version": 2, "app": { "urls": [ "" ], "launch": { "web_url": "", "container": "panel", "height": 650, "width": 1280 } }, "icons": { "128": "icon_128.png" }, "permissions": [ "unlimitedStorage", "notifications" ] We will now cover highlighted variables in detail } !19
  20. 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 “”! Must increment version when something in manifest.json file changes! Version changes trigger autoupdate (see link for subtleties)! !20
  21. 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. 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. 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. 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)! !24
  25. 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}! !25
  26. 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. 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. 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. 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.! !30
  31. 31. 920x680 440x280 1400x560 SAMPLE PROMOTIONAL IMAGES BY GOOGLE !31
  32. 32. PROMOTIONAL IMAGES ON CWS 1400X560 920X680 440X280 !32
  33. 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:!! ! 2. Then link the icon to your (future) Chrome app’s page from the Chrome Web Store !33
  34. 34. EXAMPLES Links to: imgexpress/gdiiemjihjdlbgmpapglfmhjgddkacig !34
  35. 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. 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
  37. 37. THE HARD PART IS OVER!!! !37
  39. 39. 1. CREATE APP SKELETON These are the steps to create the initial part of your app! 1. Go to the Chrome Developer Dashboard! dashboard! 2. Click the “Add new item” button! 3. Upload your Zip file !39
  40. 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. 41. 3. UPLOAD AN ICON Upload the same icon PNG file contained in your zip !41
  42. 42. 4. UPLOAD SCREENSHOTS Upload all the screenshots you made! Tip: Upload them one at a time, in the proper sequence !42
  43. 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. 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! !44
  45. 45. 7. PICK A CATEGORY Figure out what Category you want to place your app under! Sorry, you cannot pick Popular! !45
  46. 46. 8. PICK YOUR PRICING Click the Change pricing button !46
  47. 47. 9. PICK YOUR SALES REGIONS Pick which country’s Chrome Web Store can see your app !47
  48. 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! !48
  49. 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. 50. 12. OTHER Set the Language, OpenID, and Mature content fields as appropriate !50
  51. 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
  52. 52. 14. PUBLISH If it looks good, click on the Publish link !52
  53. 53. 15. DONE Your part is done!!!! Now you wait. Google will review your Promotional images, and do some other processing. !53
  54. 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. 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!!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
  56. 56. PART 5 - RESOURCES
  57. 57. 1. RESOURCES This presentation:! Important Links:!!!!!!! Next Evolution: Packaged Apps! !57
  58. 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! gdiiemjihjdlbgmpapglfmhjgddkacig
  59. 59. 2. CONTACT Gerard Cordero! Email:! G+:! Twitter: @GerardCordero !59