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
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"
}
}
}
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.
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.
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)
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
Crazy right?
I also always thought it was complicated, but really easy, especially if you use the demo website π€―
Exactly what I was looking for! Wanted to create my own theme for a while now! Great article, very detailed and good explained. π―
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 π