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

Source: Dev.to

Overview

Dinosaur Eats is a Chrome extension that drops a tiny pixel dinosaur onto any webpage and makes it eat the visible text line by line. It doesn’t target paragraphs or sections—only the rendered lines you actually see. The effect is purely whimsical and intentionally introduces a new class of browser instability: active prehistoric content loss.

Demo

Demo video on YouTube

Source code

GitHub repository – dinosaur‑eats

Built as a Manifest V3 Chrome extension with:

• JavaScript
  • background service worker
  • content scripts
  • Chrome activeTab, storage, and scripting permissions
• CSS sprite animation
  • custom dinosaur & teapotsaur sprite sheets
  • looping chomp audio
• Optional herd behavior
• Hidden mutation triggers (418 / 814)
• Gemini used for rapid iteration during development

Architecture & key features

• Toolbar activation – user clicks the extension icon to start the process.
• Text scanning – the content script scans the page for readable, visible text.
• Rendered‑line detection – characters are wrapped in temporary spans to discover true line breaks as rendered by the browser.
• Line grouping – spans are grouped into visible rows, then shuffled to randomize the order of destruction.
• Dinosaur animation – a sprite walks across the page, “chewing” each line on the exact bite frame, removing the line from the DOM.
• Mutation mode – typing 418 while the extension is active transforms the dinosaur into a “teapotsaur”; typing 814 reverts it.

Technical challenges

Browsers don’t expose “visible lines of text” as a native concept, so the extension had to invent this layer:

1. Measure layout to determine where the browser actually breaks lines.
2. Wrap each character in a span to capture its position.
3. Group spans into rows based on their vertical offset.
4. Randomize the order of line removal for a chaotic effect.
5. Synchronize the bite animation so the line disappears precisely on the chomp frame.

This required extensive DOM‑mutation choreography, layout measurement, and sprite‑timing logic—an unreasonable amount of engineering for a joke, which is why it feels surprisingly polished.

Development with Gemini

Gemini was used throughout as a fast implementation partner, helping with:

• Structuring the Manifest V3 project.
• Refining the content‑script injection flow.
• Designing the line‑grouping algorithm.
• Tuning sprite timing.
• Shaping the 418 teapotsaur mutation into a visible on‑screen effect.

The result is a proudly useless extension that became more refined (and more useless) thanks to that rapid feedback loop.

Hidden 418 / 814 mode

• Enter 418 while the extension is active → every dinosaur mutates into a tiny walking teapotsaur. The creature continues to eat the page, now powered by “stronger protocol energy.”
• Enter 814 → the teapotsaur reverts to the original dinosaur.

The reversal doesn’t follow any real protocol logic, but it feels spiritually correct for the joke.