How We Built The Fastest Extension for Chrome

We have always thought of finding a way to share anything instantly from anywhere. The idea was to have something so simple that we could just right click and share. We built Crowdfire share and then thought of building its extension. We built Crowdfire extension for Chrome to solve two problems: Crowdfire is the first […]

We have always thought of finding a way to share anything instantly from anywhere. The idea was to have something so simple that we could just right click and share. We built Crowdfire share and then thought of building its extension.

We built Crowdfire extension for Chrome to solve two problems:

  • Crowdfire is the first extension that helps you share photos on Twitter and Instagram simultaneously.
  • It is the only extension that loads within half a second unlike its peers.

We had one aim while building Crowdfire share extension: To make it faster and better. If you use Crowdfire extension for Chrome, you would notice that the accounts are already loaded as soon as you click on the extension. After looking at similar extensions available on web, we found out that the first API call of the user that we make is time consuming after which the DOM renders. So the whole process would take a minimum of 1–2 seconds. We wanted to reduce the API call time which is an impossible feat.

So here’s what we did: We made an async API call which didn’t block the DOM rendering. This was a first time process. Hereafter, we stored the data we got every time. As a result, the next time we would take the data from the stored data and render it. Since we store the data every time we get it, it is faster the next time we load it. Meanwhile, we also kept making API call in the background to make sure the account data would not be stale.

We used the native functionality offered by Google Chrome to make our extension even faster. Most extensions use iframes within the website to open the extension which takes a lot of time. Instead, we shipped our extension with HTML and other assets packaged with it. This makes sure that whenever you click the publish icon, the compose window will be available to you instantly.

We load the same page popup.html in content script. We do that by loading it through iframe due to which we don’t have to maintain two different pages. There were problems as we needed to prefill the form in the iframe based on the user action in the page. This was not simple as it would give us cross-origin issue because iframe is of a different origin. We solved this problem by using the background page as the mediator between webpage and the iframe. We used the chrome messaging API where we sent the message from webpage to background page and then to the iframe.

We plan to make the extension available for other browsers (Firefox, Safari etc) but we did not want to write code multiple times for the same kind of extension. We isolated the code specific to the particular browser (Chrome, in this case) and the rest of the functionality in such a way that these functionalities could be used in other browsers and we would just have to write the browser-specific code. We used Grunt CLI — we wrote a script which takes the commonly used code and combines with the browser specific code and creates a different folder for every browser. The team is working is hard to enhance its functionality and ship it soon.

You can install the extension by clicking here.

Published on October 16, 2015.


How We Built The Fastest Extension for Chrome was originally published in Coding Big — The Crowdfire Engineering Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: Crowdfire