Quick Tip: Make a Chrome App Shortcut For Any Web App

While I’ve got just about everything I want as native apps on my home Mac, things get more complicated on my Windows and Chrome OS netbooks. There, I use web apps for much more of my work, and it's the most convenient to launch web apps that have apps from the Chrome Web Store. The only problem is, not every web app has an app in the Web Store.

That doesn't have to be a problem, though. In this tutorial, I’ll show you how to create Chrome app shortcuts on your own, and how to use them to streamline your workflow.

Creating Chrome App Shortcuts

You may be wondering why I don’t just use bookmarks, but they're simply not always the best way to get to my web apps. I use 1Password, the password manager powerhouse, to manage just about everything, from the eponymous passwords to credit cards and secure notes. Relying so completely on an app makes it difficult to shift to an unsupported operating system. 1Password is available on just about any device, but because the 1Password Chrome extension requires the accompanying Mac or Windows app, it doesn’t work on Chrome OS.

Instead, I can create a web app shortcut to my 1Password vault in Dropbox. Because Chrome will open app shortcuts as standalone windows, my Chrome OS version of the Mac app will look just about the same and function pretty similarly to the original, too.

Here's how I made my 1Password vault shortcut in Chrome, and even if you don’t use 1Password, this tip can work for just about any web app.

How It Works

Step 1

Create a folder for your new Chrome app shortcut. Only the assets for the app will go in the folder, so make sure each Chrome app you make gets its own folder.

Step 2

Open a text editor, like TextEdit on Mac or Text.app for Chrome. Paste the text below into a new document; if your text editor allows rich text, make sure you’re in Plain Text mode.

{
"manifest_version": 2,
"name": "APP NAME",
"description": "DESCRIPTION",
"version": "1.0",
"icons": {
"128": "ICON.png"
},
"app": {
"urls": [
"https://URL.COM/"
],
"launch": {
"web_url": "http://URL.COM/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

It’s time to edit the Chrome app. Replace APP NAME and DESCRIPTION in the new document with your app’s name and a short description. This app is just for you, though, so you’re free to name it what you like.

Step 3

Find an icon you’d like to use for your Chrome app. The default app icon or favicon for the app or website to which your shortcut will point is an easy choice, and by using Google Image Search you should be able to find quickly an appropriate PNG image on a transparent background.

If you can find an image you like sized at 128x128 pixels, that’s even better. If not, resize or crop your image to those dimensions. Place the image in the Chrome app’s folder, and replace ICON.png with the image filename.

Step 4

Replace http://URL.COM with the URL to which your Chrome app shortcut will point. Make sure to replace both instances of http://URL.COM, or your Chrome app will not work.

Step 5

Save the text document as manifest.json in the Chrome app folder. If your file is named anything else, Chrome won’t be able to use your app shortcut.

Save the file as manifestjson — Save the file as manifest.json.

Some text editors may try to force a TXT extension or prompt you to confirm the JSON extension. If you have any problems, open the Chrome app folder and manually change the file extension.

Step 6

Open the Chrome Extensions tab found in the Window menu or under Tools in the dropdown menu to the right of the address bar.

Open Chromes Extentions — Open Chrome's Extentions.

Select the checkbox to enter Developer Mode. Click Load Unpacked Extension, and locate the Chrome app folder you created earlier.

Once you’ve confirmed your Chrome app’s directory, it will appear at the top of your Extensions list. Notice that the app’s name and description are the same as in the manifest.json file. Next to Loaded From, Chrome displays the directory path to your Chrome app.

Your Chrome app will appear in the Extensions list.

Tip: If you ever move the Chrome app folder, the app will no longer work. Relocate it using Load Unpacked Extension.

Step 7

Your new app is now located in the Chrome App Launcher. Click the app icon to open the URL associated with your Chrome app in a new tab.

That’s not really any better than a bookmark though. Chrome app shortcuts come in handy when you want to always open a URL as a pinned tab or in fullscreen. Right-click on the app icon and select Open as Pinned Tab or Open Full Screen to set your preference.

Open the app shortcut in different ways.

Step 8

That’s about the limit of Chrome app shortcuts on the Mac, but you can take them one step further in Windows or Chrome OS.

In Windows or Chrome OS, find your icon in the Chrome Apps Launcher. Right-click on the app icon, and you’ll see an additional option, Open as Window. Your Chrome app will open in a standalone window on the desktop and will look much more like a standalone application, outside of Chrome.

In Windows or Chrome OS open the web app in its own window — In Windows or Chrome OS, open the web app in its own window.

Tip: Fluid for Mac can create standalone apps from URLs, but like Chrome apps, they still require an internet connection to work. Fluid apps are separate from other browsers, so they do not share cookies as a Chrome app does. That makes them a great option to stay logged into multiple accounts at the same time on your Mac. If you don't need that, though, these Chrome app shortcuts are a free alternative that work much the same.

Conclusion

There are lots of great tools in the Chrome App Store, but there are lots of apps that still haven’t made it in or have limited functionality across devices. With this tip, you can fill in a lot of those gaps and create the Chrome app shortcuts you need to keep working.

Hit any snags in getting your own Chrome app shortcuts made? Leave a comment below, and we'd be glad to help you out.