AngularJS web app and helper Chrome extension

The Problem

PureSEO works with businesses to promote their website and improve search engine rankings. They employ several "Link Analysts" to build links to their clients' web sites. The analysts are assigned tasks, and most tasks include visiting a website and filling up a form with data specific to the client.

The process includes opening a task document, finding the website to open, copying data specific to the client and filling up the form. This is the exact kind of process that can be automated.

The solution

A web application cum browser extension. The analyst logs in using her username and password and clicks on the "Get Task" button. The task is loaded and the browser navigates to the web page mentioned in the task. The web application is injected into the opened web page as a toolbar at the bottom where she can look at the details of the task.

To fill up the form, all she has to do is click on the "Autofill" button. She can also right click on an input field and choose to fill data from a list available for the task. After the task is done, she clicks on "Task Complete" and the next task is loaded.

Technical details

The web application is built using AngularJS and connects to an API defined using a Swagger schema. It is packaged into a browser extension that can inject the web app as a "floating" toolbar into any active page or a new tab.

The Yeoman Angular generator was used to quickly scaffold the application. The build process is automated using Grunt. Minifying files, compiling Angular templates, updating the version and packaging the extension is as simple as running "grunt build".

To make it easier for the team working on the Admin Panel, the API was defined using Swagger. To test the frontend, a mock API was created using NodeJS and Express.

To easily update the extension without users having to reinstall it in their browser, an auto-update process was developed where the extension loads its asset files from a URL, stores it in the browser storage and automatically updates it when new versions are available.

Several features of the Chrome Extension API was used including browser actions, chrome storage, page update events, message passing and context menus.

Since an Angular application is injected into random webpages which itself might contain an Angular application, several additional work had to be done including namespacing stylesheets and isolating the scripts.

This was a challenging project spanning several months and having a senior Angular developer to review my code was very helpful.