Prototype — A simple & free Chrome extension to test your ideas in real-time

In this article I want to present a new design tool which helps to design, test and iterate web-based digital products at a much faster pace than traditional tools. By enabling you to prototype directly with your service, the tool allows you to understand your design space faster and to develop much stronger solutions.

The issue with isolated design tools

Over the last years I have worked with many complex interface systems, which are designed to offer a unique and personalized experience. With growing expectations to the user experience, it became harder and harder to design and test the experience with my design tools at hand. I would always start by setting up an art board, drawing rectangles and pasting fake customer data and placeholder images. This process felt very ineffective — how was I supposed to know that I chose the right fake data? What happens to the layout when the status of the application changes?

If you are currently working with a digital service, our tasks are probably quite similar. Let me give you some examples that would cause me headaches:

• Your team wants you to try a couple of new content card layouts and interactions.
• Your team wants you to try how customer data can be used in feature XYZ.
• You team wants you to try how the data from the new feature API will fit into the existing designs.
• Your teams wants you to try a new sensor input for mobile users.
• You teams wants you to try a couple different new font styles and colors for a rebranding.

Ugh, I can already feel the days of work a designer needs to create all interfaces in Sketch, prototype something with Invision and rebuild everything in Framer or Principle to try the interactions. All this just to get as close as possible to the final solution. You see what is happening here? Often we are just trying to mimic an experience, instead of designing the actual experience with real-live data under real-live conditions.

So I went looking for a way to prototype my designs directly with the product. It’s often hard for non-engineers to access or even work with an existing code base when building highly scalable products. Setting up a dev environment every time I wanted to try an idea was tedious, so I decided to focus my attention on the browser. While there are some Chrome built-in tools and extensions which allowed me to change code on the website, the workflow is very technical and I couldn’t save nor share my ideas with my colleagues. Hence I decided that it was time to solve this issue by building my own design tool.

Introducing Prototype

Prototype is a free Chrome extension that is built for designers and with a focus on simplicity. It lets you try visual or functional ideas you might have by injecting new Javascript features or CSS into any website. This allows you to work with your existing service, and share your prototypes across your team mates.

By using your own Javascript you can fetch new data, load more HTML or change the existing layout. By using your own CSS you can see how the new layout behaves when you apply styling to it. Once you are ready, you can show the prototype by uploading it to your internal web hosting or to Github pages for example. You can use the prototype to test your ideas with users and their own data.

Features

• Prototype visual or functional ideas on any website by injecting CSS, HTML or Javascript.
• Only a single URL is needed to test or share your prototypes with your team or users.
• Disabled Access-Control-Allow-Origin and Content-Security-Policyallow you to inject cross-origin scripts.
• Explicitly enabled Feature-Policy modules allow to include device hardware (list of supported feature policies).
• The extension integrates perfectly with Chrome’s built-in dev tools.

Installation and how to use

Prototype - Inject new code in your websites

1. The easiest way to install the extension is to get it via the Chrome Extension Gallery.
2. Start coding your prototype!
3. Save your changes in a folder with a prototype.js and prototype.css
4. Host the folder on a web server or http://localhost/ (security restriction of Chrome). Tip: Use this Chrome extension to quickly host local files.
5. Right click on the extension icon in the toolbar to open the options.
6. Enter your URL, save and close the options. Your settings will be saved even when you close the browser.
7. Go to any website and click the extension icon in the toolbar to activate it.
8. Start testing your prototype by browsing your service!

Demo time

In this demo we will use the extension to inject new Javascript and CSS code into an existing web application. Ever wondered how your service might look like with a dark mode? Since we are just prototyping, we want to see results fast. Hence we will use Darkmode.js to emulate a dark mode setting that can be toggled on and off.

1. Install the Chrome extension.
2. Right click on the extension icon in the toolbar to open the options and paste this URL: https://denbue.github.io/Prototype/demos/darkmode/
3. Save and close the options.
4. Go to any website and click the extension icon to activate it.
5. Toggle your dark mode with the button in bottom left corner!

BONUS
Ever wondered how your own or other websites might look in Comic Sans?
Try this URL:https://denbue.github.io/Prototype/demos/comic/

Final thoughts

Over the last year, our team used this extension internally only and we optimized the feature scope for our own needs. By publishing the tool to the public, I hope to gather more insights for the needs of other teams and evolve and expand the feature set. For the future, I can think of implementing new features such as:

• Directly choose a local folder to host a prototype locally.
• Option to add multiple URLs.
• Option to use the history of entered URLs.
• Developing a iOS or Android custom browser app to inject code.

I hope you might want to give it a try in your daily work. If you have any questions or suggestions, please feel free to contribute on Github, reach out to me on LinkedIn or in the comment section below.