Development of Cross-browser Extensions using ES6 and BabelJS

Last few months we were working on our donation/funding service (Tips) that gives anyone the possibility to thank individual contributors of biggest IT communities such as Stack Overflow, Github and Gitter by sending small money rewards. Here is how it’s supposed to work:

Somewhere on Gitter or Stackoverflow  

As the part of the service, we developed a browser extension for 3 browsers — Google Chrome, Firefox and Opera. In this post I would like to share what we’ve learned.

Disclaimer: this post is not about some cool framework that allows you to write all of your code once and have it run in all major browsers. Rather this blog post is about organizing your project so that you can re-use as much code as possible. Still some browser-specific coding is required.

The idea

We wanted to provide a way to send gratuities on biggest IT communities and after some discussions we came up with an idea, that a browser extension will be the best tool for this purpose as it allows us to work with 3rd party website’s DOM, change CSS, make AJAX requests and it’s very easy to install one through the browser’s extension store. Well, the latter is rather a big disadvantage than a plus. But we thought that if people like the idea they won’t mind installing a tiny browser extension.

How does the extension work?

Every time when user opens one of the supported websites (meaning GitHub, Stack Overflow or Gitter) or changes the page inside of that website, the extension should display small unobtrusive leave a tip button which leads to a payment page for all users how are able to receive tips (members of our service). Also the browser extension should display small icon in the address bar when it’s active so that the user is able to click on that icon to highlight all leave a tip buttons on a page.

#es6 #browser-extensions #babeljs