Font Adjuster Extension Technical Guide

Lyle Schwemley
2022

Contents

Purpose

This technical guide documents the Font Adjuster extension, its functionality, code, implementation, and uses. It is provided for the development team and end users of the extension alike to fully understand what the program does and to facilitate troubleshooting of and further updates to the extension.

Overview

The need for a Firefox browser extension that would allow users to adjust font size was identified. A common complaint submitted to the development team was that certain websites utilized fonts that were too small to be easily read by users with accessibility needs. The Font Adjuster extension was developed as a solution for the identified problem.

Once installed into the web browser, the Font Adjuster extension allows Firefox users to increase or decrease the size of the font on any webpage. It does not store any information about the user. Adjustments to font sizes are made when the user interacts with a popup containing three buttons: one that increases font size, one that decreases font size, and one that returns the font to its default size.

Code

This section will identify the code of the Font Adjuster extension for maintenance and troubleshooting purposes.

The Font Adjuster extension for Firefox requires the following prerequisite knowledge:

• JavaScript
• HTML
• WebExtensions API

In addition to the above, an HTML editor will be necessary. For this documentation, the open source software Notepad++ was utilized.

Organization

The extension is contained in one archive. See the Archiving Files Reference Guide for more information on file archives. The code references other files in the archive, so proper file structure is critical.

Inside the root of the archive is manifest.json and the assets folder. The assets folder contains all of the files the manifest references. Within the assets folder is the images folder, which contains the icons for the extension, and the js folder, which contains the necessary JavaScript files. The file path is shown below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

root
|  manifest.json
|  popup.html
|- assets
|  |- images
|  |  |  16.png
|  |  |  32.png
|  |  |  48.png
|  |  |  128.png
|  |- js
|  |  |  fontsize.js
|  |  |  popup.js

Figure 1 - File path

The extension is primarily organized through the manifest. The overall structure of the extension is pictured below.

Figure 2 - Structure of the Font Adjuster extension

Manifest.json

All extensions must have a manifest.json that contains the metadata needed by the WebExtensions API to know what the extension is, such as the name, version number, description, and the icon used to represent the extension. Name, version, and manifest_version are required keys. Description and icon keys are optional, but it is best practice to include them. In addition to the necessary metadata, manifest.json also includes references to popup.html and fontsize.js. Below is the complete manifest.json for the Font Adjuster extension.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
    "name": "Font Adjuster", 
    "version": "0.0.1", 
    "description": "Increase or decrease font size", 
    "manifest_version": 2, 
    "icons": { 
        "16": "assets/images/16.png",
        "32": "assets/images/32.png",
        "48": "assets/images/48.png",
        "128": "assets/images/128.png"
    }, 
    "browser_action": { 
        "default_popup": "popup.html",
        "browser_style": true
    },
    "content_scripts": [ {
        "all_frames": true,
        "css": [  ],
        "js": [ "assets/js/fontsize.js" ],
        "matches": [ "<all_urls>" ],
        "run_at": "document_start"
    } ]
} 

See the table below for a description of each key used in the manifest.

Table 1 - Description of keys

Popup.html

The popup.html file is what makes the extension visible to the user. It is an HTML file that contains the code for the visuals, description, and buttons in the popup that enable the user to adjust the font size on any webpage. The popup is shown when the extension button is clicked in Firefox because the "browser_action" field in manifest.json contains the "default_popup" key with a value "popup.html".

The <style></style> section of the code is written in CSS and dictates the appearance of the popup. The <body></body> section of creates the buttons, paragraphs, and heading.

Below is the complete popup.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Adjuster</title>
    <style>
        body
        {
            width: 250px;
            font-family: Arial, Helvetica, sans-serif;
            padding: 4px;
        }
        h1
        {
            font-size: 1.2em;
            -webkit-margin-before:0em;
            -webkit-margin-after:0em;
            margin: 6px;
            padding: 10px;
            text-align: center;
        }
        p
        {
            margin: .5em;
            padding: 6px;
        }
        .button
        {
            font-size: 1.2em;
            border: 2px solid #555555;
            border-radius: 10px;
            padding: 6px;
            margin: 6px;
            font-family: Consolas, monospace; 
            cursor: pointer;
        }
        </style>
    </head> 
    <body class= "h1">
        <h1>Font Adjuster</h1>
        <p><span class="button" id="up" title="ALT+">A+</span>
        <span class="button" id="down" title="ALT-">A-</span>
        <span class="button" id="default" title="ALT Backspace" data-lang= "default_size"> 
        Default Size </span>
        <p id="description" data-lang="description">Click A+ to increase the font size, A- to decrease the font size, or click Default Size to return the font to how it was originally.</p>
        <script src="assets/js/popup.js"></script>
    </body>
