A TamperMonkey script for displaying the Drone CI (0.X) build status as a fav icon and tab title

DroneBuildStatusIndicator.user.js

// ==UserScript==
// @name         DroneBuildStatusTabTitle
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Display Drone CI build status in browser tab title
// @author       Trent Rand
// @match        https://drone.squarespace.net/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

   var favicon = document.querySelector("link[rel*='icon']") || document.createElement('link');
   const initialFavIconHref = favicon.href;

  const interval = setInterval(() => {
    try {
      const buildStatusElement = document.querySelector('[class^="status__label___"] > div');
      if (buildStatusElement) {
        renderBuildStatus(buildStatusElement.textContent);
      } else {
        clearFavIconStatusBadge();
      }
    } catch (e) { }
  }, 1000);

  function renderBuildStatus(buildStatus) {
    document.title = document.title.replace('| drone', `| ${buildStatus}`);

    switch(buildStatus) {
      case 'Successful':
        injectFavIconStatusBadge(1);
        return;
      case 'Error':
      case 'Failure':
        injectFavIconStatusBadge(-1);
        return;
      case 'Running':
        injectFavIconStatusBadge(0);
        return;
      default:
        clearFavIconStatusBadge();
        return;
    }
  }

  function injectFavIconStatusBadge(statusCode) {
    // I borrowed a lot of the following code from Alperen Talaslıoğlu, thank you!
    // https://medium.com/@alperen.talaslioglu/building-dynamic-favicon-with-javascript-223ad7999661
    var canvas = document.createElement('canvas');
    var faviconSize = 16;
    canvas.width = faviconSize;
    canvas.height = faviconSize;

    var context = canvas.getContext('2d');
    var img = document.createElement('img');
    img.src = initialFavIconHref;

    img.onload = () => {
      // Draw Original Favicon as Background
      context.drawImage(img, 0, 0, faviconSize, faviconSize);

      // Draw Notification Circle
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2 + 1.25, 2.5, 0, 2*Math.PI);

      if (statusCode === -1) context.fillStyle = '#FC4758';
      if (statusCode === 0) context.fillStyle = '#FDB835';
      if (statusCode === 1) context.fillStyle = '#4DC89A';
      context.fill();

      // Replace favicon
      favicon.href = canvas.toDataURL('image/png');
    };
  }

  function clearFavIconStatusBadge() {
    favicon.href = initialFavIconHref;
  }
})();