How to Create A Custom Chrome Theme Tutorial

Instead of writing a lengthy blog post for this, I’ve created an in-depth video that outlines the process! Yay you!

Video Transcript

Alright, so unlike most videos I’m going to jump right into showing you how to create your own custom Chrome theme. If you’re in the extensions area, which you go to the little options here, more tools > extensions, you’ll end up on this screen here.

The first thing you’re going to want to do is flip on “developer mode”. This is going to allow you to have some features that we’re going to need in a little bit, once we pack everything up for our extension. So one of the first things I’m going to do is open up the Chrome Web Store. Because what I want to do is I want to find a theme that I can just quickly open and install that will allow me to find the necessary files to create my own custom theme.

I don’t particularly like this theme but whatever, here it is. I can click “Add to Chrome” but first what I’m going to do is show you where you’re going to go to find the necessary files. In my case, it’s C: > Users > [Your Name] > AppData > Local > Google > Chrome > User Data > Default > Extensions. This is where you’re going to find all of your extensions, some of which are themes, some of which are addons or apps.

What you’re going to do is install a theme. So let’s say this one here — “Add to Chrome”. Then you can see that it has installed this theme. Now, what you’ll notice here, if you sort by Date Modified, is the theme is going to be at the top. That’s what you’re going to do to easily find a theme file. It’s helpful to find a theme that is very close to one that you want to create but, of course, you can just create one essentially from scratch as well.

So I’m going to click into here and I’ll get a version folder and then you’ll have a few different files here. The main ones you need are “images” and “manifest.json”. “Manifest.json” contains all of the parameters [should be attributes] and colour codes and all of that kind of information for the theme and the images, of course, contain a couple of the images for the background of the theme and so on.

I would normally copy these into my own folder but I’ve already done that so I’m just going to open that folder here. So this “Custom Chrome Theme”. Now there are two files here that won’t be there initially, so I’m just going to delete them for now. If I go into the “images” folder here you’ll see that I took this originally from a “Wolf” theme so I’ve just packed the old images in this folder here but really these are the ones that I mostly care about — “tab background” and “toolbar background”. However, there are also the “theme frame” and the “background” here. So these two will provide an overall background, like an overall image background, if that’s what you’re looking for. In my case, I went with an all-colour background so I skipped those images and just did the tab background and toolbar theme here.

Once you’re in here you can switch these out, you can change the colours for the different toolbars. You can also use these “frame” and “background” images to provide an images for the background as well. The main thing you want to do is come back to the top-level folder and open up this “manifest.json”.

So the “manifest.json” will look like this. What you’ll see here is a number of pieces of information — the description, the key, a few things not to worry too much about — you can name it here by providing your name. This is where you get to the main parameters.

First of all, you have the colours — bookmark text, button background, frame — some of these I’m going to link to an article that actually takes you through these. So if I open this up here, there’s a couple of articles. There’s this “theme tutorial” — this one is a little old but it’s really good because it shows you each of the different positions of the colour elements and then it gives you a table with a description and the notation, which you can add into the JSON file.

Separately, Google Chrome has their own official theme documentation and it’s a little bit harder to use but it gives you some examples here and then below there’s a “colour”, “image”, “properties”, and “tints” section. If you click on, say, the colour table, what you’ll see is all of the different options available to you here. So “frame”, “frame inactive”, “frame incognito” etc. All of these are the different parameters that you can set to set your colours.

Again, you’re going to want to use this theme tutorial to help you understand what those colours are. So I’m not going to spend too much time on that, I’ll let you guys fiddle around with it but I’m just going to show you how to actually do it and then you can start customizing it yourself.

So in here, you set some of your colours that are in “rgb” format. So red, green, blue. You can see a lot of mine are the same. I’ve chosen dark grays, slates and stuff like that. My overall colour theme is this essentially white. Down in the images section — theme tab background and theme toolbar — these are the images I was showing you before, which are in this folder here. These are going to set some of the major colours across the interface. Properties, I’m not too worried about here, but if you have a background image that you want to repeat you can deal with some of the settings there. And then tints, which changes the colours of the different buttons like the back button, the refresh button and so on. You can set that to a black, you can set that to, in my case, a dark gray.

