How to create custom google chrome theme

A Google Chrome theme is nothing but an extension that does not contain any JavaScript or HTML code. It is a combination of .json manifest file and few images. Want to customize your google chrome to install theme. You can also create your own custom chrome theme to promote your brand.

Create .json the manifest file

Create your google chrome .json manifest file using below code sniptas OR download A basic manifest which works well downloaded from click here.


Create a manifest.json file and copy paste below code. In the below you need to define your theme name like “My First Theme”, theme background image, frame images and etc. as per your requirement. You can also customize below code according to your need.


More Explanation

version: One to four dot-separated integers identifying the version of this theme.

name: A short, plain text string (no more than 45 characters) that identifies the theme.

description: A description text for your theme.

images: Image resources for this theme. For example, "theme_ntp_background" uses to specify the background of the new tab pane.

colors: Colors are in RGB format, which is used to specify the color of the bookmark text, frame, etc.

tints: You can specify tints to be applied to parts of the UI such as buttons, the frame, and the background tab.

properties: this field lets you specify properties such as background alignment, background repeat.


1) What kind of images can I use?
We recently support both png and jpg images. png images are recommended.
2) What is the recommended size for each image?
– theme_frame: ∞ x 30px
– theme_toolbar: ∞ x 120px
– theme_tab_background: ∞ x 65px
– theme_ntp_background: Recommended Minimum Size for images 800 x 600px
– theme_frame_overlay: 1100 x 40px
– theme_button_background: 30 x 30px

Now save this file as manifest.json and put images folder name images see the screenshot below. Still if you have any questions or doubts share your views in the comment section.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Recommended Posts:

Article Tags: , , , ,