Replaces the stock avatars (initials) with hash-generated Identicons. It also decorates each activity with an Identicon embellishment.

servicenow-identicons.userscript.js

// ==UserScript==
// @name         Indenticons for ServiceNow
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Generates an Identicon for each item in the Activities list in a ServiceNow ticket.
// @author       Dan Walsh
// @match        https://*.service-now.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=service-now.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    const loadScript = (url) => {
        const $script = document.createElement('script');
        $script.setAttribute("type","text/javascript");
        $script.setAttribute("src", url);
        document.head.insertAdjacentElement('beforeEnd', $script);
    }

    loadScript("https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js");
    //loadScript("https://cdnjs.cloudflare.com/ajax/libs/identicon.js/2.3.3/pnglib.min.js"); -- don't need this if we're only generating SVGs
    loadScript("https://cdnjs.cloudflare.com/ajax/libs/identicon.js/2.3.3/identicon.js");

    const $avatars = document.querySelectorAll('.sn-card-component-avatar');

    const identiconOpts = {
        margin: 0.2, // 20% margin
        size: 128, // 128px square
        format: 'svg' // use SVG instead of PNG
    };

    window.identicons = {};

    window.addEventListener('load',() => {
        $avatars.forEach(($avatar) => {
            $avatar.nextElementSibling.style = "font-weight:600;"
            const name = $avatar.nextElementSibling.textContent;
            const $img = document.createElement('img');

            // Cache unique icons, so we only generate them once
            if (!window.identicons.hasOwnProperty(name)) {
                window.identicons[name] = {
                    hash: sha256(name),
                    svg: new Identicon(sha256(name), identiconOpts).toString(),
                };
                window.identicons[name].src = `data:image/svg+xml;base64,${window.identicons[name].svg}`;
            }

            $img.src = window.identicons[name].src;

            $img.style = "width:100%;height:100%;position:absolute;background:#ececec;border-radius:100%;"
            $img.width = "64";
            $img.height = "64";
            $avatar.firstChild.firstChild.style = "display:none;";
            $avatar.firstChild.insertAdjacentElement('afterBegin', $img)

            const $bgimg = document.createElement('img');
            $bgimg.src = window.identicons[name].src;
            $bgimg.style = "width:128px;height:128px;position:absolute;bottom:-1rem;right:-1rem;background:#ececec;border-radius:100%;opacity:0.25;pointer-events:none;user-select:none;"
            $bgimg.width = "128";
            $bgimg.height = "128";
            $avatar.parentElement.parentElement.insertAdjacentElement('afterBegin', $bgimg)
        })
    });
})();