LinkedIn Translator: Savage Truth

What is this?

Highlight any cringe LinkedIn post. A floating 🐔 Translate button appears next to your selection. Click it. A loading window opens with a chicken that follows your cursor and pecks at it (yes, really). 1–3 seconds later the post's actual meaning is on screen — clichés underlined on the left, a Real Life Translation card on the right.

The real product is a Tampermonkey userscript that runs on linkedin.com. The widget below is a live demo so you can play with it without installing anything.

What's on the card

Category badge — one of: Humblebrag, ThoughtLeadership, FounderGrindset, NetworkingThirst, LayoffCoded, Promotion, ConferenceEnergy, CorporatePropaganda, VagueDrama, LifeLessonPost, RecruitingBait.
1–10 spice meter — how brutal the translation is.
🔊 Speak button — reads the translation aloud with spice-driven voice modulation. Spice 1 = sympathetic narrator. Spice 10 = demonic, rushed, deep-voiced. No audio assets, no API; uses the browser's built-in Web Speech API.
Cliché phrase highlights — corporate clichés in the original post are underlined; hover to see the plain-English subtext.
Two alternate readings + tags + caption — for when one translation isn't enough.

Live Demo — feed the chicken 🐔

Requires the backend running locally on http://localhost:8000 — docker compose up from the project root.

Development Team

The team at Singapore Stupid Hackathon 2026

T Kandasami

Chit Su Moe Oo

Bin Xu

Zheng Boon

LinkedIn GitHub

Install the userscript

Make sure the backend is running on http://localhost:8000 (this page wouldn't load otherwise).
Install the Tampermonkey browser extension.
Open userscript/linkedin-translator.user.js from the project repo — Tampermonkey will detect the metadata header and offer to install.
Visit linkedin.com, highlight any post, click the floating Translate button.

Changelog

2026-05-02 Added a Development Team section with the team photo and LinkedIn (+ GitHub) links for all four hackers. Nav header now includes a Team link.
2026-05-02 Added a nav header with a dedicated 🐔 Chicken page at /chicken/ — same cursor-following chicken as the loading screen, plus a live "pecks counted" tally. Chicken logic extracted into chicken.js; CSS factored into style.css. Both pages share one source of chicken truth.
2026-05-02 🐔 Chicken theme. Loading screen now has a chicken emoji that follows your cursor and pecks at it when it gets close, with random "cluck!" / "*peck*" / "bawk!" bursts. Egg-shell yellow background with floating eggs. The Translate button (userscript v0.1.5 + live demo) now reads 🐔 Translate / 🐔 Clucking…. Userscript description updated: "Powered by chickens."
2026-05-02 Added a 🔊 Speak button on the translation card. Uses the browser's Web Speech API (no audio assets, no API). Voice pitch and rate are spice-driven: spice 1 reads in a soft sympathetic voice (pitch 1.4, rate 0.85); spice 10 reads deep and rushed (pitch 0.4, rate 1.3). Click again while speaking to stop. Renders in both the popup window and the live demo.
2026-05-02 Userscript v0.1.4: replaced page-context fetch() with Tampermonkey's GM_xmlhttpRequest. linkedin.com's connect-src CSP blocks any page-script connection to localhost; GM_xmlhttpRequest runs in the extension's privileged process and bypasses page CSP. Added @connect localhost and @grant GM_xmlhttpRequest to the userscript header.
2026-05-02 Backend: added PrivateNetworkAccessMiddleware setting Access-Control-Allow-Private-Network: true on preflight responses. Mostly defensive — the userscript path uses GM_xmlhttpRequest which doesn't trigger PNA, but the GitHub-Pages live demo path needs it.
2026-05-02 Userscript v0.1.3: real fix for the white-popup bug. The v0.1.2 blob: URL approach still inherited linkedin.com's style-src/script-src CSP, blocking the localhost stylesheet and renderer. Now the popup is opened at http://localhost:8000/loading.html directly, then navigated to http://localhost:8000/popup.html#<data> — the popup's origin is localhost, which has no CSP. Translation data is passed via the URL hash so it stays client-side.
2026-05-02 Userscript v0.1.2: fixed the white-popup bug. linkedin.com's CSP enforces Trusted Types, which silently blocked document.write. The popup now navigates to blob: URLs containing the HTML — blob documents have no CSP header, so external scripts (style.css, render.js) and inline JS run normally.
2026-05-02 Userscript v0.1.1: comprehensive debug logging, an immediate "Translating…" placeholder in the popup, visible status line for asset-load failures (style.css / render.js), inline fallback styling so the popup is never pure white, and a collapsed Debug-data panel showing raw API responses.
2026-05-02 README expanded with a 7-step installation guide, a separate live-demo usage section, a no-Docker fallback, and a troubleshooting table.
2026-05-02 Live demo now calls http://localhost:8000 directly (absolute URL), and the backend's CORS allowlist includes https://t-kandasami.github.io — so the demo widget works on the deployed page as long as the visitor has the backend running locally.
2026-05-02 Moved static site from backend/static/ to /docs/ so GitHub Pages can serve it. Local backend reads the same files via the STATIC_DIR env var — one source of truth across local + deployed.
2026-05-02 Initial build — FastAPI backend with /translate and /highlights, Tampermonkey userscript with floating selection button + popup window, live demo widget on this page, shared meme-card renderer.

Update this list whenever code changes ship.