Dramatic

Inspiration

We both love anime, film, and internet culture — but realized many people miss subtle references, memes, and easter eggs in shows.

Watching something like JoJo, Breaking Bad, or My Hero Academia, and not getting the reference? Painful.

We wanted to build a tool that dramatically explains cultural references — instantly.

What it does

Dramatic is a Chrome extension that lets users:

Automatically decode it with a short, fun explanation

Show the origin (anime, movie, meme, etc.) with context + links

Combines manual curated entries with Wikipedia API fallback

Designed to be viral, fun, and instantly useful for media lovers

How we built it

Frontend (popup UI): React + Vite, styled with custom CSS and animations

Backend: Node.js + Express API, handles queries and returns curated or wiki-based data

Content Script: Captures selected text on the page and passes it to the popup

Messaging System: chrome.runtime.sendMessage() connects the content script to the popup

Fallback Logic: Checks our curated JSON first, then Wikipedia API

Challenges we ran into

Accessing subtitle text from streaming platforms (like Netflix) is tough due to sandboxing

Couldn't rely on live subtitle elements → switched to text selection instead

Managing popup behavior + Chrome message passing took tweaking

Working with async content and keeping the UI responsive under time pressure

Accomplishments that we're proud of

Full-stack Chrome extension built from scratch — backend, frontend, and extension logic all wired up

Curated + fallback search works fast and clean

Dramatic, stylish UI that fits the theme perfectly

We made something genuinely useful and fun for the anime/pop culture community

What's next for Dramatic

Add GPT fallback for smarter and funnier explanations

Integrate with Fandom API for deeper lore and fandom-specific entries

Built With

• css3
• express.js
• manifest.json
• node.js
• react
• restapi