Adding Awesome Websites To Your Chrome App Launcher

Add all your favorite websites to Chrome's App Launcher.

Adding Awesome Websites To Your Chrome App Launcher

So in your launcher, you have all these lovely links to useful Google Apps and any apps you can find in the Chrome Web Store.

Chrome App Launcher 1

Unfortunately, if you have a website you visit regularly but isn’t available in the Chrome Web Store, there’s not much you can do.

You can always use bookmarks, but if you’re like me, you know too many bookmarks tend to suck and end up just being a useless clutter of links you never end up actually benefitting from.

So all in all, it looks like clutter and a ridiculous # of bookmark folders are your best options.

Chrome App Launcher 2

UNLESS YOU COULD ADD YOUR OWN LINKS TO THE APP LAUNCHER.

DUN DUN DUN…………………

Tutorial time.

Things You’ll Need

icons below were created using this Pixel Icon Generator

Chrome App Launcher 3

Chrome (derp)

Chrome App Launcher 4

A text editor (I prefer Sublime Text)

Chrome App Launcher 5

Google-fu (Just a little!)

Step 1

Choose which website you want to add! 😍

I chose One Page Love, which is a One Page website design gallery showcasing the best Single Page website designs from around the web. Chrome App Launcher 6

Step 2

Create a folder with he name of the site you want to add to your Chrome App Launcher.

Chrome App Launcher 7

You’re going to end up having two files with each folder/app you create:

  • manifest.json which holds all the information about your app
  • .png file which is going to be a 128x128 icon that will represent your website

The png can actually be any size, but 128x128 is ideal.

You’ll need both for this to work (there can be errors!).

Step 3

Open up your text editor and type in the following:

{
    "manifest_version": 2,

    "name": "One Page Love",

    "description": "One Page Love is a One Page website design gallery showcasing the best Single Page website designs from around the web.",

    "version": "1.0",

    "icons":
    {
        "128": "onepagelove.png"
    },

    "app":
    {
        "urls":
        [
            "//onepagelove.com/"
        ],

        "launch":
        {
            "web_url": "//onepagelove.com/"
        }
    },

    "permissions":
    [
        "unlimitedStorage",
        "notifications"
    ]
}

The above example works with the One Page Love website.

Chrome App Launcher 8

Step 4

There are 4 variables you’re going to change to work for your website in the above code:

  • name : site title
  • description : site description
  • 128 under icon : png file name
  • urls under app and the web_url under launch : site url

A handy tip to get the description for the website fast is by using the query info:onepagelove.com in Google which will provide information about the url. No spaces, or else it doesn’t work.

Chrome App Launcher 9

Step 5

Now save this file that you’ve edited to work with your website as manifest.json into the folder you created in Step 2.

Step 6

Time to get your icon!

You can accelerate your search by going to Search tools > > > Size > Exactly... > Width: 128 px, Height: 128 px and then by typing in filetype:png into the Google search to select specifically for PNG files.

Chrome App Launcher 10 > > !Chrome App Launcher 11[](https://lh3.googleusercontent.com/ihygRVbvUBHJ5YzkSFPRUM4wFtwWiZP1wLWaPwyhdMp3U10EedL3PrexH9E8t6jL0Yz8svju8AkVTrgeG_2ap4YOVeiv0Vct3Kc1lVubaRv3Y-YAmDg9JZKWwqH2RoaI_F6h-68v-Z9vt7FmigGCuDh7izNfqakgLBVC_dbcdOFBm1Tzjd5VB8GyFq0Yu1F5i1XGiAiqdj2PTHwjQ9PI2k3XWRE-fw539qX2yst-fhf5L1hoZoX8GO6rfO7nQnmMbCsIVnoJcaPSZGHxPFlGrz3vkPrR01PLnv78I4R02tSl9TUisdSQ0k1J8xq9ybP8R6gqHGQkJPPjH2ZYYcVGdL0Pn51YyEZlbpDV9oI9t0gC-qYLIjGnRLPgHMly1Xyjx9N_hNxgvi65dL1G__UefrzZMbB7-Zl48PLm9WNwjtProOD6koH-GhbsN6It67mG-qSMj4TvMRIlh8nZ5oG-b0sbnlmJvM7Y2IdFgvLuDjtyoJoLbGcWFq1fjpWdH-_9ioO9LyAOwdJ25CxQwO-4QQ4T2RmU4klG3mf7igOHgrTCGAPr83E0_5Ul7O7Ge5W92N-zQG-5V_POTTPwoKLE97gK2VRfaO6gOuuMhP0KH0obClg77F-hQS0j9VdwCMXC=w396-h220-no)

Step 7

You’re ready to add the extension!

Head over to chrome://extensions or use your toolbar to get there.

Chrome App Launcher 12

Click Load unpacked extension...

Choose the folder with your files that you created Step 4.

Step 8

Your website will now show up in the extensions!

Chrome App Launcher 13

And once it shows up in your extensions, it’ll also show up in the Chrome App Launcher.

Chrome App Launcher 14

That’s it. Congratulations! 😊