There are a bunch of sophisticated ways to obfuscate it, but it basically boils down to:

    <script>
        setInterval(function() {
            try {
                let before = new Date().getTime();

                // This will pause the program execution if debugging is enabled.
                // If debugging isn't enabled this statement is a no-op.
                debugger;

                let after = new Date().getTime();

                // Detect if the program was paused or not.
                if (after - before > 0.01) {
                    // > 10ms difference?  The program was (most likely) paused by the debugger.
                    document.body.innerHTML = "<h1>Debugging started</h1>";
                }
            } catch(e) {}
        }, 1000);
    </script>

There are some other ways to detect it by implementing various prototype methods and continually logging the object to the console. The methods are only invoked if the dev console is opened.

I don’t have a link offhand but I’ve seen this code while debugging some pirate sports streams. The next upcoming one to check would be an NBA game from “nba bite” (Google it, it’s the offshoot of the banned sports streaming subreddits.)

I think you’re probably right that it wouldn’t detect presence of your extension, since that code runs in its own context and I assume doesn’t actually call the debugger. If your extension injects a script into the page, then that could be detected with this technique or similar.

I'm not familiar with what happens when `debugger` is eval'd while attached using the debugger API. If it ignores it, you're fine.

This method and a few others are described in this paper: https://www.usenix.org/system/files/sec21-musch.pdf

The debugger timing method is described on page 10.