Adds a "copy" icon next to each Docker image tag on GitHub pages that list published Docker images.
// ==UserScript==
// @name GitHub Docker Image Tag Copy Button
// @description Adds a "copy" icon next to each Docker image tag on GitHub pages that list published Docker images.
// @version 2
// @match https://github.com/*
// @grant GM_setClipboard
// @require https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js
// @license MIT
// @author Howard D. Lince III
// @supportURL https://twitter.com/HowardL3
// @namespace https://github.com/howard3
// ==/UserScript==
(function() {
'use strict';
function addCopyButton(tagEl) {
// Create a "copy" button with an icon
const copyBtn = document.createElement('button');
copyBtn.classList.add('btn', 'btn-sm');
copyBtn.style.marginRight = '10px';
copyBtn.style.cursor = 'pointer';
const copyIcon = document.createElement('i');
copyIcon.classList.add('fas', 'fa-copy');
copyIcon.style.marginRight = '5px';
// Add the icon to the button
copyBtn.appendChild(copyIcon);
// Add a click event listener to copy the tag text to the clipboard
copyBtn.addEventListener('click', () => {
GM_setClipboard(tagEl.textContent.trim());
});
// Insert the "copy" button next to the Docker image tag
tagEl.parentNode.insertBefore(copyBtn, tagEl.nextSibling);
}
function addCopyButtons(node) {
// Find all elements that contain Docker image tags with links
const tagEls = node.querySelectorAll('.Box-row a.Label');
if (tagEls.length > 0) {
// Loop through each Docker image tag element and add a "copy" button with an icon
tagEls.forEach(addCopyButton);
}
}
// Add copy buttons when the page first loads
addCopyButtons(document);
// Watch for changes to the DOM using a MutationObserver
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
for (const addedNode of mutation.addedNodes) {
// Query the added node for Docker image tags with links and add copy buttons to them
addCopyButtons(addedNode);
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();