Tableau

10 Aug, 2017 · #dev

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:

Nice background picture
Date and time in a font I like

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

Tableau

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:

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

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

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).
Switch to Variables panel: View > Variables
Double click backgrounds variable and choose tableau/backgrounds folder.
Save and close.

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.

What it actually does

This workflow reads a content of the tableau/backgrounds folder and writes images index to the tableau/images.js file:

images.js
js
window.IMAGES = [
  "bells.jpg",
  "whistles.png",
  …
];

So, how you create and update this file is totally up to you. I.e. you can convert Build.app to folder watcher to automatically perform rebuilds or, if you’re Windows user and you have no idea how to write scripts, then you can create it manually and it will work.

###

4. Load extension

Go to a Chrome’s Extensions list:

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

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!

Get the updates on