Blog

If you’ve ever gone to YouTube to catch up on a game you missed, you probably know the pain. You open the video, scroll down to check the comments (big mistake), and there it is, someone casually spoiling the final score or the big moment before you even hit play.

As a developer who watches way too much sports content on YouTube, I figured there had to be a better way. So I built one.

What I Built

It’s a Chrome extension that automatically hides YouTube comments if they contain sports spoilers. It’s not just a keyword blocker, it actually uses AI to read the comments, understand the context, and figure out which ones might ruin the game for you. Safe comments show up like normal, but potential spoilers stay hidden.

A badge on the extension icon also keeps a running count of how many spoilers were blocked, just so you know it’s doing something.

Why I Made This

I built this because I wanted it for myself, plain and simple. I love watching condensed games, post-game breakdowns, and highlight reels after the fact, but I got tired of spoiling the results just because my eyes wandered into the comments section.

I know I’m not the only one who watches games this way, so I figured this might be useful to others too.

How It Works, And Some Code to Show It

Step 1: Hiding Comments by Default

When you first load a YouTube video, the extension hides all the comments immediately. It does this using a content script, which runs directly inside the YouTube page and manipulates the DOM.

Here’s the snippet that hides the whole comment section right off the bat:

const commentsContent = document.querySelector('#sections.ytd-comments #contents');
if (commentsContent) {
  commentsContent.style.visibility = 'hidden';
}

This way, no comments are visible until they’ve been checked.

Step 2: Sending Comments to AI for Spoiler Detection

The extension collects all the comments, grabs the video title (because context matters), and sends everything to OpenRouter’s AI. The AI’s job is to figure out which comments are spoilers based on the content.

The background service worker handles this:

const prompt = `
You are a spoiler detection assistant. Your job is to identify which comments under a YouTube sports video contain spoilers that reveal the result of the game or key moments.

Please return a JSON object with:
- "spoilerIndices": An array of integers representing the indices of comments that contain spoilers.
- "reasoning": A short explanation (1-2 sentences) explaining how you determined which comments were spoilers.

Video Title: ${title}

Comments:
${comments.map((text, idx) => `${idx}: ${text}`).join('\n')}
`;

This structured prompt gives the AI enough context to understand what kind of spoilers we care about, not general spoilers, but sports-specific spoilers.

Step 3: Revealing Safe Comments, Hiding Spoilers

When the AI’s response comes back, the extension reveals non-spoiler comments and leaves the spoilers hidden.

Here’s the basic logic:

commentsData.forEach((commentData, index) => {
  if (!spoilerIndices.includes(index)) {
    commentData.element.style.display = ''; // Show non-spoilers
  } else {
    commentData.element.style.display = 'none'; // Keep spoilers hidden
  }
});

This way, you only see safe comments, but if you’re curious (or reckless), you could still unhide all comments manually.

Step 4: Keeping Track With a Badge

Since I wanted to know how many spoilers were being caught, I added a badge to the extension icon itself. Each tab tracks its own spoiler count.

chrome.action.setBadgeText({ text: count.toString(), tabId });
chrome.action.setBadgeBackgroundColor({ color: '#CC0000', tabId });

It’s a small touch, but I like having that little reminder that the extension is quietly protecting me from spoilers.

What Makes This Different

The key thing here is the use of AI-powered detection, not just keyword filters. Simple filters would miss context and either block way too much or not enough. By feeding the AI both the video title and the actual comments, it can make smarter decisions.

For example, if the video is titled “NBA Finals Game 7 Highlights,” the AI knows that comments talking about “the buzzer beater” or “the comeback” could easily be spoilers.

The extension is also built to be lightweight. It only activates on YouTube watch pages, and it processes comments in batches so it’s not constantly hammering the page or the AI service.

A Few Final Thoughts

This isn’t some massive commercial project. It’s just something I built for myself because I was tired of getting burned by spoilers. I figured it might be worth sharing in case anyone else has the same problem.

It’s not perfect, AI will always have false positives and misses, but even with that, it’s already made my YouTube viewing a lot more enjoyable. I don’t feel like I have to sprint past the comments section every time I want to watch highlights.

Technical Stack (For My Fellow Developers)

• Manifest V3 Chrome Extension
• Content script for comment hiding and DOM work
• Background service worker for AI requests and badge updates
• OpenRouter AI for spoiler detection
• Options page to set your API key and enable debugging

If you’re into building browser extensions or messing with AI, I’d love to hear your thoughts. I’m always open to feedback or ideas for making it better.

That’s it for now! Just a small project that solved a real problem for me. If it helps anyone else, even better. Here’s a link to the project on Github.