Skip to main content

Time Tab

# HTML # CSS # JavaScript # browser extension # web
chrome download firefox download source

Browser extension that replaces the default new tab page with a customizable clock. Download for Chrome or Firefox. Source

Not my first new tab Chrome extension, but the first one uploaded to the Chrome webstore. Made in the course of a couple of weeks during other projects.

white text on a grey background
blue text on a white background, with seconds
white text on an image background
white text on an image background

Help

How to change the background?

To set a solid background color, you can use either color hex codes or named colors (such as “red”, “blue”, “goldenrod”, etc)

If you want to use an image, enter the URL of the image in the text box, such as https://nathanwentworth.co/assets/img/photos/2013-06-20+17.48.18.jpg

How to change the text color?

Much like the above background, you can change the text color using hex codes or color names.

How to change the font?

The font can be loaded in via Google fonts. This is done by entering a name of a font, and a font weight. For example, if you wanted to load in “Rubik bold”, you’d type “Rubik:500”. You can see font weights by:

  1. Finding a font on Google fonts
  2. Going on that font’s page, and selecting “Select This Font” in the top right
  3. Clicking in the “1 Family Selected” box that appears once you’ve selected a font
  4. Clicking “Customize” will show you the available font weights, and their numbers, such as “light 300”, “regular 400”, “bold 700”, etc.
  5. Enter the font’s name (Rubik, Roboto, etc), and weight number, such as “Roboto:400” in the time tab font text box
  6. You should also be able to enter a font name without the :###, like “Rubik”, and it will just load the default weight