Auth

Integrations

·

JavaScript

I just shipped v1.4 of Pocket Pet, a browser companion extension. Thought the tech might interest this sub:

Pure vanilla JS, no React/Vue/anything
Shadow DOM for complete style isolation from host pages
Chrome MV3 with service worker + importScripts wrapper pattern
Supabase for optional auth (Google OAuth via chrome.identity.launchWebAuthFlow) and sync
CSS custom properties for 5 theme system with structural personality (not just color swaps)
Per-site position memory via hostname-keyed storage
Bird pet that flies using CSS transitions + transitionend (not setTimeout survives tab backgrounding)
Chameleon pet that samples surrounding page colors via elementFromPoint + canvas pixel reading

Biggest lesson: drop-shadow traces PNG alpha contours perfectly, used this for aura effects instead of background elements.

Happy to go deeper on any of these.

Pocket pet

How to help

ShinigamiAM shared insights from developing a Chrome extension called Pocket Pet using vanilla JavaScript, Shadow DOM, and Supabase for authentication and sync. The extension features a unique theme system and per-site position memory. The author highlights the use of drop-shadow for aura effects and invites further discussion on the technical aspects.

Help on Reddit

Replies (3)

You hit all the check boxes but one, did you use AI?

btc-lostdrifter0001·4/6/2026, 9:13:04 PM

AI as in? Inside the extension? There's no AI integration rn

OP

ShinigamiAM·4/6/2026, 9:21:20 PM

The Shadow DOM + vanilla JS combo is underrated most people reach for React out of habit. The chameleon color sampling via canvas pixel reading is a clever touch. How's the performance holding up on heavier pages?

MankyMan00998·4/10/2026, 11:20:20 AM