Submit A Tip Alternative Tip Form

[How To] Create a Chrome Web App

Google Chrome has an excellent way to quickly access your favourite Web Apps, in this How-To, I show you how to create your own App.

While this How-To has been written with Chrome OS in mind, it will work on Google Chrome as well.

How to Make a Chrome Web App for a Website

I wanted a web app for Spotify, so I have a nice icon in the launcher and I could also open the app in its own chrome-less window. Sadly, an app for the Spotify web player does not exist on the Chrome Web Store yet.

But you can create a web app for any website on the Internet.

For those using ChromeOS: you will need to an online text editor, like EditPad, to follow this tutorial.

Step 1

Create a folder in your “Downloads” folder on your Chromebook, name the folder after your web app. In this example I’m naming it ‘Spotify’ because I’m creating a Spotify web app.

Step 2

In this folder, download/create an icon for the app (it needs to be a 128×128 PNG file), rename it “icon_128.png”.

Step 3

Now you’ll need to create a plain text file with the following contents. Rename/edit the contents as per your web app.

{
 "name": "App Name",
 "description": "App description (132 characters or less, no HTML)",
 "version": "1.0.0",
 "manifest_version": 2,
 "icons": {
 "128": "icon_128.png"
 },
 "app": {
 "urls": [
 "http://mysubdomain.example.com/"
 ],
 "launch": {
 "web_url": "http://mysubdomain.example.com/"
 }
 }
 }

Step 4

Saved the file, renaming it to “manifest.json” (make sure the .txt file extension is gone).

Spotify Web App

Step 5

Once you have the icon and json file in the folder you should test that it works.

Open the ‘Extensions’ page from Chrome’s Settings menu.  Tick “Developer Mode”. Click “Load Unpacked Extension” and select the web app folder.

The Web App should now be installed on your New Tab page.

Extensions & Web Apps

Please note, you can not delete the web app folder, since Chrome will load the web app from this folder.

To publish your web app to the Chrome Web Store you will need to be the owner of the domain used by the web-app. If you do not own the domain of the web app, you can not publish it to the Chrome Web Store.

For further information hit the link below.

Chrome Web Store: Get Started

  • http://twitter.com/ddaalee Dale Alexander Webb

    There are some apps on the Google Chrome web team’s github site, the best one is a code editor that looks like TextMate 2. Makes it much easier to develop apps on Chrome OS

  • http://seanslater.com/ Sean Slater

    Just FYI, someone has created a Spotify ‘app’, it’s not official, but it works well. https://chrome.google.com/webstore/detail/spotify-web-player-launch/oafegckanldnpojgnlfgloifiejbkgog/related

  • NorthMcCormick
  • Amr Elghobary

    why chrome OS isn’t available to download and install on any PC ??

    • Sebastiaan Franken

      Because Google wants to provide you with a certain user experience, hence only running it on specific hardware.
      You CAN run it on “any PC” by downloading the source and building it. It might kill your kittens or blow up your house though, just saying.

      • http://www.techmansworld.com/ Michael Hazell

        Why not run Linux?

        • http://soumyabg.tumblr.com soumyabg

          Did you mean creating an ocean inside an ocean? Installing an OS inside an OS? (You may do that with Virtual Box)

          • http://www.techmansworld.com/ Michael Hazell

            No, I meant actually wiping Chrome OS and installing a real Linux distro such as Ubuntu.

    • http://twitter.com/ddaalee Dale Alexander Webb

      You can build and install Chromium OS. There are some builds from Hexxeh that are easier to install

  • Eli Shirk

    Thanks for the how-to, worked great for me!

  • http://profiles.google.com/kenny.strawn Kenny Strawn

    Just in case no one realized, that folder (and by extension .zip or .crx files), just like any other folder (when unpacked), is more than capable of containing all of the HTML, Javascript, CSS, GLSL, and whatever code already inside it. This tutorial is about hosted apps, but let’s face it, packaged apps are just as real and even more powerful. Case in point:

    http://developer.chrome.com/dev/apps/offline_apps.html

  • http://bit.ly/ardchoille42 Ian MacGregor

    I chose a 128×128 .jpg file and renamed it to icon_128.png (I changed the file extensions from .jpg to .png) and it worked fine. I’m guessing Chrome OS simply looks for the file name without verifying the file type.

  • Bruce Lam
  • Alejandro

    Thank you very much!! this helped me a lot and I have made 2 apps already, although I’m having some problems because if anyone installs one of my apps, then they can’t install my second app saying that there is a conflict with app number one. any suggestions?

  • Saad

    Thank you so much :)

  • http://computerttricks.blogspot.in/ vishal fulwani

    great post thank you so much.

  • Armaan Hussain

    im a windows user and ive done everything, but the txt file doesnt convert into a JSON file what do i do?

    • Junaid

      well just goto: my computer> click orgnaize on the very top left > folder and search options > goto the tab view > uncheck hide extensions for known type of files > now save and close > goto the file, you will find the names such as : peter.txt or skyrim.exe > now when you click on rename you can now also rename its extension…!

      Good luck~!

      • Drew

        Better solution–type your file in Notepad, and proceed to save it as usual. BUT… instead of saving as mainfest.json, which will be automatically converted to manifest.json.txt by Windows, save it as “mainfest.json” instead to override. The trick is to include the quotes around the filename; otherwise, use SciTE or another good editor instead, or take Junaid’s advice about Folder Options.

        And I’ve got a quicker way for that, too. In Notepad, copy the text below and save it as “showhidden.reg” :

        [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorerAdvanced]
        “HideFileExt”=dword:00000000

  • ankit

    @armaan_hussain:disqus save it as a manifest.json file not as a .txt file

  • Vengatesh TR

    Thanks. Worked fine :)

  • Lionlambmeat B

    Chrome can’t open ‘icon_128.png’. I saved it exactly as that name as a png and it is 128 x128 pixels? Deinterlaced or none?

  • https://www.facebook.com/fauxjacob Jacob Schweitzer

    Can I just say, I have used this exact method to create 10 “apps” for my Chromebook. The good thing about this is that for websites it works for, you can right click and select ‘Open As Window’ and the results for some websites are gorgeous. I know how to fill out each part of the code with the urls, a description, etc., but I can never remember the entire code. So needless to say, I come back here and copy and paste it several times.

  • Tee Wrecks

    Wow I had no idea that creating a web app was this easy…I found this article and in less than 10 minutes I had made my first web app! Thanks

  • http://danscodepress.blogspot.com.au/ Dan Collyer

    Thanks for the tutorial, I gave it a shot but i must be missing something as I cannot get you demo app to work. The best I have been able to do is a page tab extension https://chrome.google.com/webstore/detail/ubuntu-master-tab/jlobnpjicfobhigijjgicliihlpgjhce?utm_source=gmail . The tab takes users to tutorials I have provided for them to click. Does anyone have any ideas on how I could make the page tab more attractive or gain more functionality. Anyways thanks for listening and please visit my blog at http://www.ubuntumaster.com