Intro

In this article, I will tell you the story of how I came across a trivial development tooling problem, how I build a simple tool that solved this problem for me and the process I followed to publish this tool for others.

The problem

As a web developer that really suck at design, I am often inspiring myself from other websites designs that I find beautiful.
Most of the time I have to use the dev tools to inspect CSS to fin witch color code and/or font is used on the websites that pleased me.

In the past, I used Browser extension that tells you the color code of the element you'll be pointing at.

These two methods are pretty handy if you want the colors used on a page one at time.

But what if you wanted all the color palette and/or all the fonts that are used on a page. After a quick unsuccessful research, I decided to build that tool myself.

The solution

basic functionality

As I told you earlier, I am web developer so the most obvious choice for me was a Browser extension.

Now that the platform was chosen, I had to find the programmatic solution to solve my problem. After some googling around I found a javascript function that did exactly what i wanted:

getComputedStyle(elem)

With the result of this function I could access any css property I wanted such as color, backgrounColor, font-family \o/

Now all I had to do to get all the colors of all the elements was to loop over all the elements in the page and store the properties I was interested in.

The product

Now that I had solved the basic part of my tool. I had to find how to bundle this into a Browser Extension. Luckily now Chrome and Firefox extension share almost the same architecture for their extension. So building for these two platforms was really simple.

But first things first, How to build a browser extension ?

The recipe is pretty simple.

1. Create a manifest.json file This file has to look something like the following

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {
    "96": "icon_96.png",
    "128": "icon_128.png"
  },
  // We want to access the active tab and to write css variables to the clipboard
  "permissions": ["activeTab", "clipboardWrite"],
  "browser_action": {
      "default_icon": {                   
           "96": "icon_96.png",
           "128": "icon_128.png"
       },
       "default_title": "My custom tooltip",      // optional; shown in tooltip
       "default_popup": "popup.html"  // The html page that will contain the extension popup
  },
  "content_scripts": [ // the content that will be injected in all the page that matches the "matches" directives
   {
     "matches": ["<all_urls>"],
     "css": ["myStyles.css"], // optional
     "js": ["contentScript.js"]
   }
 ],
}

After creating a manifest.json file looks like the one above

1. Create the following files that will contain the business part of your extension:

• contentScript.js: The js file that will be injected in every page and that contains the function that extracts all colors and fonts using getComputedStyle() function
• popup.html: the extension popup content
• popup.js: The js that will be loaded in the popup.html file and that will trigger the actions to retrieve contentScript.js functions results.

1. Testing In order to play around with your extension during development you have to load it locally using one of these methods.

If you use Google Chrome:

• Open the Extension Management page by navigating to chrome://extensions.
• The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
• Enable Developer Mode by clicking the toggle switch next to Developer mode.
• Click the LOAD UNPACKED button and select the extension directory. Load Extension

If you use Mozilla Firefox:

• open Firefox
• enter “about:debugging” in the URL bar
• click “This Firefox”
• click “Load Temporary Add-on”
• open the extension’s directory and select any file inside the extension. The extension installs and remains installed until you remove it or restart Firefox.

And that's it! You can now use, test and debug your web extension.

When everything works as intended, It finally time to publish it for others to use.

Publishing

The are two main extensions store where can publish your web extension

• The Chrome Webstore: There is a one time fee of 5$ to be able to submit web extension.

• Add-on Developer Hub: It's free to sign-up and submit

After submitting my extension on both store, I am very glad that it has already been approved within an hour on the Mozilla add-on platform but it's still under review on the Chrome Webstore.

Thank for reading me! I hope you found this article interesting.

For those of you that are interested in using my extension here are the links:

• Colors and Fonts Extractor for Firefox
• Colors and Fonts Extractor for Chrome

Any feedback will be more than welcome!

(Edit)
June 2, 2020: Added the Chrome Web Store link