I built a Chrome extension that catches every dark pattern trick on shopping sites. Here's exactly how.

carlos lopez — Fri, 19 Jun 2026 21:08:32 +0000

A few months ago I was about to buy a flight. The page showed "Only 2 seats left at this price" in red letters. I hesitated, then refreshed the page out of curiosity.

The counter said "Only 2 seats left" again. Same number. It had been resetting on every page load the whole time.

That's when I started cataloguing every trick I'd seen on shopping sites and built a Chrome extension that flags them automatically, in real time, on any page.

This isn't just my opinion — it's documented research

In 2019, Princeton and University of Chicago researchers scraped 11,000 shopping sites and found dark patterns on more than 1,250 of them. The FTC has since fined several companies specifically for fake countdown timers and pre-checked subscription boxes. This isn't a grey area anymore — it's a known, studied, and increasingly regulated practice.

The extension targets four categories that account for most of what's out there.

The four patterns

Fake urgency. Countdown timers that reset, "X people are viewing this" badges that never change, "only N left in stock" that's been static for a week.

Trap checkboxes. A checkbox for "Yes, sign me up for the newsletter" that's pre-checked and styled to blend into the page so you don't notice it.

Confirmshaming. The decline button reads "No thanks, I don't want to save money" instead of just "No thanks."

Psychological pricing. Prices ending in .99 or .95 designed to register as a lower price bracket than they are.

Why no AI this time

My phishing detector used Claude because language and intent are genuinely ambiguous — you need a model that understands context. Dark patterns are different. They're structural. A countdown timer either resets on reload or it doesn't. A checkbox is either pre-checked or it isn't. That's a DOM query, not a judgment call.

So this one runs entirely on regex and DOM inspection. No API calls, no latency, no cost per scan, works offline. Sometimes the boring solution is the correct one.

Detecting the urgency pattern

The core check looks for known urgency phrases and cross-references them against actual page state:

const URGENCY_PHRASES = [
/only \d+ left/i,
/\d+ people (are )?(viewing|watching)/i,
/offer ends in/i,
/flash sale/i,
/limited time/i
];

function isLikelyFake(element) {
const text = element.textContent;
const matchesPattern = URGENCY_PHRASES.some(p => p.test(text));
if (!matchesPattern) return false;

// Countdown timers that are actually fake almost always
// reset to the same value across page loads — checked via
// localStorage comparison against the previous visit
const stored = localStorage.getItem('dpd_seen_' + location.pathname);
const isStatic = stored === text;
localStorage.setItem('dpd_seen_' + location.pathname, text);

return matchesPattern && isStatic;
}

The trick isn't the regex — it's storing what you saw on the last visit and comparing. A genuine "3 left in stock" notice changes over time. A fake one doesn't.

Detecting trap checkboxes

This one's simpler — just check if a checkbox tied to subscription/marketing language defaults to checked:

const TRAP_KEYWORDS = /newsletter|subscribe|offers|insurance|protection plan/i;

function findTrapCheckboxes() {
return [...document.querySelectorAll('input[type="checkbox"]')]
.filter(cb => cb.checked && TRAP_KEYWORDS.test(getLabelText(cb)));
}

The hard part isn't the logic, it's getLabelText() — checkbox labels are wrapped, nested, or associated via for= attributes in about six different inconsistent ways depending on the site. That function ended up being three times longer than the detection logic itself.

Marking it on the page

Detection is half the work. The other half is surfacing it without breaking the page layout:

function markElement(el, label) {
const badge = document.createElement('span');
badge.textContent = '⚠ ' + label;
badge.style.cssText = position: absolute; background: #ef4444; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; z-index: 999999; pointer-events: none;;
el.style.position = 'relative';
el.appendChild(badge);
}

Catching dynamically injected patterns

Plenty of these patterns get injected after the initial page load — countdown widgets, exit-intent popups with fake scarcity. A one-time scan on page load misses them.

const observer = new MutationObserver(() => scanPage());
observer.observe(document.body, { childList: true, subtree: true });

This runs the same detection logic on every DOM mutation, debounced to avoid hammering the page on sites with constant re-renders (looking at you, infinite scroll feeds).

Results

I ran it against 30 ecommerce sites I had open in old tabs — a mix of fast fashion, flight booking, and a few subscription services. It flagged something on 19 of them. Two false positives: a genuinely real "low stock" indicator on a small print-on-demand shop, and a checkbox for "remember me" that the keyword filter misread as marketing consent.

