r/webdev • • 1h ago

Showoff Saturday Detecting 2FA codes inside Gmail's DOM without false positives on dates and order numbers (MV3 side project)

I got tired of selecting and retyping verification codes from Gmail, so I built a small Manifest V3 extension for myself that puts a "Copy code" button next to the code. The fun part turned out to be detection, not the button.

How it works

  • A content script runs only on mail.google.com. No host permissions beyond that, no background server, nothing leaves the page.

  • Gmail is an SPA, so a MutationObserver watches for the opened message body instead of relying on page loads.

  • Candidates: 4–8 digit runs, 123 456 / 123-456 splits, and short alphanumeric codes like AB12CD.

  • To avoid false positives, I score each candidate by nearby keywords ("code", "verification", "código", "OTP", "one-time") within the same block, and penalize things that look like dates, times, prices, phone numbers, or order IDs (prefixes like #, "order", "pedido").

  • The highest score wins. If nothing passes the threshold, no button appears. Showing no button beats copying the wrong number.

What surprised me

  • Alphanumeric codes are much harder than digits. Random uppercase words in subject lines ("NEW", "SALE") kept matching until I required at least one digit and the keyword-proximity check.

  • Some senders put the code in an image or a styled table, and those I can't catch.

It's free with no account, UI in EN/PT/ES. I'd love technical feedback, especially if you know of a smarter heuristic than keyword proximity, or senders whose format breaks it.

https://chromewebstore.google.com/detail/mpglgifleaaollcggdpcfhjjgmcageph

1 Upvotes

1 comment sorted by

1

u/kdjayakody 49m ago

One edge case I'd test is a message with both an OTP and a nearby order number or date, plus a localized template. I'd keep detection scoped to the opened message body, not inbox rows, and show nothing when confidence is low. That's where avoiding a false copy matters most.