How to Create Your Own Theme on Chrome

How to Make Your Own Google Chrome Theme

Designing your Google Chrome theme

Creating a Google Chrome theme is actually a relatively easy process; in fact you'll probably be surprised at how easy it is. Before we can get going though, you need to familiarise yourself with the limitations of theme creation. You should spend a little time going through this community-written Google Chrome theme reference.

Once you have an understanding of what options are available to you, the next step is to create your design. If you're going to be using Adobe Photoshop, there's a handy little file you can download here that contains various layers which will help you get going.

In this particular example, we'll be featuring an illustration by Dean Oakley. Here's the image mockup of the theme I envision:

Coding your theme

Now that we have the design sorted we can start turning it into a functional theme.

Start by creating the root folder, which you can name after your theme. Within this folder create a subfolder to hold your images. It's conventional to call it images or img, but you can pretty much call it anything you want. Now create a file manifest.json within the root folder. This is the file in which you declare your customisations.

Once you've done that you should end up with the a file structure similar to the following:

We can now start defining the various elements within Google Chrome to make it look the way we want via the manifest.json. If you have experience coding with CSS, this will come very naturally to you. What we'll do is define some custom colours, and set a few background images. The main background images will be aligned to the bottom center, and repeated on the x-axis. This concept is shown in the image below:

Other than that, we'll be setting custom colours. Something to note about Google Chrome themes is that everything is defined in terms of RGB(A) rather than hex values. For example a brown colour at 50% opacity would be [ 180, 90, 45, 50 ].

After setting the background images and colours, your manifest.json should look something along the lines of this:

[code]
{
"name": "bird theme",
"theme": {
"colors": {
"frame": [ 103, 121, 64 ],
"ntp_background" : [ 198, 210, 186 ],
"ntp_link": [ 255, 255, 255 ],
"ntp_section": [ 103, 121, 64 ],
"ntp_text": [ 103, 121, 64 ],
"toolbar": [ 222, 229, 215 ]
},
"images": {
"theme_frame": "images/theme_frame_camo.png",
"theme_ntp_background": "images/theme_ntp_background.png",
"theme_toolbar": "images/theme_toolbar_camo.png"
},
"tints": {
"buttons": [ 0.3, 0.5, 0.5 ]
},
"properties": {
"ntp_background_alignment": "center bottom",
"ntp_background_repeat": "repeat-x"
}
},
"version": "1.0"
}
[/code]

Packing your Google Chrome theme

Now that you have created your manifest.json and images, it's time to pack it. This can easily be done inside Google Chrome by following these simple steps:

1. Open Google Chrome.
2. Open the Extensions Manager. You can do this by either typing in chrome://extensions into the URL bar, or clicking on the Spanner » Preferences » Extensions.
3. Tick the checkbox next to Developer mode.
4. Click on "Pack extension" in the bar that appears.
5. For the "Extension root directory", browse and select the folder that contains your manifest.json
6. Leave the "Private key file" field empty.
7. Click on "Pack Extension".
8. Done!

After packing your extension you will end up with 2 files, a .crx file and a .pem file. The .crx file is the packed extension that can be installed, whereas the .pem file contains the private key. Make sure you keep the .pem file in a safe place as you will need it later if you want to either update the extension, or upload it to the Chrome Web Store.

How do you install a Google Chrome theme?

Installing your Google Chrome theme is very easy; just double click on the .crx file. You will then get a message informing you of the possible risks and asking if you would like to continue. Obviously as you're the one who created the theme you can go ahead and click "Continue".

And there you have it, your very own Google Chrome theme!

How to Create Your Own Theme on Chrome

Source: https://designbypelling.co.uk/how-to-make-your-own-google-chrome-theme/

Share :