How to Add Custom Shortcuts to Your Chromebook App Launcher

  • MORE

 AppLauncher_3_S8

 

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.

MORE: 20 Chrome Apps You Need on Your Chromebook

  1. Launch the Files app from the Chromebook Launch Bar
     
  2. Hold CTRL + E to make a new folder 
     
  3. 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.

MORE: 6 Fixes to Make the Chromebook Pixel Worth Buying

  1. Launch the Chrome Webstore from the app launcher

     
  2. Type “pixlr editor” in the search bar.Hit Enter


     

  3. Select “Add to Chrome” for the Pixlr Editor app
     
  4. Select Add in the dialogue window that appears

    Pixlr Editor now appears in the App Launcher. 

     

  5. Click the Pixlr Editor Chrome app to open it.
     
  6. Select “Open Image from URL” in the dialogue image that appears.
     
  7. Copy and paste the URL below into the blank field. And select ‘OK’.
    https://twitter.com/images/resources/twitter-bird-white-on-blue.png
    Now you’re ready to create the icon that will appear in the Chromebook’s app launcher.
     
  8. Make sure the Crop tool is selected in the Tools panel to the left
     
  9. Set the Constraint drop-down (top-left. above the Tool panel) to “Output size”.
     
  10. Change both the width and height to 128.
     
  11. Crop around the Twitter icon and hit Enter to cut excess space from around the picture.
     
  12. Save the image by going to File in menu bar, then select Save.
     
  13. Name the file “icon_128”, set the Format to PNG and hit OK.
     
  14. Save the PNG image in the Twitter folder you created earlier. 
     

 

 

III. Create Code for the App Icon

  1. Launch “www.editpad.org” in the Chrome browser

     
  2. Copy-and-paste the code below into EditPad.org.
    {
    "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": [
    "http://mysubdomain.example.com/"
    ],
    "launch": {
    "web_url": "http://mysubdomain.example.com/"
    }
    }
    }

     

  3. 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/”
     
  4. Select Download & Save at the bottom of the screen
     
  5. Select the Twitter folder to save the file there.
     
  6. 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).

  1. Click the Menu button in Google Chrome
     
  2. Select More Tools
     
  3. Click Extensions
     
  4. Check off "Developer mode"
     
  5. 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.

