How To: Developing My First Chrome Extension
First of all, to make things clear, I am no expert in designing nor developing the front-end part of my projects so if you find “improvable” code in this guide, don’t freak out. But this was also part of the reason why I decided to develop this simple Chrome extension. Whenever I decide to start a personal project, I always struggle with finding the right designs, the right fonts and the right color-scheme, it is just not my thing. And I end up spending way too much time in this part of the process so I can starting mocking how my app would look like at the end.
On the other hand, Chrome extensions have always amazed me and made me think outside of the traditional side-hustle ideas for programmers, as it is a market that I am willing to explore more as there are an estimate of 2.65 billion Chrome users globally.
The Idea 💡
As I mentioned, I am not too good with frontend nor design stuff and one of my pain-points starting a project is choosing the right color scheme or the right font. So what this extension is going to do, is to show you the most used font colors, background colors and font families of the website that you are visiting.
Therefore, if I want some inspiration for choosing styles from popular websites, you would just need to visit the website and then check in the extension what were the colors/fonts used in it.
A Bit Of Investigation Before Starting…
So before starting, I needed to know a bit about the key files of a Chrome extension. I will list and try to explain (at least how I understood them):
manifest.json
It is the chore file of every extension and it is required, and it tells Chrome how to run and manage your extension.
The manifest file contains important information about your extension, such as its name, description, version number, and what files it needs to access. It also specifies what permissions your extension requires, such as the ability to access your browsing history or your bookmarks.
In addition, the manifest file can define things like the icons that will appear for your extension, the background script that will run in the background when your extension is installed, and any content scripts that will run on specific web pages.
On a note, the version that it is currently used is 3 for the manifest_version.
popup.html
It is essentially the HTML file that defines the user interface for your extension’s popup window.
When a user clicks on your extension’s icon, a small popup window appears that displays information or functionality related to your extension. This popup window is created using the popup.html file.
In our case, our HTML file is going to display three rows where we will be displaying the font colors, the backgrounds and the font families. For our case, we will just show the three most-used ones of each category.
popup.css
It goes along with the popup.html and it defines the styles of your extension. It is going to be the one styling your HTML code and making your extension shine. Flexbox all the way…
popup.js
It is the JS logic that you want to run on your extension and it supports the two files mentioned above.
Here, something to recall is that it does not have access to the active’s tab DOM, it can only access the one from the popup.html file. It can seem obvious, but it was something I realized along the way.
content.js
They are called “content scripts”, and they are JS files that run in the context of a specific web page, and are used to manipulate the page’s HTML, CSS, and JavaScript. Other characteristic of these files, and the reason why we need this file is that it can interact with other parts of your Chrome extension, such as the background script or the popup window.
icons/
This is the folder in which we will store all the icons (with the different sizes) of your extension. This icon is the one that is displayed in the bar of your browser.
… and many other files
There exists more kinds of files when developing a Chrome extension but I wanted to focus on the ones used for this guide. If you want to know more about these other files (i.e. background files, …) I recommend you to visit the documentation from the guys at Google
Time to Code 🧑💻
I tried to sketch what the flow is going to look like in our extension, but as my drawing sucks, I will explain in my own words.
Basically, when a new page is rendered (event will be listened by the popup.js file) we need to call the content script (content.js) in order to scrape the tab’s page DOM and sort by most-used the three categories: font families, background colors and font colors. Once it has been scraped and we have this information, we have to send it back to the popup.js file who is going to be in charge of painting this data in the popup.
So, let’s explain how our popup.js file will look like:
At the bottom of the file, as mentioned, we will start listening for when the event of when the DOM is loaded using the DOMContentLoaded event. We then query the active tab in which the user is in, and we call the function injectContentScript which is self-explanatory. With those results we will just alter the popup’s DOM by adding the results in the corresponding HTML elements.
Now, let’s see more into detail what the content.js file is doing:
The process consists on:
- Read all element styles from the main frame of the page DOM
- Map the three attributes that we care about, and convert the color codes (which are inputted in RGB or RGBA) into hexadecimal color codes with custom helper functions.
- Sort them out by number of occurrences discarding both black and white colors (as I don’t think are useful for our purpose).
- Return the result as an object with the three arrays.
This is what the folder structure would end up looking like…
Conclusion
All in all, it was a good and fun tiny project to do on a Sunday. I think that there is still much to learn from and improve as I haven’t dived too much into file communication nor publishing the extension, but it was a good first contact with this area.
Again, I am not an expert and this was just a way to playaround and learn something new :)
🙌 🙌 🙌 Thank you for reading this far!
You can find the full code here.