</html>

Figure 4 - popup.html

Line 49 contains a script reference to popup.js. This enables the use of JavaScript in the popup.

Popup.js

Popup.js is the JavaScript file that gives popup.html file full functionality. The first three lines of the code set the variables that will be used in the script. Lines 4 through 19 query the browser and obtain the URL the user is currently viewing. This is necessary in order for the code to parse the HTML text on the website before the font size can be adjusted. If the code cannot access the URL, it will log an error.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var test_mode = ('update_url' in browser.runtime.getManifest()) ? false : true; 
var running_script = "popup";
var tab_id = false;
browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var tab = tabs[0];
    var url = tab.url;
    var title = tab.title;
    tab_id = tab.id;
    if (test_mode) console.log(tab_id + " : " + url);
});
function send_to_content(obj, to_frame) {
    to_frame = to_frame || null;
    if (test_mode) console.log(tab_id);
    browser.tabs.sendMessage(tab_id, obj, to_frame, function(response) { 
        if (browser.runtime.lastError) {
            console.log('ERROR: ' + browser.runtime.lastError.message); 
        }
    });
}

Figure 5 - Set variables and get current URL

Since popup.html cannot have any JavaScript in it, the onclick toggle switches have been added to popup.js and passed into the HTML file to make the buttons clickable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

document.getElementById('up').addEventListener("click", function() { 
send_to_content({"button" : "up" }) }, false);

document.getElementById('down').addEventListener("click", function() { 
send_to_content({"button" : "down" }) }, false);

document.getElementById('default').addEventListener("click", function() { 
send_to_content({ "button" : "default" }) }, false);

document.getElementById('fontcolor').addEventListener("input", function() { 
font_color();}, false);

document.getElementById('bgcolor').addEventListener("input", function() { 
bg_color();},false);

Figure 6 - Toggle switches

Fontsize.js

In order to alter the webpage itself, the fontsize.js content script is needed. Using the Document Object Model (DOM), the content script is able to access and change the font size of almost any webpage. The content script, which is referenced in the manifest, is active at document start.

First, the variables are declared. If loaded from the addons database instead of a local folder, then getManifest will have the update_url property. The font_times variable is set to 1 with a multiplier of 10%. On fresh extension installs and the first time the content script is injected, it originally would not run because dom_ready was always false. This was remedied by including the if statements on lines 14 and 15.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var test_mode = ('update_url' in browser.runtime.getManifest()) ? false : true; 
var font_times = 1; 
var font_timer;
var timer_ms = (window.self === window.top) ? 500 : 3000; 
var total_elements = { 
    "save_defaults" : 0,
    "font-size" : 0,
}
var font_options = 
{ 
    "font-size" : null  
};  
var dom_ready = false; 
if (document.readyState === 'interactive') dom_ready = true; 
if (document.readyState === 'complete') dom_ready = 2; 
var saving_defaults = false; 

Figure 7 - Declare variables

After the variables have been declared, the script is ready to call functions. The script uses three functions: isOnScreen, save_defaults, and change_fontsize.

