Fix Copy Button on VS Code Marketplace for Firefox

fix-copy-button-on-vs-code-marketplace-for-firefox.js

// ==UserScript==
// @name         Fix Copy Button on VS Code Marketplace
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Fixes the "Copy" button on the VS Code Marketplace for Firefox by ensuring clipboard functionality works and adds a visual notification.
// @author       Marlen
// @match        https://marketplace.visualstudio.com/items*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=marketplace.visualstudio.com
// @grant        GM_setClipboard
// @run-at       document-body
// @updateURL    https://gist.githubusercontent.com/klondikemarlen/26ba2e275e1d32f37498cf4bbcf4d5cf/raw/fix-copy-button-on-vs-code-marketplace-for-firefox.js
// @downloadURL  https://gist.githubusercontent.com/klondikemarlen/26ba2e275e1d32f37498cf4bbcf4d5cf/raw/fix-copy-button-on-vs-code-marketplace-for-firefox.js
// ==/UserScript==

(function () {
    "use strict";

    function fixCopyButton() {
        const copyButtons = document.querySelectorAll(".copy-to-clipboard-button");
        if (!copyButtons.length) {
            console.warn("No copy buttons found.");
            return;
        }

        copyButtons.forEach((button) => {
            button.addEventListener("click", function (event) {
                event.preventDefault(); // Prevent default behavior
                
                // Find the corresponding input field inside the same container
                let container = button.closest(".vscode-command-container");
                if (!container) {
                    console.warn("No container found for copy button.");
                    return;
                }

                let inputField = container.querySelector(".vscode-command-input");
                if (!inputField) {
                    console.warn("No input field found to copy.");
                    return;
                }

                let textToCopy = inputField.value.trim();
                if (!textToCopy) {
                    console.warn("Nothing to copy.");
                    return;
                }

                try {
                    navigator.clipboard.writeText(textToCopy)
                        .then(() => {
                            console.log("Copied successfully!");
                            showNotification("Copied: " + textToCopy);
                        })
                        .catch((err) => {
                            console.warn("Clipboard API failed, using fallback.", err);
                            GM_setClipboard(textToCopy);
                            showNotification("Copied (fallback): " + textToCopy);
                        });
                } catch (err) {
                    console.error("Clipboard operation failed.", err);
                    GM_setClipboard(textToCopy);
                    showNotification("Copied (fallback method)");
                }
            });
        });

        console.log("Fix applied to all Copy buttons.");
    }

    function showNotification(message) {
        const notification = document.createElement("div");
        notification.innerText = message;
        notification.style.position = "fixed";
        notification.style.bottom = "20px";
        notification.style.right = "20px";
        notification.style.backgroundColor = "black";
        notification.style.color = "white";
        notification.style.padding = "10px";
        notification.style.borderRadius = "5px";
        notification.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";
        notification.style.fontSize = "14px";
        notification.style.zIndex = "1000";
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.remove();
        }, 2000);
    }

    // Run once on load
    fixCopyButton();

    // Observe for dynamic content updates
    const observer = new MutationObserver(fixCopyButton);
    observer.observe(document.body, { childList: true, subtree: true });
})();