Learning About Chrome Extensions
This past summer I have been trying to become a more well-rounded programmer. Whether that’s practicing Leetcode problems, learning touch typing, or doing some more reading - one of the largest lapses in my knowledge was in web development. Sure, I knew the basics, but I hadn't really looked too much into it. So, like any aspiring web developer, I searched online for what I could learn next.
I eventually stumbled upon React, then TailwindCSS, and finally ended up jumping headfirst into learning NextJS. I did the blog website tutorial on the NextJS website and read through some of the React documentation to get a feeling of what was expected. I then started to work on this website, but in the end, an obvious realization came to mind; I had to become better with regular JavaScript.
Going back to being a more well-rounded programmer, another change I made to my routine was working with a calendar to manage my time. For me, Google Calendar works best and is a great resource for time management, but there was one problem with the interface that I did not like, and that was, it had no dark mode option. I looked around for various ways to change this such as changing the Chrome flags, or downloading some Chrome extensions, but in the end, there was nothing that I really liked - nothing that was dedicated to this problem. And then it hit me, I could practice basic web development by creating my own dark-mode Chrome extension.
There are many types of tools you can build as Chrome extensions, like productivity widgets, or themes. It is also surprisingly easy to get started, all you need is a manifest.json file that stores your Chrome extension’s information and that’s it. From there, you can branch out to making scripts, pop-ups, or event handlers that can utilize Chrome APIs.
To create the first version of my Calendar Dark Mode Chrome extension, I just had a simple script that would inject a custom stylesheet that I had made into the page.
```js
function injectDarkModeStylesheet() {
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = chrome.runtime.getURL("darkmode.css");
const head = document.head || document.getElementsByTagName("head")[0];
if (head) {
head.appendChild(link);
}
}
```
This simple function worked great, but if I wanted to add more features like customizability and an option to change between modes, I knew that I was going to have to take that next step and set up a more scalable project. I looked around for various boilerplate templates as a new starting point but I felt that a whole React project would be a little overkill for what I was trying to achieve.
I ended up going with a standard vanilla JavaScript Vite project and just placed my previous files in the public folder. From here, it was very easy to make the new additions I wanted, especially now that I had TailwindCSS to help with styling my new popup for the dashboard. After a couple of days of learning more about Chrome storage and JavaScript event handling, I created version two of Calendar Dark Mode.
_The version 2 dashboard_
In the end, creating this Chrome Extension taught me a lot about JavaScript, the Chrome API and just debugging in the browser itself. Looking back, the only thing I would change would be to just use some premade Tailwind components sooner. Sometimes you just get stuck in trying to design the front end and it just takes up more time than it needs to.
If you are new to web development and want to practice some of your skills in a new way, I would recommend building a Chrome Extension. For ideas on what to build, try and find something _(big or small)_ that is an inconvenience to you on the web, and create the solution. This whole project began from not liking the Google Calendar UI and wanting to change it.
If you want to check out some of the resources I used, here they are:
- [The Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)
- [The Chrome API documentation](https://developer.chrome.com/docs/extensions/mv3/)
- [Vite starting guild](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
- [TailwindCSS](https://tailwindcss.com/)
- [Free components for TailwindCSS](https://flowbite.com/blocks/)
If you would like to check out the project, you can find that [here.](https://chrome.google.com/webstore/detail/calendar-dark-mode/djohocjcheabcpjfaokeancojipglfbe)
Thank you for your time and have a good one.