The isOnScreen function keeps the page view closer to the same location when changing font size. Without it, the page would jump up or down when the user clicked A+ or A- buttons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function isOnScreen(el){
var el2 = el;
while (typeof el2 === 'object' && !el2.nodeName.match(/^(body|#document)$/i)) {
    if (document.defaultView.getComputedStyle(el2,null).getPropertyValue('position').toLowerCase () === 'fixed') return false;
    el2 = el2.parentNode;
}
var rect = el.getBoundingClientRect();
if (rect.top >= 1 && rect.left >= 1 && 
    rect.bottom <= window.innerHeight && rect.right <= window.innerWidth) 
    return el;
else 
    return false;
}

Figure 8 - the isOnScreen function

The next function to be called is the save_defaults function. It is important that this function be called before change_fontsize because the child element fontSizes is relative to the parent element. This means that if the parent element is changed, then the child elements continue to change, and the data-default-fontsize element will store an incorrect value, making the Default Size button return the font to an incorrect size.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function save_defaults(opt) { 
var options = ["font-size"]; 
var onScreenEl = false; 
var elems = document.querySelectorAll('body, body *'); 
var elems_length = elems.length;
if (elems_length == total_elements['save_defaults'] && opt != "font-size") 
    return; 
if (test_mode) console.log("save_defaults loop. "+"elems.length="+elems_length+".total_elements['save_defaults']="+total_elements['save_defaults']);
for (var i=0; i<elems_length; i++)
for (var j=0; j<options.length; j++) {
    saving_defaults = true;
    var el = elems[i];
    var option = options[j];
    if (el.getAttribute('data-default-'+option)) {
        var default_value = el.getAttribute('data-default-'+option);
    }
    else {
        var default_value = document.defaultView.getComputedStyle(el, null).getPropertyValue (option); 
        el.setAttribute('data-default-'+option, default_value);
    }
    if (opt == "font-size" && !onScreenEl) { 
        onScreenEl = isOnScreen(el); 
        if (onScreenEl && test_mode) { console.log("onScreenEl:");
        console.log(onScreenEl); 
        }
        if (onScreenEl && elems_length == total_elements['save_defaults']) { 
            saving_defaults = false;
            return (onScreenEl);
        }
    }
} 
total_elements['save_defaults'] = elems_length; 
saving_defaults = false;
return (onScreenEl); 
} 

Figure 9 - the save_defaults function

The bulk of the content script is the change_fontsize function. This function passes in the button click information in order to increase or decrease the size of the font by a mathematical factor of plus or minus 0.1 * 10, or 10% per click. Once the button has been pressed, the variable "up" or "down" is passed into the function, and the value is calculated and added to the default font size.

The change_fontsize function also enables the use of the Default Size button by representing the original size of the font as 1 and reverting the font_times variable to 1 when the button is pressed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

function change_fontsize(direction){
if (!dom_ready || saving_defaults) {
    setTimeout(function() { change_fontsize(direction); } , 10);
    return;
}
var old_font_times = font_times;
var onScreenEl = false; 
var onScreenElTop = false; 
clearTimeout(font_timer);
if (direction == "up") {
    font_times = Math.round((font_times + 0.1) * 10) / 10; 
}
else if (direction == "down") { 
    if  (font_times > 0.2)  { 
        font_times = Math.round((font_times - 0.1) * 10) / 10;
    }
    else return;
}
else if (direction == "default")
    font_times = 1;
else if (!isNaN(direction)) 
    font_times = direction;
var elems = document.querySelectorAll('body, body *'); 
var elems_length = elems.length;
if (elems_length != total_elements['font-size'] || font_times != font_options["font-
size"] || document.readyState != "complete") 
{ 
    if (test_mode) console.log("font-size loop. "+"elems.length="+elems_length+".total_ 
    elements['font-size']="+total_elements['font-size']);
    total_elements['font-size'] = elems.length; 
    onScreenEl = save_defaults("font-size"); 
    if (onScreenEl) { 
            onScreenElTop = onScreenEl.getBoundingClientRect().top; 
            if (test_mode) { console.log("onScreenEl.top = "+onScreenEl.getBoundingClientRect().top); 
            }
        }
        for (var i=0; i<elems_length; i++) {
            var el = elems[i]; 
            if (el.getAttribute('data-default-font-size')) {
                var default_fontsize = parseFloat(el.getAttribute('data-default-font-
                size')); 
            }
            else {
                var default_fontsize = parseFloat(document.defaultView.getComputedStyle(el, 
                null).getPropertyValue("font-size"));
                el.setAttribute('data-default-font-size', default_fontsize);
            }
            var new_fontsize = Math.round(default_fontsize * font_times);
            var old_fontsize = Math.round(parseFloat(document.defaultView.getComputedStyle(el, null).getPropertyValue("font-size"))); {
                if (!el.isContentEditable || (el.parentNode && 
                !el.parentNode.isContentEditable)) {    
                    el.style.setProperty("font-size", Math.round(default_fontsize * font_times) + "px", "important"); 
                    var cur_fontsize = parseInt(document.defaultView.getComputedStyle(el,null).getPropertyValue("font-size"));
                    var cur_lineheight = parseInt(document.defaultView.getComputedStyle(el,null).getPropertyValue("line-height"));
                    if (cur_lineheight != "normal" && cur_lineheight <= (cur_fontsize+1))el.style.setProperty("line-height", "normal", "important"); 
                }
            }
        }
    }
} 

Figure 10 - the change_fontsize function

The final elements of fontsize.js are the listeners. The listeners associate the variables up, down, or default, with the A+, A-, and Default Size buttons, respectively.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

browser.runtime.onMessage.addListener(
function(obj, sender, sendResponse) {
    if (obj.hasOwnProperty("button")) 
    {
        if (obj["button"] == "up") change_fontsize("up");
        else if (obj["button"] == "down") change_fontsize("down");
        else if (obj["button"] == "default") change_fontsize("default");    
    }
    if (obj.hasOwnProperty("font_times"))
    {
        change_fontsize(parseFloat(obj["font_times"])); 
    }   
});
document.addEventListener('DOMContentLoaded', function(event) { 
if (test_mode) console.log("DOMContentLoaded");
setTimeout(function() { dom_ready = true;}, 1000); 
});

Figure 11 - Event listeners

Implementation

Installation

The Font Adjuster browser extension is installed using the same methods as any other Firefox add-on. Click the three lines to the right hand side of the address bar. Then click on Add-ons and Themes in the menu. Alternatively, the keyboard shortcut CTRL + SHIFT + A can be used to open the Add-ons and Themes menu.

In the space above the Manage Your Extensions header, there is a search bar where users can enter the name of the specific add-on desired. Type “Font Adjuster” in the search bar and press enter. The database will appear with add-ons for download.

Alternatively, the direct link to the store page of the extension can be followed: View Store Page

Once Font Adjuster has been located, click on it. The home page for it will appear. Click the blue Add to Firefox button, and then click Add on the popup.

Firefox will notify the user that the add-on was successfully installed. Click Okay to close the notification.

Uninstallation

To uninstall the extension, right-click on its icon in the address bar and select Remove Extension in the dropdown menu. Firefox will ask the user to confirm the removal of the extension via a popup. Click the blue Remove button on the popup to complete the uninstallation.

Using Font Adjuster

The extension is accessed via a popup that can opened at any time by clicking on the Font Adjuster on the upper right side of the toolbar.

Figure 12 - The Font Adjuster icon

The popup contains a heading, three buttons, and instructions on how to use the extension. To increase the font size on a webpage, click the A+ button. To decrease the font size, click the A- button. The font increases or decreases by a factor of 10% per click. Clicking the Default Size button returns the font to its original size.

Figure 13 - The Font Adjuster popup

Limitations

Font Adjuster is a lightweight extension; it does not store any information about the user or previously visited webpages. This means that every time a page is refreshed, the font will return to its default size. Additionally, if new text appears on the screen, for example in a chatroom, it will appear at its default size.

Appendix: Definitions

Add-on: A program that can be installed into the browser and allows users to tailor their browsing experience. Different types of add-ons include themes, dictionaries, and extensions.

API – Application Programming Interface: A software interface that allows two or more programs or computers to communicate with each other.

Content script: The part of the extension that directly accesses the content of a webpage.

*CSS – Cascading Style Sheets: A web design programming language.

DOM – Document Object Model: An object oriented representation of an HTML document.

Extension: Primarily coded with JavaScript, HTML, and CSS, extensions add new features to a browser, such as blocking advertisements, embedded translation tools, and the ability to change the appearance of webpages.

Firefox: An open source web browser developed by Mozilla.

HTML – HyperText Markup Language: A web design programming language.

JavaScript: A web design programming language.

WebExtensions API: A cross-browser extension API for developing extensions implemented by Mozilla.