Writing a Template for Browser Extensions
Tags: extension, javascript, github, template
Published: 2020-05-23 07:30:27

> **TL;DR**: This is blog post is on how I ended up writing a GitHub template for creating browser extensions, with experience from other browser extension I've worked on, you can find it at https://github.com/notlmn/browser-extension-template/

---------

I started working on open-source software sometime around 2016, watching [Supercharged](https://www.youtube.com/playlist?list=PLNYkxOF6rcICCxAiogddzLoyL9Zedi3s5) (RIP) on YouTube and making little tweaks on their [repository](https://github.com/GoogleChromeLabs/ui-element-samples/), and also making a copy of [my own](https://github.com/ramlmn/ui-element-samples/). Man, those fun times.

And sometime around 2017, I found the now-famous browser extension [Refined GitHub](https://github.com/sindresorhus/refined-github/) by Sindre Sorhus, which by then was in it's initial stages, and I immediately fell in love with it 😍. So, I started contributing to it, suggesting changes, implementing features suggested by other users, editing documentation, or simply triaging issues. I mean that's how one gets into open-source, even small changes like [styling documentation could go a long way](https://www.youtube.com/watch?v=_iToM2KC0QE).

Later in 2018 I found out that [Notifier for GitHub](https://github.com/sindresorhus/notifier-for-github/issues/67) (_NfG_), another browser extension by Sindre, is [looking for maintainers](https://github.com/sindresorhus/notifier-for-github/issues/67). My prior experience on Refined GitHub (_RGH_) helped me become a maintainer on that project, which even though is not as active as Refined GitHub, has seen a lot of changes and features added over the years.

![Sindre looking for maintainers on Notifier for GitHub project](https://user-images.githubusercontent.com/37769974/82723558-5413fe00-9ced-11ea-878f-f421c020aee5.png)

And again, my contributions to these extensions led me to an invitation to become a collaborator on RGH. Even though my involvement on RGH has been a little hands-off, I was still contributing to it. And I really wanted NfG to be a lot more like RGH, in terms of  directory structure, dependencies, and automatic deployments to extension stores so that we have a structured setup for easily managing them. At this point, most of this was achieved by simple copy-pasting code between them, as they had many shared parts.

At the same point GitHub released a new feature called [template repositories](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/), which if you do not yet know is similar to forking a repository but the source and fork are loosely related and removes most of the other annoyances like allowing the clone to be made private.

![Template repositories on GitHub](https://github.blog/wp-content/uploads/2019/06/repository-template.gif?w=1024&resize=1024%2C512)

Anyway, with many people starting to create browser extensions and being made open-source, I really wanted something similar to [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/) but for creating browser extensions. Even though what I wanted to create was a entirely different, the new GitHub template feature helped spark the idea.

![browser-extension-template on GitHub](https://user-images.githubusercontent.com/37769974/82723929-0220a780-9cf0-11ea-81fa-c46b54379359.png)

And that's how I ended up creating [browser-extension-template](https://github.com/notlmn/browser-extension-template). The extension borrows a lot of best-practices, with tools and technologies required for building browser extensions including the following features.

- Included polyfill for cross-browser compatibility.
- Auto-syncing setup for syncing user options provided by browsers.
- Auto-publishing to extension stores using CRON jobs and weekly tagged releases.
- Extensive documentation on how to configure it (Webpack, css extraction, and even setting up Typescript).

The project also includes a sample browser extension that makes use of all of the features mentioned above.

> “This extension template is heavily inspired by `refined-github`, `notifier-for-github`, and `hide-files-on-github` browser extensions. You can always refer to these browser extensions' source code if you find anything confusing on how to create a new extension.”
> 
> — from `browser-extension-template` readme

As mentioned in the readme, the extension borrows a lot from other browser extensions, and some of these features have also been backported to some of these extensions.

The project is almost a year old now, released under CC-0. If you are interested in building browser extensions, learning how they work, or even contribute to one, take a look at [browser-extension-template](https://github.com/notlmn/browser-extension-template).

-----

If you like using browser extensions, also please take a look at my other project [copy-as-markdown](https://github.com/notlmn/copy-as-markdown/), and also the above mentioned projects [refined-github](https://github.com/sindresorhus/refined-github/), and [notifier-for-github](https://github.com/sindresorhus/notifier-for-github/).