Contextual Ad & Distraction Filter (CADF)

• 

  Adblocker

🧠 Contextual Ad & Distraction Filter (CADF): My Journey to a Smarter Web

About the Project: Building a Better Digital Experience Have you ever found yourself deep in an article, totally immersed, only to be jolted back to reality by a giant pop-up demanding your email? Or seen an ad for something you just bought, following you around the internet like a digital shadow? Yeah, me too. That frustration, that constant battle against digital clutter and intrusive marketing, was the spark for the Contextual Ad & Distraction Filter (CADF).

The CADF isn't just another ad blocker. I attempt to use the incredible power of Google Chrome's new built-in AI to make the web genuinely smarter, more respectful, and ultimately, more useful for everyone. My goal was to create an extension that could distinguish between genuinely helpful sponsored content and aggressive, irrelevant advertisements, all while keeping your data private

What Inspired Me: The Web's Great Dilemma Honestly, the inspiration came from a place of both annoyance and empathy. As a user, I'm tired of the digital assault. The constant tracking, the irrelevant ads, the pop-ups that feel like a mugging. It detracts from the sheer joy of discovering new information or engaging with content. But then, there's the other side: publishers. I understand that content isn't free to create. Websites need revenue to survive, and for many, ads are that lifeline. Traditional ad blockers, while great for the user, can inadvertently cut off that oxygen supply, leading to a kind of digital cold war between users and content creators. I kept thinking, "There has to be a better way." What if we could have the best of both worlds? A web where users aren't harassed, and publishers can still monetize in a respectful, relevant way. The announcement of Chrome's built-in AI, particularly the Prompt API and Summarizer API, felt like a lightbulb moment. "This," I thought, "is how we bridge that gap." The idea of client-side AI, doing all this heavy lifting right in my browser without sending my data to a server, was the privacy-first solution I'd been dreaming of. It felt like the perfect challenge to tackle: can AI on the device mediate this digital dilemma?

What I Learned: Beyond Simple Filters

This project taught me so much, both technically and philosophically.

The Nuance of "Ad": What I learned most profoundly is that "ad" isn't a monolithic concept. A genuine recommendation for a relevant product from a creator you trust is very different from a flashing banner for something completely unrelated. AI allows us to move beyond binary "block/allow" to a spectrum of "intrusiveness" and "relevance." The Power of Client-Side AI: Working with Gemini Nano via the Prompt and Summarizer APIs was eye-opening. The ability to perform sophisticated NLP tasks like classification and summarization on the device, in real-time, without latency or privacy concerns, is a game-changer. It fundamentally shifts what's possible in browser extensions. I learned to structure prompts effectively for classification tasks, understanding that the clearer the instructions to the AI, the better the output. DOM Manipulation at Scale: Learning to parse and understand the structure of complex web pages dynamically was a huge part of this. Identifying potential ad containers, extracting their text, and understanding their visual properties (CSS positions, sizes, animations) is intricate work.

How I Built My Project: A Symphony of AI and Web Tech

Building CADF felt like orchestrating a small, intelligent agent directly within the browser. Here's the simplified breakdown:

1. The Listener (Chrome Extension API): First, I set up event listeners using Chrome's extension APIs to detect when new elements were added to the DOM or when existing elements changed suspiciously (e.g., suddenly appearing with position: fixed or large dimensions). This was my "spider sense" for potential distractions.

2. The Brains (Built-in AI APIs):

   • Summarizer First: When a new page loaded, the first thing I did was feed the main article content (stripped of navigation and footers) into the Summarizer API. This gave my AI a high-level understanding of what the user was actually trying to read. This context ($\mathcal{C}$) was crucial for relevance checks later.
   • Prompt API - The Classifier: For every element flagged by my listener, I extracted its text content, relevant CSS properties, and its position on the screen. This data, combined with a clear prompt, went into the Prompt API. The prompt was carefully designed to ask:
     • "Based on these properties and text, is this an intrusive ad, a cookie banner, a newsletter signup, or a natural part of the content?"
     • "On a scale of 1 to 10, how intrusive is this element?"
     • "What action (block, hide, allow) should be taken?"
     • This gave me a classification and an intrusion_score ($S_i$).
   • Prompt API - The Relevancy Check: If an element was classified as "sponsored content" or a "native ad" (and not highly intrusive), I then fed its title/description and the page's summary ($\mathcal{C}$) back into the Prompt API. The question here was: "Is this sponsored content relevant to the main topic of the page?" This gave me a relevance_score ($S_r$).

3. The Decision Maker (JavaScript Logic): Based on the AI's output ($S_i$ and $S_r$), my JavaScript logic would then decide the fate of the element:

   • If $S_i > 7$: Block immediately. This catches the annoying pop-ups and full-screen overlays.
   • If $S_i \in [4, 7]$: Hide with a small, discreet toggle to reveal if needed. This handles less aggressive but still distracting elements.
   • If $S_i < 4$ and $S_r$ is "Irrelevant": Block. Why see a relevant ad for car insurance when you're reading about quantum physics?
   • If $S_i < 4$ and $S_r$ is "Relevant": Allow, but potentially re-label it for transparency using the Rewriter API.

4. The Transparency Enhancer (Rewriter API): For those few sponsored elements that passed all the AI checks for non-intrusiveness and relevance, I sometimes used the Rewriter API to prepend a simple, privacy-respecting "SPONSORED" label to their titles, ensuring complete transparency for the user. This was a "nice-to-have" but felt ethically important.

Challenges Faced: Pushing the Boundaries of Browser AI

Oh, the challenges! Building something brilliant within the confines of a browser is a dance between power and limitations.

1. Prompt Engineering for Consistency: Getting the Prompt API to consistently classify elements accurately was an iterative process. Crafting a prompt that provided enough context about HTML structure and visual cues without becoming too verbose or ambiguous was tough. For example, distinguishing a genuine "related article" section from a disguised ad often came down to fine-tuning the descriptive text sent to the prompt:

   • Initial prompt: "Is this an ad?" (Too vague)
   • Improved prompt: "Analyze the element with text '[Element Text]'. It has CSS position: fixed and z-index: 9999. Is this an intrusive ad or a core part of the page content? Score intrusiveness 1-10." (Much better)

2. Performance and Real-Time DOM Mutation: Analyzing the DOM in real-time, especially on complex pages with many elements, could be a performance bottleneck. I had to optimize my element selection logic and ensure that AI calls were batched or debounced efficiently to avoid slowing down page loads. The speed of the built-in AI was a lifesaver here, but careful JavaScript still mattered.

3. Balancing Specificity with Generality: I wanted the CADF to be smart enough to recognize a cookie banner (which shouldn't be blocked) from a newsletter pop-up (which often should be). This required careful crafting of my prompts and post-AI classification logic to handle these nuances, preventing over-blocking legitimate site functionality.

4. The "Grey Area" of Native Ads: The biggest philosophical and technical challenge was the "native ad" or "sponsored content" that looks like regular content. This is where the Summarizer API and Relevance Filter became indispensable. Without understanding the page's content, these highly contextual ads are almost impossible for traditional blockers to catch. Getting the AI to reliably determine "relevance" based on the page summary and ad text was a fascinating problem to solve.

Ultimately, the CADF project wasn't just about blocking ads; it was about reimagining the user's relationship with the web using cutting-edge, privacy-preserving AI. It was a challenging, rewarding journey, and I believe it points to a future where our browsers are not just viewers of content, but intelligent mediators of our digital experience.

Built With

• chromeextensionmanifestv3
• customobserver
• html5
• javascript
• promptapi
• rewriterapi
• summarizerapi
• vanillajs