DEV Community

Cover image for HTCPCP IYKYK: I Built a Browser Extension That Lets Dinosaurs Eat the Internet
John Munn
John Munn

Posted on

HTCPCP IYKYK: I Built a Browser Extension That Lets Dinosaurs Eat the Internet

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

I built Dinosaur Eats, a Chrome extension that sends a tiny pixel dinosaur onto any webpage and lets it eat the visible text line by line.

Not paragraphs.

Not sections.

Rendered lines.

It solves nothing. If anything, it introduces a new class of browser instability: active prehistoric content loss.

Click the toolbar icon and the extension scans the page for readable text. A dinosaur walks in, lines up the shot, and starts chewing through the page one visible line at a time until the whole thing looks like it got caught in a small but highly motivated extinction event.

Sometimes it’s one dinosaur.

Sometimes it escalates into a full stampede.

And because the challenge is HTCPCP IYKYK, I added a hidden protocol joke.

If the extension is active and you type 418, the dinosaurs mutate into teapotsaurs.

Type 814 and they switch back.

That was the moment I knew the project had crossed from “browser prank” into “deeply respectful nonsense.”

One-line pitch

A tiny dinosaur enters your browser and eats the visible text, but typing 418 mutates it into a teapotsaur because RFCs deserve whimsy too.

Demo

Code

Source code: https://github.com/Tawe/dinosaur-eats

Built as a Manifest V3 Chrome extension with:

  • JavaScript
  • background service worker
  • content scripts
  • Chrome activeTab, storage, and scripting
  • CSS sprite animation
  • custom dinosaur + teapotsaur sprite sheets
  • looping chomp audio
  • optional herd behavior
  • hidden 418 / 814 mutation triggers
  • Gemini for iteration during development

The part I got most carried away with was making the dinosaur eat rendered lines instead of DOM blocks.

Deleting paragraphs would have been easy.

Instead I wanted the page to disappear in the exact shape the user sees it, which meant wrapping text, measuring where the browser actually breaks lines, grouping spans into visible rows, randomizing destruction order, and syncing the bite animation so the line disappears on the exact chomp frame.

A completely unreasonable amount of engineering for a joke.

Which is probably why it worked.

How I Built It

At a high level, the extension:

  1. waits for toolbar activation
  2. scans the current page for visible readable text
  3. wraps characters to detect true rendered line breaks
  4. groups them into visible lines
  5. randomizes the destruction order
  6. sends in the dinosaur
  7. removes the line on the bite frame
  8. mutates into teapotsaur mode on 418
  9. reverts back on 814

The strangest technical problem was that browsers don’t really expose “visible lines of text” as a concept.

That layer had to be invented.

So the joke ended up requiring a lot of layout measurement, span grouping, sprite timing, and DOM mutation choreography just to make the page feel like it was literally being eaten.

The premise is silly.

The implementation got weirdly serious.

Best Google AI Usage

I used Gemini throughout development as a fast implementation partner.

It was especially useful for:

  • working through Manifest V3 structure
  • refining content-script injection flow
  • thinking through line grouping logic
  • improving sprite timing
  • helping shape the 418 teapotsaur mutation idea into something that actually reads on screen

The final result is proudly useless.

Gemini helped me make it more useless, faster.

Ode to Larry Masinter

The hidden 418 mode is my favorite part.

Typing 418 while the extension is active mutates every dinosaur into a tiny walking teapotsaur.

They still eat the page.

They just do it with much stronger protocol energy.

Typing 814 reverses the mutation, which is objectively not how protocols work, but it felt spiritually correct.

Top comments (0)