Tampermonkey

Tampermonkey is een Chrome-extensie waarmee je eigen JavaScript-scripts kunt uitvoeren op websites. Binnen Flooris gebruiken we dit om extra knoppen toe te voegen aan ClickUp-taken en GitHub Pull Requests, zodat veelgebruikte informatie snel te kopiëren is.

Toegang & Credentials

Gegeven	Details
Officiële URL	tampermonkey.net
Documentatie	tampermonkey.net/documentation

---

Installatie

Vereiste

Installeer eerst de Tampermonkey Chrome extensie via de Chrome Web Store.

Na installatie van Tampermonkey kun je de onderstaande scripts toevoegen via Tampermonkey Dashboard → Nieuw script.

---

ClickUp Copy buttons

Voegt extra kopieer-knoppen toe aan een ClickUp-taak zodat je de taak-ID, naam en URL snel kunt kopiëren in verschillende formaten.

Beschikbare knoppen

Knop	Gekopieerde tekst
ID - Name	BR-1234 Naam van de taak
ID - Name (url)	BR-1234 Naam van de taak (https://app.clickup.com/t/...)
MarkDown	[BR-1234](https://app.clickup.com/t/...) Naam van de taak

Userscript

Kopieer onderstaande code en plak deze in een nieuw Tampermonkey-script.

// ==UserScript==
// @name         ClickUp Copy buttons
// @namespace    https://flooris.nl/
// @version      4.0
// @description  Betere ClickUp omschrijving kopieren
// @author       Arthur
// @match        https://app.clickup.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=clickup.com
// @grant        GM_setClipboard
// @grant        GM_addElement
// @updateURL    https://flooris.nl/assets/clickup.js
// @downloadURL  https://flooris.nl/assets/clickup.js
// ==/UserScript==

(function () {
  "use strict";

  // ─── State ───────────────────────────────────────────────────────────────────

  let lastKnownTaskId = null;
  let currentTaskId   = null;

  // ─── DOM Queries ─────────────────────────────────────────────────────────────

  function getTaskIdElement() {
    return document.querySelector("[data-test='task-view-task-label__taskid-button']");
  }

  function getTaskIdButtonLocation() {
    return document.querySelector("cu-task-view-task-label");
  }

  function getButton(dataInfo) {
    return document.querySelector(`[data_info='${dataInfo}']`);
  }

  // ─── Task Data ───────────────────────────────────────────────────────────────

  function getTaskId() {
    const el = getTaskIdElement();
    if (!el) return null;

    const text = el.innerText?.trim();
    if (text && text !== "Copied!") {
      lastKnownTaskId = text;
    }

    return lastKnownTaskId;
  }

  function getTaskName() {
    return document.querySelector(".cu-task-title__title")?.value ?? null;
  }

  function getTaskUrl() {
    return window.location.href;
  }

  // ─── Copy Text Formatters ────────────────────────────────────────────────────

  function textIdName() {
    return `${getTaskId()} ${getTaskName()}`;
  }

  function textIdNameUrl() {
    return `${getTaskId()} ${getTaskName()} (${getTaskUrl()})`;
  }

  function textMarkdown() {
    return `[${getTaskId()}](${getTaskUrl()}) ${getTaskName()}`;
  }

  // ─── Angular ngContent Helper ────────────────────────────────────────────────

  function getNgContentAttrName(element) {
    if (!element) return null;

    for (const attr of element.attributes) {
      if (attr.name.startsWith("_ngcontent")) {
        return attr.name;
      }
    }

    return null;
  }

  function getTaskIdNgAttrName() {
    return getNgContentAttrName(getTaskIdElement());
  }

  // ─── Button Factory ───────────────────────────────────────────────────────────
  //
  // Buttons are created once. On task change, only the event listeners are
  // rebound. A `data-listener-bound` guard prevents listener stacking.

  function createButton(dataInfo, label) {
    const location = getTaskIdButtonLocation();
    if (!location) return;

    const ngAttr = getTaskIdNgAttrName();

    const btnAttrs = {
      data_info: dataInfo,
      class: "cu-task-id-button ng-star-inserted",
    };

    if (ngAttr) btnAttrs[ngAttr] = null;

    GM_addElement(location, "button", btnAttrs);

    const btn = getButton(dataInfo);
    if (!btn) return;

    const spanAttrs = {
      textContent: label,
      class: "cu-task-view-task-label__button-label",
    };

    if (ngAttr) spanAttrs[ngAttr] = null;

    GM_addElement(btn, "span", spanAttrs);
  }

  function ensureButtons() {
    if (!getButton("id-task")) {
      createButton("id-task", "ID - Name");
    }

    if (!getButton("id-task-url")) {
      createButton("id-task-url", "ID - Name (url)");
    }

    if (!getButton("context-md")) {
      createButton("context-md", "MarkDown");
    }
  }

  // ─── Listener Binding ────────────────────────────────────────────────────────
  //
  // Uses a `data-listener-bound` attribute as a guard so listeners are never
  // stacked. On task change the attribute is cleared and listeners are rebound.

  function bindListener(dataInfo, textFn) {
    const btn = getButton(dataInfo);
    if (!btn) return;

    if (btn.dataset.listenerBound) return;

    btn.dataset.listenerBound = "1";
    btn.addEventListener("mouseup", () => {
      const text = textFn();
      if (text) GM_setClipboard(text, "text");
    });
  }

  function bindAllListeners() {
    bindListener("id-task",     textIdName);
    bindListener("id-task-url", textIdNameUrl);
    bindListener("context-md",  textMarkdown);
  }

  function rebindAllListeners() {
    ["id-task", "id-task-url", "context-md"].forEach((dataInfo) => {
      const btn = getButton(dataInfo);
      if (btn) delete btn.dataset.listenerBound;
    });

    bindAllListeners();
  }

  // ─── Intervals ───────────────────────────────────────────────────────────────

  // Ensures buttons exist and listeners are bound. Runs every second.
  setInterval(() => {
    if (!getTaskId()) return;

    ensureButtons();
    bindAllListeners();
  }, 1000);

  // Detects task navigation and rebinds listeners when the task ID changes.
  setInterval(() => {
    const id = getTaskId();
    if (!id) return;

    if (id !== currentTaskId) {
      currentTaskId = id;
      rebindAllListeners();
    }
  }, 500);
})();

---

GitHub add ClickUp buttons

Voegt knoppen toe aan de sidebar van een GitHub Pull Request om ClickUp-taken snel te openen en beschrijvingen te kopiëren.

Beschikbare knoppen

Knop	Functie
Refresh ClickUp Links	Vernieuwt de ClickUp-links naast de commits
Open all ClickUp Links	Opent alle unieke ClickUp-taken in nieuwe tabbladen
Copy all GitHub descriptions	Kopieert alle commit-beschrijvingen gesorteerd naar je klembord

Werkwijze

Het script herkent automatisch ClickUp task-ID's (bijv. BR-1234) in commit-berichten en voegt direct een klikbare ClickUp-link toe naast elke commit.

Userscript

Kopieer onderstaande code en plak deze in een nieuw Tampermonkey-script.

// ==UserScript==
// @name         GitHub add ClickUp buttons
// @namespace    https://flooris.nl/
// @version      1.0
// @description  Betere ClickUp omschrijving kopieren
// @author       Arthur
// @match        https://github.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @grant        GM_setClipboard
// @grant        GM_addElement
// ==/UserScript==

(function() {
    'use strict';

    const regex = /\b([A-Z0-9-]{2,10}-\d+)\b/;
    const sidebar = document.getElementById('partial-discussion-sidebar');
    const clickUpBaseUrl = 'https://app.clickup.com/t/24474727/';

    if (sidebar) {
        GM_addElement(sidebar, 'button', {
            class: 'Button--secondary Button--small Button Button--fullWidth mt-3',
            type: 'button',
            textContent: 'Refresh ClickUp Links',
            data_info: 'clickup_refresh_links',
        });

        document.querySelectorAll("[data_info='clickup_refresh_links']")[0].addEventListener("mouseup", (event) => {
            removeAllLinks();
            addAllLinks();
        }, false);


        GM_addElement(sidebar, 'button', {
            class: 'Button--secondary Button--small Button Button--fullWidth mt-3',
            type: 'button',
            textContent: 'Open all ClickUp Links',
            data_info: 'clickup_open_all_links',
        });

        document.querySelectorAll("[data_info='clickup_open_all_links']")[0].addEventListener("mouseup", (event) => {
            openAllUniqueClickUpTasks();
        }, false);


        GM_addElement(sidebar, 'button', {
            class: 'Button--secondary Button--small Button Button--fullWidth mt-3',
            type: 'button',
            textContent: 'Copy all GitHub descriptions',
            data_info: 'copy_all_github_descriptions',
        });

        document.querySelectorAll("[data_info='copy_all_github_descriptions']")[0].addEventListener("mouseup", (event) => {
            copyAllGitHubDescriptions();
        }, false);
    }

    addAllLinks();

    function addAllLinks()
    {
        const commits = document.querySelectorAll('.Link--secondary.markdown-title');
        commits.forEach(function(commit) {
            const commitDiv = commit.parentElement.parentElement;

            const match = commit.innerText.match(regex);
            if (match) {
                GM_addElement(commitDiv, 'a', {
                    href: clickUpBaseUrl + match[1],
                    target: '_blank',
                    textContent: 'ClickUp',
                    class: 'cu-task-view-task-label__button ng-star-inserted',
                    data_info: 'clickup_easy_open_link',
                    onclick: 'javascript:openWindow(this.href);return false;',
                });
            }
        });
    }

    function removeAllLinks()
    {
        document.querySelectorAll("[data_info='clickup_easy_open_link']").forEach(function(clickupLink) {
            clickupLink.remove();
        });
    }

    function getAllUniqueClickUpTaskIds()
    {
        let clickupTaskIds = [];
        const commits = document.querySelectorAll('.Link--secondary.markdown-title');
        commits.forEach(function(commit) {
            const commitDiv = commit.parentElement.parentElement;

            const match = commit.innerText.match(regex);
            if (match) {
                clickupTaskIds.push(match[1]);
            }
        });

        return [...new Set(clickupTaskIds)];
    }

    function openAllUniqueClickUpTasks()
    {
        const clickUpTaskIds = getAllUniqueClickUpTaskIds();
        clickUpTaskIds.forEach(function (taskId) {
            setTimeout(function(){
                window.open(clickUpBaseUrl + taskId, "_blank");
            }, 500);
        });
    }

    function getAllGitHubCommitDescriptions()
    {
        const descriptions = [];
        const commits = document.querySelectorAll('.Link--secondary.markdown-title');

        commits.forEach(function(commit) {
            descriptions.push(extractTextByRule(commit.title));
        });

        return descriptions;
    }

    function extractTextByRule(text)
    {
        const lines = text.split('\n');
        const startIndex = 2;

        return lines.slice(startIndex).join('\n');
    }

    function copyAllGitHubDescriptions()
    {
        GM_setClipboard([...new Set(getAllGitHubCommitDescriptions())].sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base', caseFirst: 'false' })).join('\n'), 'text');
    }
})();