SEARCH

How-To Geek

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

custom-chrome-bookmark-web-app[4]

Google is now pushing Chrome packaged apps, but many Chrome apps are still shortcuts to websites. You can make  your own custom web apps that function as shortcuts if the website you want isn’t available in the Chrome Web Store.

These Chrome web apps will also appear in the Chrome app launcher on Windows, Mac, Linux, and Chrome OS. You’ll be able to open them from the launcher and set them to always open as a window or pinned tab — you can’t do that with standard bookmarks.

This is different from creating taskbar and desktop shortcuts, allowing websites to run in their own windows. You can do that for any website.

Create a Custom Web App

To do this, we’ll essentially be creating the simplest kind of Chrome web app from scratch. All you really need is an icon and a web address.

First, create a new folder on your computer for your web app.

create-folder-for-chrome-web-app

Next, create a new text file named manifest.json inside your new folder.

create-manifest.json

Open the manifest.json file in any text editor — Notepad, for example. Copy and paste the following text into it:

{
“manifest_version”: 2,
“name”: “Website Name“,
“description”: “Description of website“,
“version”: “1.0”,
“icons”: {
“128”: “128.png”
},
“app”: {
“urls”: [
http://example.com/

],
“launch”: {
“web_url”: “http://example.com/
}
},
“permissions”: [
“unlimitedStorage”,
“notifications”
]
}

Change the bolded parts of the example code, replacing the website’s name, description, and URLs. For example, if you wanted to launch How-To Geek, you’d fill in “How-To Geek” in the name field, enter any description you like, and use the URL http://howtogeek.com.

manifest-json-file-for-chrome-web-app

Next, find a 128×128 PNG image file that will be used as the website’s logo. If you don’t have an image that’s exactly the right size, you can crop and resize a larger image with an image editor like Paint.NET.

Save the image file with the name 128.png in the folder you created.

create-icon-for-chrome-web-app

Finally, open Chrome’s extensions page at chrome://extensions/. Enable the Developer mode checkbox and click the Load unpacked extension button.

load-unpacked-extension-in-chrome

Browse to the folder you created and click OK — Chrome will install the web app you just created.

custom-chrome-bookmark-web-app

With the app installed, you can launch it from the new tab page, customize how it will open by right-clicking it, or launch it from the Chrome app launcher.

custom-shortcut-in-chrome-web-app-launcher

You can also click the Pack extension button to package the extension as a single installable .crx file. You can distribute this file to other people so they can install it, too.

Locally installed Chrome web apps and extensions won’t sync between your computers with Chrome Sync. To save time in the future, you may want to back up your web app folders or .crx files so you can easily install them on other computers.

The Quick and Ugly Way

You can also add custom shortcuts to your new tab page by dragging a bookmark from the bookmarks bar to the grid of icons.

easily-create-chrome-bookmark-web-app

Unfortunately, the large icon will be rather ugly, without a proper name or icon. This bookmark will function just like a standard bookmark app, but there’s no way to tweak it and make it look better.

ugly-chrome-web-app-shortcut


Ideally, Google would extend the drag-and-drop functionality with a way to rename these custom shortcuts and easily assign better icons. For now, we’ll have to make do with the manual solution.

Chris Hoffman is a technology writer and all-around computer geek. He's as at home using the Linux terminal as he is digging into the Windows registry. Connect with him on Google+.

  • Published 08/3/13

Enter Your Email Here to Get Access for Free:

Go check your email!