Userscript: Subpixel Kerning for Google Docs (Firefox Only!)

// ==UserScript==
// @name         Subpixel Kerning for Google Docs (Firefox Only!)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Enables subpixel kerning on the content of google docs. Includes an automatic dark mode, see code comments for Dark Reader compatibility.
// @author       threethan
// @match        https://docs.google.com/document/*
// @icon         https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico
// @grant        none
// ==/UserScript==

// ✨ For dark reader support:
// Open dark reader dev tools and add the following to the end, without /* or */, then click apply:
/*

================================

docs.google.com/document/

CSS
canvas {
    background: none;
}

*/

// ✨ Set this to false to disable the auto dark mode applied to the document
const enableAutoDarkMode = true;

(function() {
    'use strict';

    const invert = enableAutoDarkMode && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    const clearColor = invert ? '#0A0A0C': 'white';

    // Set all canvases to be opaque
    var canvases = document.getElementsByTagName('canvas');
    for (var i=0; i<canvases.length; i++) {
        canvases[i].setAttribute("moz-opaque", "true");
    }

    // Fix clearrect to work correctly with opaque canvases
    CanvasRenderingContext2D.prototype.clearRect = function (orig) {
    return function(type) {
        var prevFillStyle = this.fillStyle;

        this.fillStyle = clearColor;

        this.fillRect(...arguments);
        this.fillStyle = prevFillStyle;
    }
    }(CanvasRenderingContext2D.prototype.clearRect)

    // Look for new canvases
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for(var i = 0; i < mutation.addedNodes.length; i++) {
                if (mutation.addedNodes[i].nodeName == "CANVAS") {
                    mutation.addedNodes[i].setAttribute("moz-opaque", "true");
                }
            }
        })

    });
    observer.observe(document, {
        subtree: true,
        childList: true
    });

    // Set black text to white if in dark mode
    if (enableAutoDarkMode) {
        CanvasRenderingContext2D.prototype.fillText = function (orig) {
            return function(type) {
                var prevFillStyle = this.fillStyle;
                if (invert && prevFillStyle=="#000000") this.fillStyle = 'white';
                orig.apply(this, arguments);
                this.fillStyle = prevFillStyle;
            }
        }(CanvasRenderingContext2D.prototype.fillText)
    }

})();

A version of this is now included in the Better Darker Docs extension