How to Add Custom Shortcuts to Your Chromebook App Launcher
Shortcuts for apps and plugins on your Chromebook are automatically installed in the app launcher when they are first downloaded, giving users a very convenient way to access their favorite downloads. Unfortunately, you can't add shortcuts to the app launcher unless the software is an official download from the Chrome Web Store.
In other words, Chrome OS doesn't include a way to add app icons that launch websites like the TheDailyBeast.com or open web services like Twitter or TurnTable.fm, because they can't be found in the Webstore. If you want to add shortcuts to websites like those--skipping the Chrome browser in the process--here's how you do it.
I. Create a Folder to Save the Necessary Files
For the purposes of our tutorial, we're going to make a Twitter shortcut that launches the Twitter.com website. The first phase of our how-to involves making a folder where you will later save an icon for the Twitter shortcut and a special text file with code that will launch the website.
- Launch the Files app from the Chromebook Launch Bar
- Hold CTRL + E to make a new folder
- Name the folder "Twitter"
II. Create an Icon for the Website
Before you create the code for the shortcut, you'll need to make a 128 x 128-pixel PNG image. This icon will appear in the app launcher. To do this, you'll need to install an image editor.
Instructions on installing the application and editing the image are below.
- Launch the Chrome Webstore from the app launcher
- Type “pixlr editor” in the search bar.Hit Enter
- Select “Add to Chrome” for the Pixlr Editor app
- Select Add in the dialogue window that appears
Pixlr Editor now appears in the App Launcher.
- Click the Pixlr Editor Chrome app to open it.
- Select “Open Image from URL” in the dialogue image that appears.
- Copy and paste the URL below into the blank field. And select ‘OK’.
Now you’re ready to create the icon that will appear in the Chromebook’s app launcher.
- Make sure the Crop tool is selected in the Tools panel to the left
- Set the Constraint drop-down (top-left. above the Tool panel) to “Output size”.
- Change both the width and height to 128.
- Crop around the Twitter icon and hit Enter to cut excess space from around the picture.
- Save the image by going to File in menu bar, then select Save.
- Name the file “icon_128”, set the Format to PNG and hit OK.
- Save the PNG image in the Twitter folder you created earlier.
III. Create Code for the App Icon
- Launch “www.editpad.org” in the Chrome browser
- Copy-and-paste the code below into EditPad.org.
"name": "App Name",
"description": "App description (132 characters or less, no HTML)",
- Change the fields respective to the website/service you’re adding. Be careful to keep the quotation marks and leave no empty spaces between letters and punctuation.
Change “App Name” to “Twitter”
Change “App description (132 characters of less, no HTML)” to “Twitter social networking app”
Change “"http://mysubdomain.example.com/" to “https://twitter.com/”
- Select Download & Save at the bottom of the screen
- Select the Twitter folder to save the file there.
- Change the file name to “manifest.json”, being sure to make the filename extension “.json”
IV. Install the Shortcut to the App Launcher (and the Extensions List in the Chrome Browser).
- Click the Menu button in Google Chrome
- Select More Tools
- Click Extensions
- Check off "Developer mode"
- Click “Load Unpacked Extension”
Select the appropriate folder which, in this case, is the one named Twitter, and tap Open.
Now the app appears in your list of extensions....
...and in the Chromebook app launcher.
When you click the new icon, it will take you to twitter.com and, if your password is saved in the browser, your Twitter account will load instantly. To add more shortcuts to the app launcher, repeat the steps above but change the folder name, make a unique icon and enter the corresponding data into the code.