Add Separators in Chrome’s Bookmarks Bar

I often use my bookmarks bar in Google Chrome heavily at work and wanted to add separators. Unfortunately for me, Chrome has no native support for separators. Other browsers, such as Firefox, use separators, so why can’t Chrome? Well, I’m not getting into those details, there’s other discussions on the web for that.

I’m here to show a nice compromise. Through my research, I’ve found people who have actually setup websites with a separator favicon which you then must rename to a blank name after adding their website to your bookmarks bar. This worked well for a compromise, at least until the pages were taken down for whatever reason.

I took this idea, but made a slight twist. I’m not hosting the page, you are. In fact, the URL, which really is a URI since it actually doesn’t go anywhere, is the page itself. I managed to get it to 758 bytes, however, it can get smaller with modification. I can do this using the data URI scheme. This data URI scheme, unlike your typical HTTP URL scheme which tells your browser where the data is, actually contains the data itself.

Anyway, enough jabber jabber! Here’s how to add my separator to your bookmarks bar:

  1. Click this.
  2. Drag the link into your bookmarks bar.

That’s really all there is to it. It has some advantages over a website:

  • You do not need an internet connection at all to start using it.
  • You don’t need to rename it to a blank name.
  • It contains a link of itself to easily add more separators to your bookmarks bar.
  • Because it is a self-contained data URI and has no association with me, this page, or anything, it is completely untrackable.

What does it actually contain? It contains a very simple HTML document comprised of some JavaScript to print out a link of itself along with its size in bytes and of course a favicon of a separator—which, by the way, is a data URI in itself. The data URI used for the favicon is a simple 16×16 PNG image that I tried to get as compact as I could. You can see all this after loading it and viewing to source of the page.

I hope someone finds this as useful as I have.

By the way, I’ve released this data URI under the public domain so you may freely do as you wish with it. I did this to keep the size small by avoiding copyright and license information contained the data URI. That said, I would appreciate proper credit if you post this method elsewhere. Also, if you make a modification of this (perhaps a smaller one?), I encourage you to share it in the comments!