Published my first browser extension!
Tags: webdev, opensource, javascript, github
Published: 2021-04-01 12:43:57

TL;DR - I created `Better GitHub` for Chrome initially and made a post about it [here](https://dev.to/ceoshikhar/enhance-your-code-reading-experience-on-github-with-this-chrome-extension-24ei) few days ago. It got a really good response from the other developers out here and many of them wanted this extension to support Firefox as well. One even mentioned that publishing on Firefox is free unlike Chrome web store. So I made changes to support Firefox and even published it!

[Download it for Firefox](https://addons.mozilla.org/en-US/firefox/addon/bettergithub), leave a rating if you download it. I would really appreciate it.
[GitHub Repository](https://github.com/ceoshikhar/better-github), a star is really appreciated 😀

# Demo
<img src="https://github.com/ceoshikhar/better-github/blob/main/assets/demo.gif?raw=true" />

# Intro
As mentioned in the earlier post, this extension was purely just to solve my niche problem. The response on that post was very unexpected. Everyone was so motivating and supportive. The fact that some of them even asked for it to be available for Firefox was unbelievable. This meant that someone out there, wanted to get their hands on Better GitHub, something that I created. That feeling is just something else. I am sure a lot of open source developers can relate to this. 

# First thing first
So I decided that I **had** to get this extension to support Firefox. That was my initial goal, just support Firefox. So I went to my [friend](https://www.google.com/) and asked for his help on how I can port my Chrome extension to Firefox. 

The answer was not something I was expecting. I was expecting that I will have to refactor most of the logic to `core` and then have specific implementation for Chrome API and Firefox API. But instead, I learned that Firefox Addons(extension) support almost most of the API provided by `chrome` API. That meant, I didn't have to change almost anything to the logic implementation of the extension[(better-github.js)](https://github.com/ceoshikhar/better-github/blob/main/better-github.js). Except a very minor issue which was just a one line change.

The major thing needed to be done to "port" the extension from Chrome to Firefox was the change to be done to `manifest.json`. For Firefox, an addition property was needed: "applications" to provide little extra details for the addon like the addon ID.

# The manifest.json dilemma
As mentioned above, Firefox manifest requires an extra property. That means, I have to keep two separate `manifest.json` but with the same name. Hmmm, weird. Also, to publish the addon to Firefox or even test it locally, I had to package the extension as a `.zip` and then load it, with off course the right `manifest.json`. Doing it manually was very painful. Edit the `manifest.json`, select all the required files( including assets ) and  package it to `zip` every time I made a small change to the code. 

So as a developer, I wanted to automate this shit, and I did. I wrote [script.js](https://github.com/ceoshikhar/better-github/blob/main/script.js) to automate the process to generate the correct `manifest.json` for Chrome / Firefox and package the extension files to `better-github.zip` with the correct manifest.

Now all I have to do is run `yarn firefox:package` and it generate the manifest for it, package everything to zip, delete the manifest as it's not required anymore. The stuff that took me 30s to do now takes less than 0.5s. Although it took me just over 3 hours to write the script. But hey, it's always worth it to automate shit, right? *wink wink*

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0pyud628hqswia56ovy.png)