Everything else held up. The fake countdown timers in particular were depressingly consistent — same number, every single reload.

FAQ

Is this legal to build and use?
Yes. You're reading and analyzing the public DOM of a page you're voluntarily visiting in your own browser. No data leaves your machine.

Does it slow down the pages I visit?
Not noticeably. The regex checks are cheap and the MutationObserver is debounced.

Can I use this in a commercial product?
The source is MIT licensed in the free version. Build on it.

Why not just block the patterns instead of flagging them?
Some checkboxes are legitimately useful (extended warranty you actually want). The goal is informed choice, not removing functionality you might want.

Full source code: https://carlosdevlop.gumroad.com/l/dark-patterns-detector

I built a phishing detector into Chrome using Claude AI. Here's exactly how.

carlos lopez — Wed, 17 Jun 2026 14:15:23 +0000

My mother called me last week. Someone had sent her an SMS
claiming to be from DHL, asking her to pay a £2.99 customs
fee via a link. She almost clicked it.

That was enough. I spent a weekend building a Chrome extension
that lets you paste any suspicious message and get an instant
verdict. Here's how it works.

The architecture (and why Cloudflare Workers)

The obvious approach is to call the Claude API directly from
the extension. Don't do this. Your API key lives in the
extension code, which anyone can extract from the Chrome Web
Store in about 30 seconds.

The right pattern: extension → Cloudflare Worker → Claude API.
The Worker lives server-side, holds the API key as an
environment variable, and acts as a proxy. Cloudflare's free
tier handles 100,000 requests/day, which is more than enough.

The Worker

export default {
async fetch(request, env) {
const { prompt } = await request.json();

const response = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: {
    'x-api-key': env.ANTHROPIC_API_KEY,
    'anthropic-version': '2023-06-01',
    'content-type': 'application/json'
  },
  body: JSON.stringify({
    model: 'claude-haiku-4-5-20251001',
    max_tokens: 350,
    messages: [{ role: 'user', content: prompt }]
  })
});

return response;

}
}

I'm using Haiku, not Opus. For a classification task like
this — is this phishing or not — Haiku is faster, 10x cheaper,
and gets the same result. Opus is overkill.

The prompt

After a dozen iterations, this is what actually works:

"You are an expert cybersecurity analyst specializing in
phishing detection. Analyze the following message and
determine if it is PHISHING, SUSPICIOUS, or LEGITIMATE.

Pay special attention to impersonation of financial
institutions (PayPal, Chase, Barclays), government agencies
(IRS, HMRC, DVLA), delivery services (UPS, FedEx, Royal Mail)
and major tech companies (Amazon, Apple, Microsoft, Netflix).

Respond ONLY in this format:
VERDICT: [PHISHING / SUSPICIOUS / LEGITIMATE]
CONFIDENCE: [High / Medium / Low]
SIGNALS: [comma-separated list, max 4]
ADVICE: [one clear action sentence]"

One thing worth knowing: parse only the VERDICT line,
not the whole response. Otherwise txt.includes("PHISHING")
will always return true because the word appears in the
template itself.

const verdictLine = txt.split('\n')
.find(l => l.startsWith('VERDICT:')) || '';
const isPhishing = verdictLine.includes('PHISHING');

Obvious in hindsight. Took me longer than I'd like to admit.

Results

Tested against 50 real phishing attempts. Claude got 48 right.
The two it missed were unusually well-crafted —
legitimate-looking domains with no obvious red flags.
For anything with a suspicious link or an urgency pattern,
it's essentially perfect.

If you want the full source code — extension, Worker, and
deploy instructions — I packaged it here: https://carlosdevlop.gumroad.com/l/ai-phishing-detector-bundle

DEV Community: carlos lopez

I built a Chrome extension that catches every dark pattern trick on shopping sites. Here's exactly how.

This isn't just my opinion — it's documented research

The four patterns

Why no AI this time

Detecting the urgency pattern

Detecting trap checkboxes

Marking it on the page

Catching dynamically injected patterns

Results

FAQ

I built a phishing detector into Chrome using Claude AI. Here's exactly how.

The architecture (and why Cloudflare Workers)

The Worker

The prompt

Results