DEV Community

Cover image for Browser extensions - our first theme
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Browser extensions - our first theme

In the previous article, we looked at creating our very first browser extension.

For this article, we'll be looking into making our very first theme as an extension!

The process will be very similar but easier.

The structure

As mentioned, the structure for a theme is easier.
We can use a manifest.json and additionally add some images.

Start by creating a new folder.

mkdir theme-extension && cd theme-extension
Enter fullscreen mode Exit fullscreen mode

Then you can go ahead and add the manifest.json file.

I'll paste the full version of my manifest, and then we'll go into more detail on each option.

{
  "manifest_version": 3,
  "version": "2.6",
  "name": "daily dev tips theme",
  "theme": {
    "images": {
      "theme_frame": "images/frame-background.png",
      "theme_frame_overlay": "images/frame-background.png",
      "theme_tab_background": "images/tab-background.png",
      "theme_ntp_background" : "images/ntp-background.png"
    },
    "colors" : {
      "toolbar" : [0, 185, 232],
      "tab_background_text": [255, 255, 255],
      "tab_text": [255, 255, 255],
      "bookmark_text": [255,255,255],
      "ntp_text" : [218, 0, 96],
      "ntp_link" : [218, 0, 96],
      "ntp_section" : [255, 255, 255],
      "ntp_background": [255, 255, 255]
    },
    "tints" : {
      "buttons" : [1, 1, 1]
    },
    "properties" : {
      "ntp_logo_alternate": 0,
      "ntp_background_alignment" : "center"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Alright, let's go ahead and analyze each option.
First, it's good to note that the color options are in RGB format.

I've added this color reference image, so people can visualize what each option affects.

Theme options explained

Images:

  • theme_frame: We can't set a color for the outer frame, but you can pick a 1x1 pixel image.
  • theme_frame_overlay: It's the left top corner. I went for the same as the frame.
  • theme_tab_background: This indicates the non-active tabs; again, we have to use an image to color these.
  • theme_ntp_background: The actual center bit of the screen.

Colors:

  • toolbar: The color of the bookmark element on the new tab (bottom left corner)
  • tab_background_text: Color of the text of the background tabs
  • tab_text: Color of the active tab
  • bookmark_text: Color of the bookmarked items
  • ntp_text: Color of the center frame text
  • ntp_link: Color of links inside the center frame
  • ntp_section: Color of the quick links in the center section
  • ntp_background: Background of the new tab page

Tints:

  • buttons: The tint color for the icons inside the toolbar (back, refresh, etc.)

Properties:

  • ntp_logo_alternate: Which logo to show, 0 is the colorful Google logo and 1 is the white Google logo
  • ntp_background_alignment: If you added an NTP image, you can adjust the position

You can style many more small elements, and I found the following GitHub repo to be super helpful.

Testing your extension

We don't want to publish to the stores without testing our extension, so let's see what it takes to try it locally.

I prefer to use Chrome as it has a quicker interface for it.

In Chrome, click the plugins button and open up that page.

Chrome extension overview

Next, toggle the developer mode on. You'll get another menu where you get the option to load unpacked extensions.

Click the load unpacked and navigate to the theme-extension folder.

Chrome will notify you that your theme is now active, and you should immediately see the colors in effect.

I also added my daily dev tips theme to GitHub. You can download it and install it via developer mode in Chrome.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (4)

Collapse
 
lukeecart profile image
Luke Cartwright

Wow! I'm intrigued. I didn't realise setting up a chrome extension was setup like this.

I'll have to play around with this! Thank you for sharing

Collapse
 
dailydevtips1 profile image
Chris Bongers

Crazy right?

I also always thought it was complicated, but really easy, especially if you use the demo website 🀯

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Exactly what I was looking for! Wanted to create my own theme for a while now! Great article, very detailed and good explained. πŸ’―

Collapse
 
dailydevtips1 profile image
Chris Bongers

I was actually super surprised how easy it was πŸ˜…
Dreaded it for a long time, but loving my own custom theme that fits my website πŸ’–