The Idiot’s Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Ads by Google

chromebookmarks ii   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab PageFor the past couple of years now, I have more or less been exclusively using Google Chrome as my day-to-day work browser. And it works pretty much the way I want it to, with its speed and its synchronization with my Google account.  Chrome is simply one of the best products that Google has ever produced.

But saying that, there are some irritating things about Chrome that really bother me.  One of them was not being able to bookmark any site I wanted to on my New Tab page.  But now I have found the solution and I want to share it with all of you.

Now first of all, to clear up any potential misunderstandings, when I say “bookmarks”, I don’t mean regular bookmarks like these :

browserbookmarks   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

No, in actual fact, what I am talking about are these :

chromentbookmarks   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Ads by Google

When you open a new tab page in Chrome, you are presented with logos of sites to open.  Some of them came preinstalled with Chrome but the vast majority are installed after looking in the Chrome Web Store for them. But this can be a very tedious task because first of all, the Chrome Web Store is enormous (who has the time to plough through a lot of crap to find the obscured gold nuggets?) and secondly, a lot of your favourite sites may not have bookmarks made for them already.

So today I am going to show you how to make New Tab Page bookmarks for any site you want. ¬†It’s quick, it’s easy and you’ll be making bookmarks before you know it.

New Tab Page Bookmarks Recipe

swedishchef   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Ingredients

  • One website logo (128×128 pixels in size, or thereabouts (the world won’t come to an end if it’s 129×129 pixels) Either do a size search in Google Images for a suitable logo or get a bigger logo and shrink it down using an image editing tool, of which there are LOTS). I prefer SnagIt but that is a paid option. If you want to use something free, you can’t go wrong with Irfanview.
  • Google Chrome (obviously).
  • Notepad (or a similar text file making app).

Step 1 – Make The Folder

Create a new folder in Windows Explorer and inside, place the 128×128 icon.

Step 2 – Make The Script

Open up Notepad (or an equivalent) and copy/paste in the following:

