TL;DR - I created Better GitHub for Chrome initially and made a post about it here 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, leave a rating if you download it. I would really appreciate it.
GitHub Repository, a star is really appreciated 😀
Demo
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 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). 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 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
Top comments (9)
Nice brother i'm interested how to make such extensions?
That's a very broad question my friend. You can start from here and it should give you a basic foundation. Hit me up with specific questions so that I can be more precise on helping. Good luck.
Cool 😙
@ceoshikhar , thank you for publishing to the Firefox add-ons store.
Just enjoying the experience.
You saying this, makes it all worth it. I am glad I could be of help.
What kind of language u use to make these extensions?
With as much experience and knowledge I have about browser extension development, you create them using JavaScript/TypeScript.
Although I am a fan of TypeScript and have been using it almost everywhere for past couple of months, I used JavaScript for this project as it was really small and I didn't want to overcomplicate it as this is my first time building a browser extension.
I might rewrite the extension in TypeScript in the future.
Cool man. It's great. I hope I will be able to build such cool stuff in the future 😄
Anytime. Thanks for the kind words. Truth be told, this extension is very basic. Like literally at the core, the logic of this extension is like 10 lines of code. You will be building better stuff than this. Go get it!
Star the GitHub repo if you haven't, I would really appreciate that.