This chrome extension was built as a technique for the Code for Canada team at the Canada Energy Regulator to visualise and test design changes on the Regulator's federal energy regulatory database, named REGDOCs, in real time. This is useful because:
- No access is required to the website's source files to test ideas
- The extension shares assets with the page, so matching styling is easy
- It allows one to visualise a demo or feature as if it were in production as well as navigate the website with the changes
- Saves html and css as we test prototypes internally and within an open source environment, Github.
- Creates a version history of each prototype
There are, however, many other applications for this type of extension, such as modifying the styling of a website, hiding an annoying element, auto-populating a form, or clicking something on page load--we are exploring this as we see fit.
tl:dr this is our front-end design playground for modernizing the Canada Energy Regulator's regulatory database.
Several key lines of code were inspired by this blog post.