So once you’ve got the “manifest.json” file with all of the information that you want, the correct parameters, again, you’re going to want to play with this over and over — it’s pretty easy to repack. Then what you’re going to end up with is a folder like this. This is my custom chrome theme. I’ve got my “images” folder, it’s got my “manifest.json” with my new parameters that I’ve set. Then the process of bring it up is pretty simple.

Go to your extensions again. If you’ve enabled “Developer Mode” you’re going to click “Pack extension”. It’s going to ask you for a root directory and you’re going to browse to that root directory, in my case, “Custom Chrome Theme”. I’m going to hit “Ok” > “Pack extension”.

You get a little confirmation here that it created two files, you’re “crx” file and your “pem” file. What you want to do is double-click the “crx” file and it is going to ask if you want to open it — hit continue, and add it with “Add Theme”.

So this is the custom theme I created. It was based off of a “wolf” theme initially. Also, I used a really cool “Blue/Green” one that I really liked. So I’ve got this as this kind of white here. The toolbar and the search bar are the exact same colour and you can only see the toolbar when I hover over it. You get that little bit of a gray with a dark gray in the background.

So let’s say I did that and I don’t really like the look of it, I need to make some changes, that’s fine. All you’re going to do is delete the “.pem” file — so if I delete that it’s going to let me repack it. So I can come in here, make whatever changes to the JSON file that I want, save it out, pack extension again, browser to the folder, “Ok”, “pack extension”, “Ok” and then double-click the “crx” file again and you’ll see that it will add it.

It’s very easy to do and very quick to do. Again, the documentation will show you, if you want to add those images back in, the ones that I chose to take out, you’re just going to add them to this image section here. I only have these two in this main image folder, but you would have two like this in your main image folder as well named “theme_frame” and “theme_ntp_background” and you would throw them in here and just like to them by creating parameters for them in the JSON file. That documentation is available and I will post a link in the description.

That’s pretty much it. So hopefully you guys found that useful and relatively straight to the point. I tried looking for quite a while to find something that was simplistic but also gave me the information I needed and I couldn’t find it so hopefully this is going to do that for you guys.

Advertisements

​ Kijiji PayPal Scam – How it Works

You have undoubtedly heard countless horror stories of people using sites like Kijiji to sell their wares – being mugged, buying fake or stolen items, and the like. All of which are risks that can be avoided with due diligence and precaution. Instead, I want to take a moment to outline a very popular Kijiji PayPal scam. I’m sure this scam perpetuates itself on other platforms but it seems to be particularly common on Kijiji.

Continue reading “​ Kijiji PayPal Scam – How it Works”

What is 2-Factor Authentication & Why is it Important?

You may have heard the term before but if you are not a tech nerd there is just as good a chance that you have not — and that is truly a shame. With hacking on the rise and people’s entire lives residing on the internet, it is more important than ever to think about your digital security.

So what is 2-factor authentication?

Simply put, 2-factor authentication (two-factor autentication or 2FA) is the technology used to gain access to a site/service/app using more than just 1 method of authentication (the most common single method being a username/password). Instead, 2-factor authentication relies on both a username/password combo in conjunction with something that typically cannot be guessed or “hacked” remotely, such as a code sent to a user’s mobile phone or biometrics (fingerprint, iris scan etc.).

Continue reading “What is 2-Factor Authentication & Why is it Important?”

Google Maps’ New “Typical Traffic” Route Planning Feature

Google Maps has just introduced a new feature that I have been patiently awaiting for several years now — Route planning with typical traffic conditions!

Route planning allows you to plot a course between two points and not just with current traffic but with typical traffic for various times during the week and day. Previously, you could only see current traffic conditions, which was not very helpful if you were trying to plan your trip to the airport a week in advance.

Continue reading “Google Maps’ New “Typical Traffic” Route Planning Feature”

Do Allergy Shots Work? Is Immunotherapy Effective?

I have been unknowingly suffering from allergies for years. In the spring and fall I would suddenly become “sick” and nothing I did could get rid of it. It took years for me to discover that it was allergies, not a virus each time, because my allergy symptoms are identical to that of the flu (fatigue, sneezing, itchy throat etc.).

