>

Tableau

August 10, 2017

I’ve been lazily looking for a simple, flexible and lightweight new tab replacement for Google Chrome, but pretty much all of them, even paid ones, are unconfigurable and seem bloated.

All I actually want comes down to:

  1. Nice background picture
  2. Date and time in a font I like

Since it’s that simple, I just wrote my own thing.

Installation

To be honest, I haven’t put much time/efforts in this, so installation is a bit cumbersome and (somewhat) automated only for MacOS users.

Give me a hint how to simplify it by submitting issue or PR!

#1 Get extension

Clone repo:

git clone git@github.com:alexfedoseev/tableau.git
bash

Or download it if you are not familiar with terminal.

#2 Add images

Drop images you like in the tableau/backgrounds folder.

#3 Build images index

Next, we need to build an index of images for the extension. I do it via Automator (sorry, Windows users, I don’t have automated solution for you, but see below What it actually does).

  1. Find Build.app file in the root of repository and open it in Automator (DO NOT double-click it, but open Automator and then open Build.app in it).
  2. Switch to Variables panel: View > Variables
  3. Double click backgrounds variable and choose tableau/backgrounds folder.
  4. Save and close.
Caret

Now, you can double-click Build.app and it will create images.js file for you.

FYI It will replace all spaces in image filenames with underscores.

Caret

#4 Load extension

Go to a Chrome’s Extensions list:

  1. Enable Developer Mode (check checkbox in an upper-right corner)
  2. Click “Load unpacked extension…” and choose folder with extension.
Caret

Open a new tab and enjoy the view!

Adding new images

Every time you add new images to the /backgrounds folder, you should run Build.app, then Reload extension in Chrome’s Extensions list (there’s a link right under the extension name).

Customization

The extension doesn’t have any special configuration UI, but you can change just about everything by editing index.html, index.css & index.js files. The source code is dumb simple and it’s around 100 LOC incl. HTML & CSS.

The most common thing you probably will want to change is a font-face. You can do it by editing line #2 in the index.css.

That’s pretty much all. Enjoy!

share