How to Create Custom Web App For Your Favorite Websites In Chrome

Chrome OS makes it easy to access your favorite websites, but there’s a catch. By default, your website of choice must have already submitted an app to the Chrome Web Store. This is a problem, as some major websites do not have an app available, such as Wikipedia. The good news is that creating custom web apps of your own isn’t that difficult.

Using the Wikipedia example, the first step is to create a folder and name it “Wikipedia.”

Launcher Folder

You then need to find an image to use as your web app’s icon. The file must be named “icon_128.png” and resized to 128 by 128 pixels. Pixlr Editor is a Chrome Web App you can use to resize .png files and preserve their transparency. When you’re done, save the image into the folder you just created.

Launcher Edit Icon

Before getting started, you will need to have a text editor installed that can export to a .txt file. Scratchpad won’t cut it, as it cannot export a .txt file, but you can create a .txt file inside any browser using EditPad.

Copy and paste the following text into your text editor. If you want to create a web app for another website, change the references to Wikipedia to your website of choice.

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

Save your text file inside your Wikipedia folder and rename it “manifest.json”. Your Wikipedia web app is now complete and needs to be imported into Chrome. Go to the extensions page and enable “Developer Mode.”

Launcher ExtensionsClick “Load unpacked extension…” and select the folder you just created. Your completed app should appear in both your list of extensions and your app drawer.

App Drawer

If you don’t use Chrome OS, the same process will work for creating custom web apps inside Google Chrome. You can stop here, and as long as you don’t delete the folder containing your app, it will continue to work.

If you want a more convenient solution, you can package your app. Return to the extensions page and click on the “Pack extension…” button. You will be prompted to select the folder containing the extension you want to package. Select the folder you just created and click “Pack Extension” when you’re done.

ChromeOS Launcher Pack

A .crx file should appear on your desktop. Drag this file into the folder containing your web app. Uninstall the version you previously installed so that it doesn’t conflict with the new version, then drag the .crx file into the Chrome browser to reinstall your application.

If you create a web app that happens to point to your own website, you are free to submit it to the Chrome Web Store. Be sure to back up all of your custom web apps afterwards, just in case you accidentally delete the folders containing them. Web apps may cease to work as desired if they can no longer find their target folders.

Creating custom web apps may not be as easy as creating a bookmark, but it saves time having your favorite websites placed front and center. If you have any questions about creating custom web apps for either Chrome OS or the Chrome browser, feel free to ask them in the comments below.