VOOZH about

URL: https://dev.to/mabuhann/the-court-jester-an-anti-productivity-extension-4n8e

⇱ The Court Jester: An Anti-Productivity Extension - DEV Community

April Fools Challenge Submission ☕️🤡

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

👁 GitHub logo
mabuhann / the-court-jester

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

👁 The Court Jester logo

The Court Jester

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

Demo

👁 Click to play the Court Jester demo video

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…

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.