The latest articles on DEV Community by Mawadda Abuhannoud (@mabuhann). https://dev.to/mabuhann https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3858433%2F5279dbdb-6985-40fb-a681-2139eae5a1fd.jpeg https://dev.to/mabuhann en Mawadda Abuhannoud Sat, 11 Apr 2026 09:25:09 +0000 https://dev.to/mabuhann/the-court-jester-an-anti-productivity-extension-4n8e https://dev.to/mabuhann/the-court-jester-an-anti-productivity-extension-4n8e <p><em>This is a submission for the <a href="https://dev.to/challenges/aprilfools-2026">DEV April Fools Challenge</a></em></p> <h2> What I Built </h2> <p><strong>The Court Jester</strong> — a Chrome extension that injects a chaotic little jester into any webpage to mildly (and sometimes aggressively) inconvenience the user.</p> <p>Once unleashed, the jester:</p> <ul> <li>Runs across your screen for no reason</li> <li>Randomly claps or dances in corners</li> <li>Interrupts your focus with proclamations</li> <li>Occasionally sabotages your YouTube experience by pausing videos</li> <li>Becomes significantly more unhinged with <strong>“Make it Worse” mode</strong> </li> </ul> <p>It’s completely useless, slightly annoying, and deeply committed to the bit.</p> <h2> Demo </h2> <p> <iframe src="https://www.youtube.com/embed/dF2bcXQkxcw"> </iframe> </p> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/mabuhann" rel="noopener noreferrer"> mabuhann </a> / <a href="https://github.com/mabuhann/the-court-jester" rel="noopener noreferrer"> the-court-jester </a> </h2> <h3> A disruptive, anti-productivity jester that runs around the screen causing trouble. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p> <a rel="noopener noreferrer" href="https://github.com/mabuhann/the-court-jester/assets/jester_logo.png"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fmabuhann%2Fthe-court-jester%2FHEAD%2Fassets%2Fjester_logo.png" alt="The Court Jester logo" width="240"></a> </p> <div class="markdown-heading"> <h1 class="heading-element">The Court Jester</h1> </div> <p>A Chrome extension that drops an animated jester into web pages to cause mild chaos.</p> <div class="markdown-heading"> <h2 class="heading-element">Demo</h2> </div> <p> <a href="https://github.com/mabuhann/the-court-jester/./Court%20Jester%20Demo.mp4" rel="noopener noreferrer"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fmabuhann%2Fthe-court-jester%2FHEAD%2Fassets%2Fjester_logo.png" alt="Click to play the Court Jester demo video" width="320"> </a> </p> <p> Click the image to play the demo </p> <div class="markdown-heading"> <h2 class="heading-element">Features</h2> </div> <ul> <li>Animated idle, run, clap, and dance states</li> <li>Popup controls to enable or disable the jester</li> <li>Optional "Make it Worse" mode</li> <li>Random behaviors and proclamations on normal web pages</li> <li>Pixel-art sprite rendering with normalized frame playback</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">How To Use</h2> </div> <ol> <li>Open any <code>http://</code> or <code>https://</code> page</li> <li>Click the extension icon</li> <li>Toggle the jester from <code>Dormant</code> to <code>Unleashed</code> </li> <li>Optionally click <code>Make it Worse</code> </li> </ol> <div class="markdown-heading"> <h2 class="heading-element">Project Files</h2> </div> <ul> <li> <code>manifest.json</code>: Chrome extension manifest</li> <li> <code>background.js</code>: service worker and default storage setup</li> <li> <code>content.js</code>: main in-page jester behavior and animation logic</li> <li> <code>content.css</code>: injected styles for the jester, bubble, and banner</li> <li> <code>popup.html</code>: extension popup UI</li> <li> <code>popup.js</code>: popup logic and content-script messaging</li> <li> <code>assets/</code>: sprite sheets and images</li> <li> <code>sprite_preview.html</code>: local sprite preview page</li> <li> <code>browser_demo.html</code>: staged in-page demo…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/mabuhann/the-court-jester" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <p>This project is built entirely with <strong>vanilla JavaScript, HTML, and CSS</strong>, focusing on DOM manipulation and sprite animation.</p> <h3> Core Mechanics </h3> <ul> <li>The extension injects <code>content.js</code> and <code>content.css</code> into any <code>http/https</code> page via <code>manifest.json</code>.</li> <li> <p>A fixed-position DOM layer is created for:</p> <ul> <li>the jester sprite</li> <li>speech bubbles</li> <li>a chaos banner</li> <li>a temporary “veil” effect</li> </ul> </li> </ul> <h3> Sprite System </h3> <ul> <li> <p>Uses pixel-art sprite sheets:</p> <ul> <li><code>jester_idle_normalized.png</code></li> <li><code>jester_running_normalized.png</code></li> <li><code>jester_clapping_normalized.png</code></li> <li><code>jester_dancing_normalized.png</code></li> </ul> </li> <li><p>Sprite sources + animation settings are defined at the top of <code>content.js</code>.</p></li> <li> <p>A custom pipeline:</p> <ul> <li> <code>analyzeSprite()</code> calculates bounding boxes per frame</li> <li> <code>preloadSprite()</code> normalizes dimensions with scaling</li> <li> <code>applyJesterState()</code> updates the DOM in real time</li> </ul> </li> </ul> <p>This ensures consistent rendering regardless of sprite differences.</p> <h3> Behavior Engine </h3> <p>The jester runs a randomized loop of actions:</p> <ul> <li> <code>runAcrossScreen()</code> → zooms across viewport</li> <li> <code>danceInCorner()</code> → chaotic corner dancing</li> <li> <code>clapRandomly()</code> → pointless applause</li> <li> <code>centerDistraction()</code> → interrupts the center of the screen</li> <li> <code>royalTantrum()</code> → full chaos mode (used more in “Make it Worse”)</li> </ul> <p>These are scheduled and triggered through a timing loop inside <code>content.js</code>.</p> <h3> Chaos Features </h3> <ul> <li>Automatically pauses <code>&lt;video&gt;</code> elements (especially noticeable on YouTube)</li> <li>Displays random proclamations via speech bubbles</li> <li>Intensifies behavior frequency in “Make it Worse” mode</li> </ul> <h2> Prize Category </h2> <p><strong>Community Favorite</strong></p> <p>This project is intentionally ridiculous, highly visual, and interactive — the kind of thing people try once, laugh at, and immediately send to friends.</p> <p>It doesn’t solve a problem.<br> It <em>creates</em> them — in the most entertaining way possible.</p> devchallenge 418challenge showdev