Prototyping: Using Browser Extensions

As a manager of User Experience Designers, one of my jobs is to encourage them to come up with experimentation methods for gaining the most amount of learning for the least amount of time and effort. Doing this keeps our iteration cycles lean allowing us to act on our learnings quickly. For this reason, coding is sometimes seen as a risk during early solution discovery, due to the assumption that it will result in increased iteration cycles. In most cases, I do agree, but the “to code or not code” conversation is much more nuanced than a simple yes or no. Like all things, “it depends”.

While I’ve used a variety of approaches to rapidly create code-based prototypes in my career, leveraging Chrome-based Browser Extensions has proven to be both effective and efficient in specific scenarios. In this post I will share a few examples of how and why I decided to use browser extension instead of a traditional prototype, hopefully adding one more tool to your tool chest.

Before I get ahead of myself, here is a quick introduction to what browser extensions are.

What is a Browser Extension?

Below is an example of a color picker extension I use. Notice how the eyedropper is inside the browser.

While simple applications like this are the traditional use of browser extensions, being able to extend and override the code of any website, including your own, can be advantageous in many ways. Here are a couple of examples explaining how I’ve used browser extensions as a rapid prototype tool.

Example 1: Testing Notification Text

As I started designing the experiment, I began to question using traditional methods in order to learn how our customer was going to react. Showing “before” and “after” designs and asking them how they think about how they would react after they read a notification felt risky. In order to get a more genuine response I wanted them to experience the notification in the context of their own account, however, we did not have the time or resources to get that set up in our production environment.

To create a scenario that would result in more authentic responses from our participants I created a browser extension whose only job was to create the notification below and add it on top of any website that showed up in the browser.

Once it was working we invited participants of the study to our office. After some light warmup questions, I asked them to show me the homework system they used in class. Once they typed in the URL and hit return, my rigged notification popped up on the log-in screen, then I waited for any reaction. We spent a few minutes discussing how it made them feel.

In the end, the results of the studies showed that students are much more open to change than we initially expected, especially if the change is going to make their lives easier. There was, however, a certain point that change would create anxiety. For example, if the school decided to change their Learning Management System providers completely such as moving from Blackboard to Canvas, which happened to a student I interviewed, then they would have to relearn the entire system. Luckily our redesign was more of a facelift than a foundational reinvention. Students agreed that they expect incremental improvement in both user experience and functionality to be pushed out to them as the semester progresses.

Here is the code

Since this is a simple application, I kept all the files live in the same folder.

Here is what those files look like, I’ve left a comment in the code to explain what is going on.

In this example, the manifest is set up to have the extension work across <all_urls>, which means every site that I go to will have this notification added to the top of it. You could specify specific domains if you would like by adding the URL inside of the quotes ( “matches”: [“http://*.nytimes.com/*"]). Learn more about the Manifest File Format on the Google Developer Website. The CSS is what is adding the “the look” of the notification, such as color and positioning. Lastly, the Javascript is creating the is programmatically creating elements that are being added on the website to build the notification UI. Below you will see what the code above would look like on Google.com.

Example 2: Inserting a “Button to Nowhere”

Original Top Navigation using a back-button

While it is completely possible to take a traditional approach by quickly creating a few screens in software such as Sketch or Figma, if we plan on creating an authentic task, the amount of screens and time required to create them increase substantially. To that end, most people would decide to select the Sketch and Invision route of interactive mocks with a less than ideal task. This is a perfectly fine approach that we all do when weighing the cost and benefit of our time invest, however, as mentioned earlier I’d want to spend the least amount of effort for the most amount of learning, so I like to push the boundaries and think of creative ways of getting closer to that ideal task scenario to get closer to an authentic response by the participant.

Spend the least amount of effort for the most amount of learning.

In this particular example, going with the traditional method would qualify for the “least amount of effort”, but I wanted to learn more, because I am stubborn like that. For example, how do they leverage the accessibility of an eBook in the variety of situations noted earlier?

Looking at the task, I’d needed to do 4 things in order to have the results I’d want:

  • hide the top bar that has the back arrow
  • recreate the menu in javascript and add it to the screen
  • creating a breadcrumb in javascript and add it to the screen
  • add a left margin to make space for the menu

Once the extension was completed, any time a person lands on an activity the extension would activate and make it look like the image below.

Here is the code

Since I need to interact with existing elements on the page, I need to make sure that the page is loaded before the script launches. To do that, I need to add “run_at” value to “document_end”. That instructs the extension to push its code to the browser only after all the elements of the page have loaded. Now I could locate elements from the website in my javascript and do whatever I’d like with them.

The first thing we need to to do is gather the ID and Class names for any elements we’ll manipulate. To do this you will need to open up the Chrome Inspector using View>Developer>Inspect Elements. Look at the image below and locate the inspect button on the top left.

Once that is selected, you can hover over any element on the screen and you will see its associated markup get highlighted on your inspector. Then note the element's id and class names so that you can reference them from your code. Amazon’s search box has an id name of “twotabsearchtextbox”.

All we need to do now is use a few Javascript functions. I suggest you look these up to get a good handle on how to create HTML via Javascript. Below are a few highlights:

Create a variable that stores the location of the search box using querySelector.

let amazonSearch = document.querySelector("#twotabsearchtextbox");

To add placeholder text to the search box is even easier. All we need to do is add an attribute of placeholder to the search box.

amazonSearch.setAttribute("placeholder", "Add Placeholder text here");

Done, that was easy! If you inspect the element once you test your code, it will look something like this.

Next, let's work on the more complex task of adding a menu item!

First, create elements and add them to the browser view using createElement and appendChild.

//store the name of parent that contains all the menu items
let menu = document.querySelector("#menu");
//create a div ele and add some text into it
let menuItem = document.createElement("div");
menuItem.innerHTML = "Super Secret Page";
menu.appendChild(menuItem);

Amazon has CSS that it uses to style their items. You will need to identify them with Inspector and us classList to insert them. Amazon gives those items a class name of nav-a.

//From above: create a div element
let menuItem = document.createElement("div");
menu.appendChild(menuItem);
menu.classList.add("nav-a");

Here is the full code, which didn’t take much time to write at all, keeping to my “least amount of effort for most amount of learning” goal.

Additional Information

Loading the extension

Running the test

Final Thoughts

You can take this style of thinking to the next level and run a similar experiment with real users on live products if you have an A/B Testing solution like https://www.optimizely.com/. There you are able to do pretty much everything I spoke about in this article, and run some pretty impressive A/B testing experiments.

If you are worried about not being a coder, you don’t have to be. The lightest touch of some basic CSS, and learning just a handful of JavaScript (most of which I’ve linked in this article) is enough to be dangerous and do 90% of the work I’ve described. Remember, one of the most important rules in prototyping is minimizing time to iteration, so no experiment should be complicated to create. If it is, you might want to think about some other creative way of testing that. Along with browser extension, at Macmillan Learning we’ve used concierge and wizard of oz experiments. Check out a co-worker's article about Wizard of Oz experiments.

Getting Started Resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Britez

Designer, Developer, Dad & maker of things that teach stuff. Sr Designer at Microsoft VS Code & MakeCode & Adjunct Instructor @ NYU’s Digital Media for Learning