{
"name": "insert the name of the website here",
"description": "Link to name of website",
"version": "1.1",
"manifest_version": 2,
"icons": {
"128": "icon.png"
},
"app": {
"urls": [
"add link to desired website here"
],
"launch": {
"web_url": "add link to desired website here"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

The parts in red italics are the parts you have to alter to suit each bookmark. ¬†For the purposes of this demonstration, the 128×128 icon is simply named “icon.png” but of course you can name it whatever you want. ¬†Simply make sure that you change the name in the script to match the icon name, otherwise nothing is going to show up in Chrome.

When you have filled in all the necessary details, save the file and name it manifest.json . ¬†Then place the saved file inside the same folder as the 128×128 icon.

manifestjson   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Step 3 – Go To Your Chrome “Extensions” Page

To get to your Chrome extensions page, simply type chrome://chrome/extensions into your browser address bar and hit enter. ¬†Then on the page, tick the “Developer Mode” box in the top right hand corner.

developermode   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

This will reveal three options, normally hidden from view, as you can see in the above screenshot. ¬†For the purposes of installing our bookmark, we only need the first two “load unpacked extension” and “pack extension“.

Step 4 – Load Unpacked Extension

The Load Unpacked Extension option is for extensions which don’t come from the Chrome Web Store. ¬†Click on that, navigate to the folder you made containing the manifest.json script and the logo and press OK. Upload the actual folder, not the individual files. ¬†You will then (hopefully) see your extension sitting nice and pretty sitting in the extensions list.

Here’s my one for MakeUseOf :

muobookmark   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

But it isn’t over yet. ¬†There’s still some more work to be done here. ¬†But it’s almost done.

Step 5 – Pack The Extension

Now, click on the other button Рpack extension.  This will open up this box.

packextension   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Ignore the Private key file option. ¬†Instead, focus on the other option - extension root directory. ¬†As you did when unpacking the extension, navigate to the new bookmark’s folder in Windows Explorer, using the browse button. ¬†When you have it in the text field provided in the pack extension box, click the “pack extension” button.

packextension2   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Doing so will create two new files, which you should immediately place inside the folder, alongside the icon and the JSON file – a¬†.CRX file and a .PEM file. ¬†The PEM file is supposedly for when you want to update the extension, but for a simple bookmark, if you want to update it, you can just create a new bookmark and uninstall the old one. You can see here how quick and easy that is. Nevertheless, it doesn’t hurt to keep a hold of the PEM file.

The CRX ¬†file on the other hand is the really important one. ¬†When you download and install extensions from the Chrome Web Store, it’s a CRX file that you are receiving and installing.

Step 6 – The Final Steps

First of all, uninstall the first version of the extension that you installed in your extensions folder, back in step 4.  You can do this by clicking the little trash bin logo to the right of the extension listing.  You have to uninstall this because it will otherwise conflict with the packed version of the extension that you are about to install.

Secondly, keeping your browser on the extensions page (it won’t work if your browser is open on any other tab), drag the newly-made CRX file into Chrome. ¬†You should immediately see this :

drop2install   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

So, do as it says – drop that sucker into Chrome! You’ll then see this :

addmakeuseof   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Of course, choose “Add” and your new bookmark will then pop up on your New Tab Page :

makeuseofbookmark   The Idiots Guide To Adding Website Bookmarks On Your Google Chrome New Tab Page

Go ahead, give it a spin. Click that baby and be taken into the Interwebs.

Now all that remains is to go back to your extensions page and untick the “Developer Mode” box so the three extra buttons disappear. Unless of course you have a sudden craving to make more bookmarks!

Conclusion

If you are looking for resources for high quality icons, you simply have to use resources such as Google Images, which will give you countless possibilities. Or if you are of the Photoshop / GIMP persuasion, you can make your own icons. If you want a logo for a MakeUseOf bookmark (of course you do), then you can use the (slightly outdated but still valid) logo, which I used, by clicking here.

So what kinds of New Tab bookmarks did you make for your Chrome browser? Did you manage to make your bookmarks without a hitch? Let us know in the comments below.  Oh and if you have any great resources for high quality icons, also drop those links in the comments.

Ads by Google

40 Comments - Write a Comment

Reply

RYan

I liked the idea till I saw all the steps required. Not really worth the effort IMO when the bookmark bar is so much easier to use, can include way more bookmarks and can include folders.

Mark O’Neill

But who wants to dig into folders and look for a specific bookmark when you can just have it on your New Tab page?

The process sounds like a lot but it isn’t really. Once you have the basic manifest.json file set up, doing more is simple :

1. Copy the file, paste it, and rename it.
2. Swap out the icons.
3. Change the URL details in the JSON file.
4. Install it in the extensions page.

Once you get into the rhythm of it, you’d be amazed at how fast you can whip up bookmark extensions.

Crazie Flawed Narcissistic-VampDoll

“YESSSS” im my Morpheus voice!

Reply

Terafall

I think its easier to use myfav.es as startpage than do all that

Mark O’Neill

Where’s the fun in using someone else’s page? That’s too easy! :-)

Reply

Sam K

Or you could just use a 3rd party new tab replacement like speed dial 2. It just works looks better than standard chrome new tab page and FULLY customizable.

Alexander

I use Awesome New Tab where there is a link to MakeUseOf. Easy way to get to makeuseof :P

Reply

Benny Teo

Here’s a simpler way to do it, however it requires your site to be on the “Most visited” tab.

1) Go to your “Most Visited” tab
2) Drag & drop the thumbnail of the site you want to “bookmark” to the Apps tab.

the other problem with it is that you cannot customise your own icon.

Anonymous

Do you know of a way to force a site to be shown on the “Most visited” tab? There is one I use multiple times daily, but it never shows. I think I might have accidentally clicked the “dont show on this page” button, but now I can’t get it back. I don’t want to reset everything & start over.

Mark O’Neill

No idea sorry. Have you looked in the Chrome help pages? Or you could try our own MakeUseOf Answers to see if anyone knows…

Let us know what you find out….

Mark O’Neill

Yes that works, but as you said, you can’t change the icon. You get a blurred screenshot image and that doesn’t look very nice.

Reply

Christopher Miliotti