Add a comment
36 comments
  • Cristobal Lopez Says:

    Great tutorial, I was able to accomplish the goal I had in less than than 20 minutes.

    Thanks

  • Alejandro Cuervo Says:

    Why bother with all this?
    1)Just browse to the website you want
    2)Click the menu button (the one with three horizontal bars to the right of the URL bar)
    3)Click “More tools,” then “Add to shelf”

    This will put a shortcut in the taskbar and the app tray with the page’s favicon.

  • Jonno Alvarez Says:

    I followed the steps by the book and it all worked beautifully. Thank you very much! I'm definitely pocketing this one.

  • Robert Says:

    This is a realy neat trick. it worked like a dream

  • Smitty Says:

    It's saying it can't load my extension icon? Help?

  • Kris Says:

    What a pain in the backside! I was prepared to follow the tutorial to get something approximately like the "create application shortcuts" function of chrome desktop versions. But as others have reported, the script didn't work for me. And I'll be buggered if I'm going to type it all out. Wasted enough time on this already. I don't really want this stupid chromebook, but have to have it for my work in a school that is going GAFE. What a pain. Give me a good old pc any day. For the chromebook I'll just stick to bookmarks, until Google wake up and give us the same functionality in the chromebook browser that we have on a desktop pc.
    And slightly off topic, but related... what the heck is with that stupid magnifying glass down where the start button would reside on a desktop? If I want to find an app, I have to click that, then click all apps, then click the app I want??? Come on Google, put the app launcher back in the task bar, or the shelf, or whatever the heck it is you've decided to call it. Too many clicks to get to stuff!

  • Tahlia Says:

    I would like to make my maths textbook into a shortcut but the url starts with 'file' not 'http' anything I can do?

  • Tom Says:

    Yeah...I think I'll just keep bookmarking. Unbelievable how needlessly complicated they made this. My Chromebook is great for what it is but this is a huge negative.

  • Richard Says:

    You have got to be kidding! I'm taking my Chromebook back. It's so very fast and cheap and cool, but not supporting and automatically building shortcuts of the user's choosing is soooo far beyond stupid it leaves me speechless. Google idiots! Too much control over MY computer.

  • Justin Says:

    All: I finally got it to work by typing the code out, instead of copy and pasting. I was trying to be lazy so I copy and pasted a million different times, changed the quotes (as suggested in the comments) and nothing was working. I finally bit the bullet, typed it all out--which took my 5 minutes, don't judge on my laziness--and now I have my custom app for Google Cloud Print.

  • Bob Says:

    {
    “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”: [
    “http://mysubdomain.example.com/”
    ],
    “launch”: {
    “web_url”: “http://mysubdomain.example.com/”
    }
    }
    }

  • Chris Says:

    I think I'll just type twitter.com into the omnibar. This is way too much work.

  • LinuxGuy Says:

    I noticed that the " copied from this site to the editpad site needed to be removed and replaced with " as when copied they were a curled " mark and replacing all " fixed my error. worked like a charm.

  • Jayesh Says:

    Well I tried a lot of times but it did not work that darn you. Tell me what mistake I did, here is my code:
    {
    "name": "Twitter",
    "description": "Twitter social networking app",
    "version”: "1.0.0",
    "manifest_version": 2,
    "icons": {
    "128": "icon_128.png"
    },
    "app": {
    "urls": [
    "https://twitter.com/"
    ],
    "launch": {
    "web_url": "http://twitter.com/"
    }
    }
    }

  • MadMax Says:

    In case anyone be curious, I found a manifest.json snippet that actually works:

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

  • Adrian Fox Says:

    An enormously helpful article though I have just wasted half an hour (again) trying to get this working as you STILL haven't corrected the cut and paste code that was in the original post. It is only by reading the comments below that the mistake is discovered and we can see why it doesn't work.
    Please can we have more articles like this though about customising and adding features to our Chromebooks. The world of .json files is just mumbo jumbo to most of us.
    With Windows we are used to experimenting and playing but with Chromebooks it seems to be only a world for those few in the know.
    A few more guides about how it all hangs together would be very useful. For example, where are the .json files for extensions and apps stored on the Chromebook and are they accessible and open to modification?

  • Marty Says:

    TheDailyBeast.com? Fuck off

  • Larry Says:

    Would it be possible to publish this to chrome web store so, everyone in our domain can install it?

  • Jason Says:

    Here's the correct code:

    {
    "name": "Outlook",
    "description": "Office 365",
    "version": "1.0.0",
    "manifest_version": 2,
    "app": {
    "urls": [
    "https://outlook.office365.com""
    ],
    "launch": {
    "web_url": "https://outlook.office365.com"
    }
    },
    "icons": {
    "128": "img/icon_128.png"
    }
    }

  • seth Says:

    wth is wrong with mine?


    {
    "name": "Steam Chat",
    "description": "Steam Community Chat",
    "version": "1.0.0",
    "manifest_version": 2,
    "icons": {
    "128″: "icon-128.png"
    },
    "app": {
    "urls": {
    "http://steamcommunity.com/chat/"
    },
    "launch": {
    "web_url": "http://steamcommunity.com/chat/"
    }
    }
    }

  • amihart Says:

    If you're going to be editing/writing code, I would suggest getting Text from the Chrome Web Store. It's an offline desktop app that runs separate from the browser and has a syntax highlighter.

  • webbrowser1 Says:

    Also, It says that the 'manifest_version' key must be present and set to 2 (without quotes). What in the world?

  • webbrowser1 Says:

    Hi. I'm quite new to this, but I wanted to try this project. Since my daughter uses my Chromebook for her Webkinz, I wanted to create a shortcut to it, so it would be easier for her. I tried many times, but couldn't get the darn thing to work!
    Below is the code I used, could you tell me where I went wrong?
    {
    "name": "Webkinz",
    "description": "Webkinz online pet care website",
    "version": "1.0.0",
    "mainfest_version": 2,
    "icons":{
    "128": "icon_128.png"
    },
    "app":{
    "urls":[
    "http://www.webkinz.com/"
    ],
    "launch":{
    "web_url": "http://www.webkinz.com/"
    }
    }
    }
    Thanks!

  • John Everitt Says:

    Replaced the quote marks and eliminated the spaces after commas. The combination solved the issue - not sure which fix or if both are required. Thanks to other comments.

  • John Everitt Says:

    Got to the end of "How to Add Custom Shortcuts to Your Chromebook App Launcher". Needed to check "ON" the developer key to see the "load unpacked extension",but it would not accept the "json" extension. The error message read "... The dictionary keys must be quoted." What do I do now?

  • dimo Says:

    Seriously? This complex for something that chrome used to do with a click on my other computer? I could just choose to save web page as an app on the desktop. It's cool you figured out another chromebook hack. But who's going to do this on a regular basis for each site they want to add into the menu?

  • UK School Technician Says:

    Hi Jose, looking at your code, there appears to be a comma missing from the end of "description":"Social Network",

  • jose Says:

    this is what I typed on the editor mentioned on this article. should I try a different one and what do you recommend?

    {
    "name":"Facebook",
    "description":"Social Network"
    "version":"1.0.0",
    "manifest_version":2,
    "icons":{
    "128":"icon_128.png"
    },
    "app":{
    "urls":[
    "https://www.facebook.com/"
    ],
    "launch":{
    "web_url":"https://www.facebook.com/"
    }
    }
    }

  • adam Says:

    Yeah, I had the same issue mentioned above and I'll describe what worked for me.

    1. You can't just copy/paste his provided manifest.json text. You need to retype it yourself. When you copy/paste you don't get the correct characters.

    Otherwise great article. This is nice!.

  • UK School Technician Says:

    Not sure about an issue with the version number because "1.0.0." worked OK for me but I had lots of problems when I copied and pasted for this web site. Firstly it changed the look of the quotes as mentioned by Bruce but it also inserted a space after each colon which I hadn't spotted initially. If anyone wants to paste their code I would be happy to have a look.

  • Bruce Goff Says:

    He has some syntax errors. The version should be "1.0" not "1.0.0". Also, if you are copying from the text of his manifest.json file you will have to erase his "..." and replace them with the quotation marks from you text editor. Well...at least I had to. It may depend on the text editor you are using.

  • help Says:

    im having the same issue

  • help Says:

    yeag im having the same issue?

  • Ben Says:

    I'm having the same problem as Jose
    It says the .json file isnt valid and something about dictionary keys
    can you help???

  • Jose Says:

    For some reason the code doesn't work for me. I keep getting prompted "Manifest is not a valid JSON" as soon as I click to load unpacked extensions. please help me. I have checked on jsonlint.com and it says that something is wrong with the code that I copied and pasted.

  • CAC1031 Says:

    You should mention that the new app folder must either be in Downloads or checked off in Drive for offline access for it to work. It may not be obvious to everybody.

Back to top