Learn to Create and Publish
Your own Browser Theme

example Screenshot how to create a browser theme
This is how the Final theme will look

Introduction

The process to create a browser theme is very simple and can be done by anyone. And the best thing is creating a browser theme does not require any coding skills. You can create your own browser them by using the theme builders or by writing a few lines of English. Moreover, you can create and use these themes in any chromium based browsers( i.e. Google Chrome, Edge, FireFox, etc. ).
Anyways, I have explained both the processes to create a browser theme and also an additional method.

What is a Theme?

A browser theme is a file which defines how different parts of your browser looks and feels (i.e. color and background-image). This file is saved in a format know as .crx which browsers understand and use.
In other words, A theme is a special kind of extension that changes the way the browser looks. Themes do not contain any HTML, CSS or JavaScript file but contains only a JSON manifest file ( and images, if used ).

How To Create a Browser Theme?

You can create a browser them in two methods,

  1. Using an existing Theme builder, such as ThemeBeta
  2. Or by creating the theme JSON ( manifest.json ) file yourself.

In this post I have explained how to use both the methods to create your own browser them. Check the steps below


Tutorial: Create a Browser Theme

Method 1: Use Theme Builder

There are many chrome theme builders available in the market, however I like ThemeBeta because it is very easy to use has interactive explanation. Use this link to access ThemeBeta theme builder.

Steps to create a theme using ThemeBeta

  1. Open the link and click 4 buttons ( as simple as that ). For better understanding follow the image below.
create a browser theme in ThemeBeta
Cons:
You have limited control over the theme appearance. If you want to design the theme at a more granular level then use the second method.

Method 2: Create a Manifest.json File

A manifest.json file contains all the information related to the theme. You can set different images and colors by setting different parameters. Moreover, the manifest.json file can be packaged and uploaded to google chrome webstore if you wish to publish it to the world.

A manifest.json file looks as below,

{
 
version“: “2.6”,
 
name“: “camo theme”,
 
theme“: {
   
images” : {
     
theme_frame” : “images/theme_frame_camo.png”,
     
theme_frame_overlay” : “images/theme_frame_stripe.png”,
     
theme_toolbar” : “images/theme_toolbar_camo.png”,
     
theme_ntp_background” : “images/theme_ntp_background_norepeat.png”,
     
theme_ntp_attribution” : “images/attribution.png”
    },
   
colors” : {
     
frame” : [71, 105, 91],
     
toolbar” : [207, 221, 192],
     
ntp_text” : [20, 40, 0],
     
ntp_link” : [36, 70, 0],
     
ntp_section” : [207, 221, 192],
     
button_background” : [255, 255, 255]
    },
   
tints” : {
     
buttons” : [0.33, 0.5, 0.47]
    },
   
properties” : {
     
ntp_background_alignment” : “bottom”
    }
  }

 

As you can see, it has some definition for colors and images, however it is just a sample and has only few attributes, there are many more properties/attributes available. If you want to know more about these attributes, check this Google document.

However, for my use case, I have removed all the images except the background image. And also I have used different color codes to make it look better. Download the code files which I have used using the below link.

How to Apply the Theme?

To apply the theme

  1. Extract the downloaded file
  2. Open the extensions page of your browser, then enable developer mode.
  3. Click on Load Unpacked and choose the entire extracted folder.
  4. Wait for few seconds and the new theme should be applied
open extensions to apply a new browser theme
enable developer mode in edge
load unpacked, steps to create a theme

Finished, that’s all the steps required to create and apply your own browser theme. However this tutorial is fairly simple and you can customize it and design it more beautifully. To learn how to create better browser themes check the official google documentation using this link.

Publish your Theme

Also if you would like to publish this theme to the world then you need to create a google chrome developer account which has a one time charge ($5), post that you can publish as many themes as you want. To learn more, check this document.

Thank you for reading and I hope this document has helped you to understand what a browser theme is and how to create one. If would like, please help us by buying something using the below amazon links.

Please Help us Grow!

I hope you have found this article helpful. If you are happy with the document, please use the below links when you buy something from Amazon to help us grow.

How this works?

Amazon affiliate program gives a small (%)share of price to the referrers, so feel free to buy anything.
Below are some Amazon affiliate links, if you open amazon application/website using these links and buy something, (it can be one of the below items or anything of your choice) Then Amazon will give us a little percentage(%) of the money you spend on Amazon. To know more check this document.

Amazon Affiliate Links

$350-Best Student laptop
Amazon In, Amazon US

$600-Work laptop
Amazon In, Amazon US

$989– High performance
Amazon In, Amazon US

Headset – $15.99
Amazon In, Amazon US

Lightspeed Mouse – $39
Amazon In, Amazon US

Keyboard – $29
Amazon In, Amazon US

The Psychology of Money
Amazon In, Amazon

Atomic Habits:
Amazon In, Amazon

Find Balance and Purpose in Life
Amazon In, Amazon

$30, Smart Watch for Smart you
Amazon In, Amazon US, Amazon UK

Work comfortably with $110
Amazon In, Amazon US, Amazon UK

Exercise at home
Amazon In, Amazon US, Amazon UK

More Ways to Help

Thank you
For your Contribution

newbietechie.com
Author @ramizmollahmd

2 thoughts on “Create and Publish a Custom Browser Theme – 2 Simple Methods”

  1. Pingback: Unity 3D Game Developer Interview Questions & Answers - NewbieTechie

  2. Pingback: Create a SharePoint site using REST API [Tutorial & Example]

Leave a Comment