Nice information and guide to creating own extension! imo its much simpler to just get an already made extension like “SpeedDial2″ which does exactly this but easier. Its been great!

Reply

vineed gangadharan

that was an awsum article ,,,thanks :D

Reply

Anandu B Ajith

I Am Not An Idiot

Mark O’Neill

No-one said you were :-)

Reply

Anonymous

This is pretty cool, but there is an extension for Google Chrome that allows you to do this much easier. It is called Awesome New Tab Page and works well

Reply

Shubham Rao

good trick

Reply

Steve

IMO it seems like quite a large bit of work, when you could use something like Speed Dial 2 ( https://chrome.google.com/webstore/detail/speed-dial-2/jpfpebmajhhopeonhlcgidhclcccjcik). I’ve been using it for at least two years. It still allows you to access almost all of the features of the regular NT page. You can also use your own HR images or Screenshots. It does grouping also.

Reply

Ashutosh

You can also create bookmarks (or apps) by dragging sites from the “Most Visited” page to the “Apps” page. The downside is that Chrome doesn’t sync these “apps”, in case you have multiple PCs.

Reply

Achraf Almouloudi

I like it but I have found out that it’s nearly impossible to find 1:1 logos to match Google rule of 128×128 which is lame .

Mark O’Neill

But you can get a larger image on Google Images that is the same height and width, and simply shrink it down. So get (for example) a 200×200 image and shrink it down to 128×128. No problem.

Achraf Almouloudi

Try it, you wouldn’t be able to find such 200×200 image, it is what I mean by 1:1 aspect ratio (number of vertical pixels is same as horizontal pixels) so that’s why I do not agree on Google choice of 128×128 resolution, it is not easily found.

Reply

Aditya

Dear Mark,
You did a great job!
Just want to tell you that the unpacked extensions will never load until the links are prefixed with a “http://”.
Thanks.

Mark O’Neill

Of course. I apologize if I didn’t make that clear in the article.

Reply

Aditya

Dear Mark
You did a great job!
Just want to tell you that the unpacked extension will never load until you prefix the website address with a “http://”
Regards:
Aditya

Shahbaz Amin

Thanks..

Reply

Mike Crabill

Very interesting and fun if you like playing around with mods and customizing your programs.

Reply

Marian Cimbru

Thanks for this tip! Save this article to Pocket for later trying…

Reply

Michael Jan Moratalla

nice I like this I will soon transfer from firefox to chrome so I need this thanks it’s very useful

Reply

Magnus Juhl Petersen

I’ve been doing that a lot before.
Recently stopped, because it’s simply not worth it.
Spending so much time writing these files and gathering images just to add a bookmark.

So.. I’ve been working on a secret project for some months! :3
From there you can easily add & sync your bookmarks and more.

Reply

Joel Lee

I don’t really use the Chrome tabs page, but if features like this are possible, I may just start… Nice tutorial.

Reply

Gerald Huber

I love to tinker around with this kind of thing. right now I also use speed dial and it works fine but I will give this a whirl just cuz i can. thanks

Reply

Kimberly Noh

I am so new to Google that I will need a whole month to figure out how to make it work for my practice. I hate outlook but I have to use both gmail and outlook as I can’t get gmail to act the way outlook does with folders important tasks followups ect. I am going to attempt this one and see if I am smart enough for it.

Reply

Tim Schluter

Is there a limit to the number of bookmarks that can be installed?
I can see myself going crazy with this. I’d like to have a lot of my regular bookmarks in the New Tab Page.
Thanks. Oh and I’ll point the finger towards you when the wife complains I’m spending too much time at the computer.

Mark O’Neill

I can’t give you a definitive answer one way or another, as I “only” have 20. I assume you can keep going. Let us know if you hit a limit! :-)

Reply

Aleks

This is a great tip. Thanks!

Reply

Suvadeep Paul

This is really good stuff…I will need it…Thanks..

Reply

Shahbaz Amin

Thank you!!
I will have to come back and follow it properly… :O

Reply

Jeff Hein

Very handy and informative guide! Thanks a bunch!

Reply

Martin Ristovski

Thanks a lot for this tutorial.

Your comment