Tampermonkey script: Make CircleCI links clickable

make_links_clickable.js

// ==UserScript==
// @name         Make CircleCI links clickable v0.2
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Scan CircleCI step output and test items for URLs and turn them into links
// @author       You
// @match        https://app.circleci.com/pipelines/github/*/*/*/workflows/*/jobs/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=circleci.com
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function () {
  "use strict";

  function createLinksForStepButton($button) {
    const $spans = $button.parent().find("> div pre span");
    console.log("MCCILC: Searching for URLs. Found spans:", $spans.length);
    $spans.each((i, el) => {
      const $el = $(el);
      const text = $el.text();
      console.log(i, "MCCILC: Checking button text: ", text);
      const urls = [...text.matchAll(/https?:\/\/[^\s]+/g)];
      if (urls.length > 0) {
        console.log("MCCILC: Creating links for URLs:", urls.join(", "));
        $el.html(
          text.replace(
            /https?:\/\/[^\s]+/g,
            (url) =>
              `<a style="color: white;" href="${url}" target="_blank">${url}</a>`
          )
        );
      }
    });
    console.log("Done!");
  }

  function createLinksForTestItem($item) {
    const $el = $item.find("> div pre div");
    const text = $el.text();
    console.log("MCCILC: Checking item text: ", text);
    const urls = [...text.matchAll(/https?:\/\/[^\s]+/g)];
      if (urls.length > 0) {
        console.log("MCCILC: Creating links for URLs:", urls.join(", "));
        $el.html(
          text.replace(
            /https?:\/\/[^\s]+/g,
              (url) =>
              `<a style="color: white;" href="${url}" target="_blank">${url}</a>`
          )
        );
      }
    console.log("Done!");
  };

  $("body").on("click", "button", function (el) {
    const $button = $(el.currentTarget);

    console.log(
      "MCCILC: Clicked button:",
      $button.text(),
      ", waiting for output to load..."
    );
    // Wait for $el.parent().find('> div pre span').length to be > 0
    const interval = setInterval(() => {
      const $span = $button.parent().find("> div pre span");
      if ($span.length > 0) {
        console.log("MCCILC: Output loaded, creating links...");
        clearInterval(interval);
        createLinksForStepButton($button);
      }
    }, 100);
    setTimeout(() => {
      clearInterval(interval);
    }, 5000);
  });

  $("body").on("click", "li", function (el) {
    const $li = $(el.currentTarget);

    console.log(
      "MCCILC: Clicked item:",
    );
    createLinksForTestItem($li);
  });

  // Wait for $("main > div > div > div > div > button").length to be > 0, then run createLinksForStepButton
  const interval = setInterval(() => {
    const $button = $("main > div > div > div > div > button");
    if ($button.length > 0) {
      clearInterval(interval);
      createLinksForStepButton($button);
    }
  }, 100);
})();