Increasing Efficiency by Making a Browser Extension

Spire Digital
Nov 9, 2015

Background

At Spire Digital, we are given the opportunity to work on side projects in our down time. This is similar to Google’s retired 20 Percent program that yielded GMAIL and ADWORDS. As a software quality tester, I want to expand my knowledge of HTML, CSS, and JavaScript so that I can be more of a white-box tester as well as give better notes to the developers. In the past, I had written MVC and XMAL apps in C# and found that I had become a better tester in the process.

 

The Problem

The QA team at Spire was used to working with many different extensions and browser settings. Some browser settings are harder than others to find and can take many clicks to get to and execute. The name of the game is “eliminating waste”. While it’s not a huge time suck to do these operations, some additional waste is incurred from getting everyone the same setup and base knowledge.

This was compounded by the different user groups; sales, design, development, qa, and project management. Each team had its own set of tools and processes. Quality is something we all at Spire are tasked with and is verified every step of the way.
– Developers need to ensure their code works as intended on all supported devices.
– QA needs to ensure the code meets our standards.
– Project managers need to perform UAT.
-The sales team will check in on things to make sure what was promised is what gets delivered.

 

Considerations

I set out to design a simple tool so that only one browser extension could replace the complexity of the problem outlined above. The first thing I had to do was to decide on a browser to make an extension for. I went with Chrome as it’s the most popular browser in the office. I also wanted to bring the tool to the users and engender adoption. That stemmed from my making a Selenium IDE using JavaFx that went largely unused. The JavaFx app required that people break their normal flow and it also had dependencies (Java 8+ installed). However, I was able to take the knowledge of JavaScript learned from the JavaFx project and apply it to the Chrome extension.

 

The Learning Curve

First, I had to find out how to make an app. This process is different for everyone, but I usually start with a quick “How to…” video on YouTube. I found a couple that were less than 10 minutes long. So, after 2 hours I already had a simple extension!

Next, I needed to start developing functionality. Once that was complete, it needs to look pretty. Finally, I showed the extension to the QA and Dev teams and got some solid feedback. After all that was said and done, I felt confident enough to put the extension on the Chrome Web Store so that everyone could grab an auto-updating build. All and all, I’d say it took about 40 hours. Quite a few of those were at home, because I was so entertained by the challenge of it.

 

Solution

I called my extension the same thing I called my JavaFx app, “qAspire”. If you have ever fought the “name boss” then you’ll know why I chose to make a suite of “qAspire” applications. That currently comprises of “qAspire the JavaFx App” and “qASpire the Chrome Extension”. If you are a fan of Space Balls you might get the joke.

The team’s reception was favorable. I showed off the extension in our weekly Dev and QA roundtables. I also emailed a link to the Chrome Web store to the entire company. Once shown the tool’s capabilities, most people went out and downloaded it right away. Showing off the tool was also a good way to receive feedback. From which I made a few alterations, like adding ‘settings’ and a ‘clear domain cookies’ option.

Almost right away we started seeing the benefit. Team members who relied on other tools now had a simple way of reproducing issues and communicating them. This helps when a ticket “moves left” on the Kanban board by providing simple, easy to follow steps to reproduce. The waste of getting one environment (browser + add-ons) to mirror another was eliminated. Another area of waste was fixed in that a dev could run checks that QA would run. This means that certain issues were now reported and fixable before the ticket has made it to the QA team’s queue.

 

Check it Out

We have opened up the Chrome extension to the public and it is available on the Chrome Web Store; available here.

 

Take Aways

  • 20% program is effective in allowing employees to learn valuable skills and apply that knowledge.
  • When creating an application, keep it simple with the most used options present and clear without scrolling and/or more than a click or two away.
  • Develop with the end-user in mind. If you can’t explain it to anyone in 5 minutes, you have made it too complicated.