The Court Jester: An Anti-Productivity Extension

This is a submission for the DEV April Fools Challenge

What I Built

The Court Jester — a Chrome extension that injects a chaotic little jester into any webpage to mildly (and sometimes aggressively) inconvenience the user.

Once unleashed, the jester:

• Runs across your screen for no reason
• Randomly claps or dances in corners
• Interrupts your focus with proclamations
• Occasionally sabotages your YouTube experience by pausing videos
• Becomes significantly more unhinged with “Make it Worse” mode

It’s completely useless, slightly annoying, and deeply committed to the bit.

Demo

Code

mabuhann / the-court-jester

A disruptive, anti-productivity jester that runs around the screen causing trouble.

The Court Jester

A Chrome extension that drops an animated jester into web pages to cause mild chaos.

Demo

Click the image to play the demo

Features

• Animated idle, run, clap, and dance states
• Popup controls to enable or disable the jester
• Optional "Make it Worse" mode
• Random behaviors and proclamations on normal web pages
• Pixel-art sprite rendering with normalized frame playback

How To Use

1. Open any http:// or https:// page
2. Click the extension icon
3. Toggle the jester from Dormant to Unleashed
4. Optionally click Make it Worse

Project Files

• manifest.json: Chrome extension manifest
• background.js: service worker and default storage setup
• content.js: main in-page jester behavior and animation logic
• content.css: injected styles for the jester, bubble, and banner
• popup.html: extension popup UI
• popup.js: popup logic and content-script messaging
• assets/: sprite sheets and images
• sprite_preview.html: local sprite preview page
• browser_demo.html: staged in-page demo…

View on GitHub

How I Built It

This project is built entirely with vanilla JavaScript, HTML, and CSS, focusing on DOM manipulation and sprite animation.

Core Mechanics

• The extension injects content.js and content.css into any http/https page via manifest.json.

• A fixed-position DOM layer is created for:

  • the jester sprite
  • speech bubbles
  • a chaos banner
  • a temporary “veil” effect

Sprite System

• Uses pixel-art sprite sheets:

  • jester_idle_normalized.png
  • jester_running_normalized.png
  • jester_clapping_normalized.png
  • jester_dancing_normalized.png

• Sprite sources + animation settings are defined at the top of content.js.

• A custom pipeline:

  • analyzeSprite() calculates bounding boxes per frame
  • preloadSprite() normalizes dimensions with scaling
  • applyJesterState() updates the DOM in real time

This ensures consistent rendering regardless of sprite differences.

Behavior Engine

The jester runs a randomized loop of actions:

• runAcrossScreen() → zooms across viewport
• danceInCorner() → chaotic corner dancing
• clapRandomly() → pointless applause
• centerDistraction() → interrupts the center of the screen
• royalTantrum() → full chaos mode (used more in “Make it Worse”)

These are scheduled and triggered through a timing loop inside content.js.

Chaos Features

• Automatically pauses <video> elements (especially noticeable on YouTube)
• Displays random proclamations via speech bubbles
• Intensifies behavior frequency in “Make it Worse” mode

Prize Category

Community Favorite

This project is intentionally ridiculous, highly visual, and interactive — the kind of thing people try once, laugh at, and immediately send to friends.

It doesn’t solve a problem.
It creates them — in the most entertaining way possible.