Script to replace announcement bar text with randomly picked text & link

Share & showcase
1

Script that changes announcement text everytime you reload page, my use case was sponsor display on all pages. I’m using source (v1.4.0) so your mileage may vary on other themes.

Setting the placeholder announcement

example
example696×719 33.2 KB

The script

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const choices = [
            { text: "Sponsor 1 is a supporter of mysite.com", url: "https://sponsor1.com/" },
            { text: "Sponsor 2 is a supporter of mysite.com", url: "https://sponsor2.com/" },
            { text: "Sponsor 3 is a supporter of mysite.com", url: "https://sponsor3.com/" },
            { text: "Sponsor 4 is a supporter of mysite.com", url: "https://www.sponsor4.com/" },
            { text: "Sponsor 5 is a supporter of mysite.com", url: "https://www.sponsor5.com/" }
        ];

        const randomIndex = Math.floor(Math.random() * choices.length);
        const selected = choices[randomIndex];

        // Wait for the announcement bar span to render fully
        const interval = setInterval(() => {
            const announcementSpan = document.querySelector('#announcement-bar-root .gh-announcement-bar-content span');

            if (announcementSpan && announcementSpan.textContent.trim() === "Supporter Bar") {
                // Replace the placeholder text with a clickable link
                announcementSpan.innerHTML = `<a href="${selected.url}" target="_blank" style="text-decoration: none; color: inherit;">${selected.text}</a>`;
                clearInterval(interval); // Stop checking once the element is updated
            }
        }, 100); // Check every 100ms
    });
</script>

Used GPT to make this work, so it might not be the best or most efficient way. But it works! :grinning:

1 Like