One of the good thing about Chrome is it allows you to customize its appearance by using themes and add new features to it using custom extensions. The Chrome Web store is filled with lots and different types of extensions, you can also create your own extension and upload it to the Web store.
Themes are a type of an extension, which doesn’t contain JavaScript or HTML files. It has a manifest JSON file which contains all information about an extension and few images. It does not totally change the whole interface, instead, it defines how its interface looks.
If you are using a theme on your Chrome browser by downloading and installing it, sometimes you may want to convert your favorite wallpaper to a theme.
In this tutorial, we will create a new custom theme, which has a manifest JSON file and collection of images. And learn how to set in Browser.
Contents
Let’s start
We first start with by creating a new Folder name it Custom theme within this create another folder images, this contains all images which use in the theme.
And also create a manifest.json file this contain information about the theme.
manifest
This file contains all information about the theme, every extension must have manifest.json file.
Completed Code
{
"manifest_version": 2,
"version": "1.0",
"name": "Custom theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_frame_overlay" : "images/frame_overlay.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.jpeg",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/ntp_attribution.png"
},
"colors" : {
"frame" : [148,0,211],
"toolbar" : [255,165,0],
"ntp_text" : [0,204, 204],
"ntp_link" : [255, 51, 51],
"ntp_section" : [255, 255, 51],
"button_background" : [0, 255, 128]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "center"
}
}
}
Manifest contains various properties, I will try to explain them in short –
- Name – Enter the name of your theme.
- theme – This property contains the customization information, and It is divided into 4 more properties within it – images, colors, tints, and properties.
images
- frame – The image shown in the background of minimize,maximize and close button area.
- frame_overlay – This is also shown in top bar but it does not display as the background of tabs.
- toolbar – Image show in the background of toolbar where URL address, backward, forward, and refresh are available. It is also shown in active tab background.
- ntp_background – This image you see when you open a new tab.
- ntp_attribution – This image is used to display the user, who is created this theme. This is show at the bottom right of the new tab.
colors
- toolbar – This change the color of bookmark and download toolbar.
- ntp_text – Set font color of new tab Chrome window.
- ntp_section – The change of this property you see when you hover frequently used websites in new tab window.
- button_background – Change color of minimize, maximize and close button of the browser.
tints
It generally customizes the Browser buttons. It is the combination of Hue-Saturation-Lightness (HSL). It takes floating point number in 0, -1.0 and 1 range.
This lets you customize the background image for e.g, aligning image to the top,bottom, and center, repeating image.
Everything setup now its time to apply it in Chrome and check how its looks.
Install and Preview
After creating the theme we need to test it is working or not. For this, we need to load the extension to the Browser. You can either directly go to extensions page by chrome://extensions/ URL or navigate to Chrome settings and select Extensions options.
Here, checked the developer mode if it is not then, you see 3 more option added. Click on Load unpacked extension and browse your theme folder and click ok button.
If theme uploaded successfully you will see direct changes within your browser, for confirming add a new tab you will see your added background image in the window.
Conclusion
From this tutorial, you get an idea about How you can create your own Theme for your Chrome Browser, which doesn’t contain any JavaScript or HTML files.
You can also create your theme using extensions, you can find it on Chome web store which makes your theme creation more easy and fast.
There are some extensions are –
Theme Creator, chromethememaker , My Chrome theme, etc.
