How to Add Custom Shortcuts to Your Chromebook App Launcher

 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.

LEAVE A REPLY
Name*
Email* (will not be published)
Website
*Indicates required field
Comments*
Submit Comments

  1. 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.

  2. 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.

  3. 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???

  4. help Says:

    yeag im having the same issue?

  5. help Says:

    im having the same issue

  6. 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.

  7. 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.

  8. 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!.

  9. 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/”
    }
    }
    }

  10. UK School Technician Says:

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

  11. 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?

  12. 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?

  13. 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.

  14. 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!

  15. webbrowser1 Says:

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

  16. 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.

  17. 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/”
    }
    }
    }

  18. 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”
    }
    }

  19. Larry Says:

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

FIND A REVIEW
Laptops
All Product Types Accessories Cars Digital Camcorders Digital Cameras eReaders GPS Laptops MP3 & Video Players Projectors Smartphones Software Storage Tablets / MIDs VoIP Wi-Fi
All Subcategories
All Subcategories All-Purpose Budget Business Desktop Replacement Gaming Multimedia Netbook Nettop Rugged Student Tablet PCs Ultraportable
Brand
Acer Alienware Apple Archos ASUS Averatec BenQ CTL Corp. Dell Digital Storm eMachines Emtec Everex Fujitsu GammaTech Gateway General Dynamics Getac Gigabyte Hercules HP HTC iBuyPower Intel Lenovo MSI Nokia Nvidia OCZ OLPC OQO Origin Panasonic Sager Samsung Sony Sylvania Systemax TabletKiosk Toshiba Verizon Viewsonic Viliv VooDoo Workhorse PC ZT Systems
Minimum Rating
Any Rating Editor's Choice 4.5 Stars 4.0 Stars 3.5 Stars 3.0 Stars
Screen Size
10 11 12 13 14 15 16 17 18 20 4 5 6 7 8 9
Resolution
1024x576 1024x600 1024x768 1200X800 1280 x 720 1280x1024 1280x768 1280x800 1366x678 1366x768 1440x1050 1440x900 1600x768 1600x900 1680x1050 1680x945 1920x1080 1920x1200 800x400 800x480
Weight Range
10.1 - 12.0 pounds 12.1 - 14.0 pounds 14.1 - 16.0 pounds 2 lbs 2 pounds and under 2+ lbs 2.1 - 4.0 pounds 4.1 - 6.0 pounds 6.1 - 8.0 pounds 8.1 - 10.0 pounds Over 16 pounds Under 2 pounds
more options
SUBSCRIBE