Background

I’m trying to create a Chrome extension that blocks a particular website (e.g., YouTube) temporarily, by showing a countdown timer (timer variable in the content script below). At the end of the countdown, a few buttons appear to show the user some options. My background script has an onUpdated event listener and checks for the website URL before sending a message to my content script to insert the HTML elements (timer, buttons, etc.).

Notes

• I want the countdown to be triggered again if the user tries to refresh the page, and it’s working so far. (i.e., for my onUpdated event listener, I don’t check for changeInfo.url since no url changes in a refresh). When a content script is subsequently re-injected, I include checks to try and remove any of the DOM elements related to my extension before re-inserting them.

• (Unsure if relevant) I use error handling to send the message because sometimes there is a delay before the content-script is loaded and that needs to happen before I can send a message.

• I’ve tried looking for ways to detect auto-redirects (not user initiated), but there doesn’t seem to be any obvious answer.

Problem

While my code works in most cases, here’s the only exception so far: when I open a YouTube video with e.g., this link: https://www.youtube.com/watch?v=ghz71MyzSto&ab_channel=cosmic_drifter_007, YouTube automatically redirects the page and modifies the URL to remove the ab_channel parameter. This causes multiple messages to be sent to the content script in a short burst of time. When this happens, the buttons that are supposed to appear respond to the first instance of the countdown value, therefore giving the appearance of popping up before the visible countdown (which is of the final instance of the countdown element) hits zero.

The optimal behavior in this case is to only trigger the countdown/extension experience once throughout the short burst of time when the URL redirects (I’ve seen it’s possible on other chrome extensions like one sec), but I’m happy to hear any suggestions!

Code

// background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {    
    if (tab.active && changeInfo.status=="complete" && tab.url.startsWith("https://www.youtube.com") {
            
                // try sending a message to content-script.js to start intervention
                try {
                    const response = chrome.tabs.sendMessage(tab.id, {greeting: "start intervention"});
                }
                catch {
                    setTimeout(() => {
                        const response = chrome.tabs.sendMessage(tab.id, {greeting: "start intervention"});

                    }, 3000); // try sending a message to content-script.js    
                }
                
                // try injecting some CSS code
            
    }
});

// content-script.js

chrome.runtime.onMessage.addListener(
    function(request, sender) {
      if (request.greeting === "start intervention")
        
        // remove existing time management banner, appears to work fine
        if (document.getElementById("time-management-banner")){ 
            document.getElementById("time-management-banner").  textContent = '';
            document.getElementById("time-management-banner").remove();
            console.log("time-management-banner removed");
        }
        else {console.log("time-management-banner not detected")}

        // create and insert all elements 
        banner = document.createElement("div");
        banner.id = 'time-management-banner';
        banner.className = 'time-management';
        banner.innerHTML = "<b>Stop and take a deep breath.</b>";
        document.body.appendChild(banner);

        // remove existing countdown and replace to reset timer, appears to work fine
        if (document.getElementById("time-management-timer")){ 
            document.getElementById("time-management-timer").remove();
            console.log("removed timer element");
        }
        else {console.log("timer element not detected");}
        
        // set up timer
        const timer = document.createElement("div");
        timer.className = "time-management";
        timer.id = "time-management-timer";
        var secondsLeft = 3;
        banner.appendChild(timer);
        
        var downloadTimer = setInterval( 
            () => {

                // when timer runs out
                if (secondsLeft <= 0) {
                    
                    // reset timer
                    clearInterval(downloadTimer);
                    
                    // try removing existing buttons, appears to work fine
                    if (document.getElementsByClassName("time-management-button")){ 
                        const elements = document.getElementsByClassName("time-management-button");
                        while(elements.length>0){
                            elements[0].parentNode.removeChild(elements[0]);
                        }
                    }
                    else {console.log("buttons did not need to be removed")};

                    const proceed_button = document.createElement("button");
                    const exit_button = document.createElement("button");
                    
                    // add button text

    
                    // set class to time-management for CSS and removal
                    proceed_button.className = "time-management-button";
                    exit_button.className = "time-management-button";
                    
                    // set id (truncated)

                    // insert buttons
                    banner.appendChild(proceed_button);
                    banner.appendChild(exit_button);

                    // add button actions (truncated)
                    
                }
                timer.textContent = secondsLeft;
                timer.value = secondsLeft;
                secondsLeft -= 1;

            }, 
            timeout=1000 // interval of 1 second
        )
    
    }
)

I’ve tried to follow the stack overflow guidelines and looked unsuccessfully for similar questions, please let me know if I should modify my question!