How to Add Custom Shortcuts to Your Chromebook App Launcher

  • MORE

screenshot 2018 01 29 at 3.13.55 pmShortcuts for apps and plugins on your Chromebook are automatically installed in the app launcher (also called the Shelf) when they are first downloaded, giving users a very convenient way to access their favorite downloads. Unfortunately, your favorite websites don't show up there automatically.

Fortunately, you can add your favorites to this window, as long as you know how.

1. Open the webpage in Chrome, such as ESPN.com, the example I'm using here.

image 2096041517257515

2. Click the Menu icon.image 2096041517257603

3. Select More Tools.image 2096041517257673

4. Click Add to shelf.

image 2096041517257765

You've added a shortcut to the shelf (also known as the app launcher!)

screenshot 2018 01 29 at 3.14.21 pm

Author Bio
Henry T. Casey
Henry T. Casey,
After graduating from Bard College a B.A. in Literature, Henry T. Casey worked in publishing and product development at Rizzoli and The Metropolitan Museum of Art, respectively. Henry joined Tom's Guide and LAPTOP having written for The Content Strategist, Tech Radar and Patek Philippe International Magazine. He divides his free time between going to live concerts, listening to too many podcasts, and mastering his cold brew coffee process. Content rules everything around him.
Henry T. Casey, on
Add a comment
37 comments
  • Jeffrey Blair Says:

    Alejandro Cuervo Says:
    April 15th, 2016 at 2:26 pm
    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 was easiest way get it accomplished.

  • 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