Eventually I figured that I may actually be suffering from allergies, and after taking allergy meds I started to feel much better. The only problem: allergy meds knock me out. Even non-drowsy options make me feel tired and weird. The solution: allergy shots (immonotherapy)!

Continue reading “Do Allergy Shots Work? Is Immunotherapy Effective?”

From an Ex-Telemarketer: How to Get Rid of Telemarketers

Telemarketers can be a pain in the ass (there is really no other way to put it) but responding in the wrong way can make the situation worse.

As an ex-telemarketer, I know first-hand what it is like to be on both sides of the call and trust me, telemarketing sucks for both parties involved. I worked for a small call centre in Cambridge called C.S.I. that specialized in collecting donations for charities like the New England Police Officers Safety Association. To this day I sincerely hope it was legitimate, though I now have my doubts (I was only 15 then).

So how do you get rid of telemarketers?

Firstly, Do Not Ignore Them

Telemarketing companies use automted phone dialers to call large swathes of “potential customers”. This means that if you think you can get away from them by not picking up the phone because they will “give up”, you are probably wrong. These phone systems “got time fo’ dat” and will keep calling back until you decide to answer your phone (they may eventually declare you unreachable but it isn’t worth all of the ringing).

Instead, pick up the phone, interrupt their speel to save time and tell them that you are absolutely not interested and ask them to take you off their call list. It helps to mention this in several ways such as “please remove me from your call list and add me, permanently, to your do not call list”.

You can always avoid unknown callers, but you will likely miss important calls from friends and family whose numbers are not familiar to you — something that I am personally not comfortable with.

Just picking up and saying you are busy or not interested will not work because either because systems like the one I used include a “not interested” button that can be pressed, which ensures that you will get a call back so that they can reconsider in the future.

Secondly, Hide Your Number!

Adding yourself to the National Do Not Call List is a good starter. This will certainly reduce the volume of calls, but telemarketers with special exemptions or rogue telemarketers will still target you.

Giving out your phone number for giveaways is a sure-fire way to end up on a list as well. Chances are they captured consent not just for themselves but to share your number with other parties as well.

I have been giving this advice for years, though I do not know if anyone is actually following it. Give it a try.

You can read more goodbye-telemarketer suggestions here.

_________

Learn Something New Subscribe

Best Free Tax Software Canada | Studio Tax Review

It’s about that time of year again — tax season. That means spending copious amounts of time collecting forms, stubs, and receipts to appease the good ol’ taxman.

To simplify things, I used to go to H&R Block. What I didn’t realize is that H&R Block provides little service over and above what you can do yourself with proper tax software. It made sense at the time — as a student their $29.99 rate is fairly reasonable. However, out of school their rate jumps to $59.99+ making it worthwhile to do it yourself.

The second thing I didn’t realize is how easy it is to do your own taxes. Even those with “more complicated” tax situations should find it quite easy with a program like Studio Tax.

Studio Tax is 100% free (no catches) for up to 20 returns, so unless you are the Duggar family, you shouldn’t come close to hitting the limit.

Studio Tax is the best free tax software in Canada that I was able to find. It is surprisingly robust and helps walk you through the tax-filing process; even asking you questions about yourself like a tax professional would. Based on your responses to those questions, it will automatically serve up the necessary tax forms. You can then choose additional forms that are applicable to you.

The forms are easy to follow — as easy as “painting by the numbers”. The best part about Studio Tax, however, is the easy way in which it makes the final file available for net filing. Once you have filled out your forms, Studio Tax will create a TAX file that can easily be uploaded directly to the CRA via Netfile. I am a huge fan of this approach because it means you deal with no paper (other than what you have received).

The only room for improvement for Studio Tax is the interface (see below), which is frankly atrocious. Doing your taxes is not supposed to be a fun experience, but an interface uplift is desperately needed nonetheless. Thankfully, its ease of use more than makes up for its poor interface.

Download Studio Tax (Free Canadian Tax Software)

Studio Tax Software Interface

_________

Learn Something New Subscribe