In-browser website redesign with User Scripts
Ever felt like you were using the wrong tool when redesigning an existing website? Or maybe you’ve been asked to prototype an application with complex data or visualizations?
Sketch, Figma, Adobe XD are great at creating a walkthrough prototype, but pretty limited in defining interactions. Code is limitless, but it’s another world of languages to learn. If like me, you’re comfortable with design tools and can tweak CSS in the Chrome Developer Tool, but a lot less with React, then I may have the ideal option for you: UserScripts.
Before I get into it, let’s take a look at the following scenarios:
a. Scenario 1: You must design a dark theme or a cosmetic change for a website that is already live. More importantly, you want to quickly showcase what it could look like without investing weeks of work.
b. Scenario 2: You want to improve the accessibility of a page. Add Aria Labels or Alt tags so you can experience for yourself and communicate in-depth requirements to engineers.
c. Scenario 3: You have to design a new feature for an existing application that has complex data, components, or interactions. Doing it in traditional design applications quite often results in a dirty paint job.
__
In all three scenarios, leveraging the existing website is key. Recreating every page in Figma or Sketch would take a long time. So all you need is a way to ‘hack’ the live website. And luckily for you, this can be easily done using a browser extension like:
Greasemonkey (For Firefox),
TamperMonkey (For Chrome)
The extension allows you to target a URL or a domain(*) and inject some code when the web page is loaded. This all happens locally on your machine, so you don’t have to worry about access to the repo or anything.
The script is written in Javascript but don’t run away screaming just yet! Once you’re done with my 5 step guide, you’ll only have to write CSS.
Let’s dive into a simple demo.
I wanted to improve the VOD section of CanalPlay, a streaming service. For some reason, there are no filters for the movies you purchase. So I quickly restyled the page and added a search. Here’s a Before/After:
The sample script is available here if you're interested:
https://raw.githubusercontent.com/helloantoine/sample/gh-pages/blog/greasemonkey-canalplay.js
Now, let me help you create your own script.
1. Install the extension Greasemonkey (For Firefox) or TamperMonkey (For Chrome)
2. Go to the website you want to restyle, click on the extension and ‘Create a new script…’. It will create a script with an empty function:
3. Target the URL and link to third party libraries
The header section can easily be identified at the top. You can specify the URL you target and the plugins you may need. In my case, Jquery is required. so I added one line:
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
4. Add function to enable CSS styling
Then for the content, I removed the empty function and replaced it with this function that will allow you to add CSS to the page:
function addCss(cssString) {var head = document.getElementsByTagName(‘head’)[0]; var newCss = document.createElement(‘style’); newCss.type = “text/css”; newCss.innerHTML = cssString;head.appendChild(newCss);}
5. Add your custom styles
Finally, you can call the function and actually write your CSS in, as is:
addCss (‘#DIV_NAME {background-color: #0e0f10 !important;}’)
or for a class:
addCss (‘.#DIV_NAME {background-color: #0e0f10 !important;}’)
That is it! I hope you found it informative. If you have any questions please do not hesitate to ask. Good prototyping!
