Simple Gmail Notes – Refactor


The extensions of Simple Gmail Notes have been uploaded to the Chrome Store and Firefox Addon Market for than two weeks. I believe it's time consolidate the code of two sides now, so the project could be more easily maintained in the future.


The system structure after code refactoring is illustrated the following diagram:

Simple Gmail Notes - Refactor

There are basically two main steps for the refactoring:

  1. Both Firefox and Chrome extensions are composed of three main modules: page.js, content.js and background.js. The common functionalities (e.g. Google Document API call) are extracted and isolated into three core js files (xxx-common.js)

  2. Some APIs are browser dependent (e.g. storage API). In such cases, some pseudo-abstract functions are provided in the common js files. Those pseudo-abstract functions must be overwritten by the subsequent (browser specific) js files, otherwise exceptions would be thrown.

For example, the API to send messages from background script to content script is different from Firefox and Chrome. So, we would have the followings:

  • background-common.js (Shared):

  • background.js (Firefox):

  • background.js (Chrome):

The Script Loading Sequence

By design the background-common.js will be loaded BEFORE the background.js, so the browser specific functions would eventually overwrite those common functions. (Late loaded functions would overwrite the early functions, if they are of the same name.)

Here is the code for script loading for Chrome side:

Here is the code for script loading for Firefox side:

Partial Refactoring

Things would be a little bit tricky if the functions are just '''partially''' shared. For example, the success callback logic are the same for both extensions, but the way to launch the OAuth of Google Document varies.

Here is an example:

  • background-common.js (Shared):

  • background.js (Chrome):

  • background.js (Firefox):

Once the structure is fixed and refactoring is applied to one side, the transfer to the other side is actually easy. In this case, I worked for one day to extract out the common utility functions from Firefox extension, and then it took me another 2 hours to finish the refactoring of the Chrome extension.

Leave a comment

Leave a Reply

Your email address will not be published.