Developing A popular Chrome Extension for Dyslexics
“I was dyslexic before anybody knew what dyslexia was. I was called ‘slow’. It’s an awful feeling to think of yourself as ‘slow’ — it’s horrible.” — Robert Benton
Why ?
Look at the above quote and consider the fact that it is estimated that one in 10 people have dyslexia. I myself have dyslexia and have done many talks on programming and having dyslexia, but when I came to Teamwork.com a lot of the code was new to me, so I built a little Chrome extension to get myself up to scratch again with the code they use here, along with helping people with dyslexia.
I built the following on the 15th of January 2015, a Google Chrome app called Helperbird. It does the following:
“Helper Bird is an extension that overrides all fonts on any web page with the award winning OpenDyslexic font and changes the page to be more easily read. You can switch it on and off at any time. Helping people with dyslexia. You can now change the size of the font!.”
The Font
It uses the open source OpenDyslexic font which was created to help with some of the symptoms of dyslexia. Letters have heavy weighted bottoms to indicate direction. You are able to quickly figure out which part of the letter is down which aids in recognizing the correct letter, and sometimes helps to keep your brain from rotating them around. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent confusion through flipping and swapping. As you can see below.
The Problem
One problem with existing apps like this in the Chrome store is that you cannot turn off the font, a useful feature if a family shares a computer and doesn’t want to use the font. So, I added code to fix that and made it easy to use, but storing a Boolean variable in local storage, if it’s on or off.
I launched it in January 2015, then forgot about it until August 2015 when it had 2,000 plus user and growing, I was shocked.
Building it and they will come
It’s built using the following tools, Angular JS and Material Bootstrap, along with Gulp, which I learned from working in teamwork.
The way it’s set up is that I have a package.json file:
{
“name”: “helperbird”,
“version”: “1.1.1”,
“manifest_version”: 2,
“description”: “Format pages using the OpenDyslexic font”,
“browser_action”: {
“default_popup”: “index.html”
},
“permissions”: [“tabs”, “*://*/*”, “http://*/*", “https://*/*", “<all_urls>”, “storage”],
“content_scripts”: [{
“matches”: [“*://*/*”, “file:///*/*”],
“exclude_globs”: [“*://docs.google.com/*”],
“js”: [“assets/dist/js/system.min.js”],
“all_frames”: true
}],
“web_accessible_resources”: [“/assets/dist/fonts/OpenDyslexic-Bold.otf”, “/assets/dist/fonts/OpenDyslexic-BoldItalic.otf”, “/assets/dist/fonts/OpenDyslexic-Italic.otf”, “/assets/dist/fonts/OpenDyslexic-Regular.otf”, “/assets/dist/css/opendyslexic/accesibility.min.css”]
}The line with “assets/dist/js/system.min.js” allows me to call functions inside this system.min.js per tab, where I ask for permissions related to each tab the user has and local storage within Chrome for storing settings.
This is so I can only change the font on the tab the user wants and turn it off/on other ones.
So, looking into the system.min.js files main functions:
function turnOffOpenDyslexic() {
if (document.getElementById(“opendyslexic”) != null) {
elem = document.getElementById(“opendyslexic”);
elem.parentNode.removeChild(elem);
(document.head || document.documentElement).removeChild(elem);
reloadPage();
}
}This injects the following CSS (A snippet of it) into the current webpage that the user is viewing, overrides the font and reloads the page.
@font-face {
font-family: “opendyslexicmono”;
src: url(‘chrome-extension://__MSG_@@extension_id__/assets/dist/fonts/OpenDyslexicMono-Regular.otf’);
font-weight: normal;
font-style: normal;
}
html {
color: rgb(25, 26, 66);
font-family: opendyslexic;
}
p:nth-child(even), li:nth-child(even) {
opacity: background-color: rgba(0, 0, 0, 0.03);
}
p:hover, li:hover {
background-color: rgba(0, 0, 0, 0.09) !important;
}
p, a, h1, h2, h3, h4, h5, input, ul, span, font, strong {
font-family: opendyslexic;
line-height: 150%;
}
* {
font-family: opendyslexic;
}
pre, code {
font-family: opendyslexicmono !important;
line-height: 150%;
}
.ace_text-input, .prettyprint {
font-family: opendyslexicmono !important;
}
.original-tweet {
background-color: #fff !important;
}
input, textarea {
font-family: opendyslexic !important;
}I do the same for changing the font size; it allows the user to input a font size and change on the keyup. It does the same as changing the font style.
function turnOnChangeFont(fontSize) {
style = document.createElement(‘style’);
style.setAttribute(“id”, “helperColor”);
style.innerHTML = “p,span,li,a{font-size:” + fontSize + “px!important;}”;
(document.head || document.documentElement).appendChild(style);
}The code overall is simple, but effective. The effect it has had and the messages I have gotten heartwarming from users, I made it as a bit of fun for a 24-hour challenge, but it has turned out kind-of life changing, in a cheesy way.
The Reaction
This kinda got weird after where I was asked to invite, to work on the official opendyslexic app (which I didn’t know existed) after my work was noticed. I did of course as at the time 17,000 people used it with very negative reviews and people were screaming for what I had done with helper bird.
So I rebuilt the app using gulp and Angular JS as it wasn’t touched since 2013. The reviews and user reaction was major as reviews came in praising the new features, app design and bug fixes I did, in 5 weeks the user base grew to 26,305. It had got me a lot of attention from different companies and emails from people taking me for majorly improving the app and adding the on/off toggle button ❤
An example of before and after can be seen here.
Before
After
Hope this was a fun read into how I developed the opendyslexic font chrome extension and how different fonts help people with dyslexia.
Feel free to submit a pull-request on the helper bird, or download it from the Chrome store. The opendyslexic chrome extension and the repo is found here.
Remember if you would like to write an engine room post for teamwork, check out our jobs page. You can check me out on twitter or on github.
Originally published at engineroom.teamwork.com.
