Submit News Alternative Tip Form
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.
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": [ "mysubdomain.example.com/" ], "launch": { "web_url": "mysubdomain.example.com/" } } }
Step 4
Saved the file, renaming it to “manifest.json” (make sure the .txt file extension is gone).
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.
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
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
can you post a link please?
Probably means this: https://github.com/GoogleChrome/chrome-app-samples/tree/master/mini-code-edit or this: https://github.com/GoogleChrome/chrome-app-samples/tree/master/text-editor
I’m working on a Sublime-inspired text editor for Chrome called Superb Text, but it doesn’t really work right now. Still, you can star it to follow updates here: https://github.com/andrewrabon/superb-text
How is it going? Any screenshots of your app?
This is what it looks like https://lh5.googleusercontent.com/-EfPErWiXwM8/USU0hBZLVSI/AAAAAAAAALo/DlLMj1ww1vA/w686-h428-p-o/Screenshot+2013-02-20+at+20.38.20.png
but it has changed now, the link to the Chrome App is here:https://chrome.google.com/webstore/detail/text/mmfbcljfglbokpmkimbfghdkjmjhdgbg
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
play.Spotify.Com
why chrome OS isn’t available to download and install on any PC ??
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.
Why not run Linux?
Did you mean creating an ocean inside an ocean? Installing an OS inside an OS? (You may do that with Virtual Box)
No, I meant actually wiping Chrome OS and installing a real Linux distro such as Ubuntu.
You can build and install Chromium OS. There are some builds from Hexxeh that are easier to install
Thanks for the how-to, worked great for me!
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:
developer.chrome.com/dev/apps/offline_apps.html
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.
There is an app for that :
https://chrome.google.com/webstore/detail/app-maker/kdfkhoiallnilompjljbindbmkdeccoo
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?
Thank you so much :)
great post thank you so much.
im a windows user and ive done everything, but the txt file doesnt convert into a JSON file what do i do?
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~!
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
@armaan_hussain:disqus save it as a manifest.json file not as a .txt file
Thanks. Worked fine :)
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?
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.
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
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