salembeats-github-gist-userscript-installer-highlight.user.js

// ==UserScript==
// @name         Salembeats GitHub-Gist Userscript Verifier + Installer Highlight
// @namespace    salembeats
// @version      1.1
// @description  Point out the "raw" button as an "install button" on Salembeats' GitHub, when appropriate.
// @author       Cuyler Stuwe (salembeats)
// @match        https://gist.github.com/salembeats/*
// @grant        none
// ==/UserScript==

let globals = {
	BUTTON_SELECTOR: ".file-actions a[href$='.user.js']",
	BUTTON_DARK_COLOR: "#5397fe",
	BUTTON_LIGHT_COLOR: "white",
	BUTTON_OUTLINE_OFFSET_TIGHT: "5px",
	BUTTON_OUTLINE_OFFSET_LOOSE: "15px",
	STYLE_DECLARATIONS: `
        background: white;
        outline: 3px solid #5397fe;
        -moz-outline-radius: 2px;
        animation: glowing-button 1s infinite ease-out;
    `,
	VERIFICATION_BADGE_MESSAGE: `👍 Verified userscript by Cuyler Stuwe (salembeats)`,
};

function insertStyles() {
	document.body.insertAdjacentHTML('beforeend', `
        <style>
            @keyframes glowing-button {
                0% {
                    background-color: ${globals.BUTTON_DARK_COLOR};
                    outline-offset: ${globals.BUTTON_OUTLINE_OFFSET_LOOSE};
                }

                50% {
                    background-color: ${globals.BUTTON_LIGHT_COLOR};
                    outline-offset: ${globals.BUTTON_OUTLINE_OFFSET_TIGHT};
                }

                100% {
                    background-color: ${globals.BUTTON_DARK_COLOR};
                    outline-offset: ${globals.BUTTON_OUTLINE_OFFSET_LOOSE};
                }
            }
            ${globals.BUTTON_SELECTOR} {
                ${globals.STYLE_DECLARATIONS}
            }
            .verification-badge-message {
                display: inline-block;
                margin-right: 20px;
            }
        </style>
    `);
}

function getDownloadButton() {
	return document.querySelector(globals.BUTTON_SELECTOR);
}

function main() {
	let downloadButton = getDownloadButton();
	insertStyles();
	if(!downloadButton) {return;}
	downloadButton.innerText = "Install Userscript";
	downloadButton.insertAdjacentHTML("beforebegin", `<span class="verification-badge-message">${globals.VERIFICATION_BADGE_MESSAGE}</span> `);
}

main();