CloudWatch XKCD Plots

This is a tiny browser-side hack that restyles AWS CloudWatch charts into an xkcd-ish hand-drawn vibe.

License: MIT (LICENSE).

It ships two ways:

1. A Chrome extension (Manifest V3).
2. A Tampermonkey userscript.

Both versions:

• target CloudWatch console pages,
• watch for chart re-renders,
• restyle matching SVG charts with sketchy double-stroke lines and handwritten-looking labels,
• add a page toggle in the top-right corner.

Controls

Chrome extension control modes:

• xkcd off: disables styling.
• xkcd subtle: minimal wobble/distortion.
• xkcd medium: balanced default.
• xkcd chaos: maximum hand-drawn weirdness with monochrome override (white background + black lines/text).

Interaction:

• Click toggle to cycle forward (off -> subtle -> medium -> chaos -> off).
• Shift-click (or right-click) toggle to cycle backward.

Project Layout

cloudwatch-xkcd-extension/
  manifest.json
  src/
    content.js
    xkcd.css
  tampermonkey/
    cloudwatch-xkcd.user.js

Install as Chrome Extension

1. Open chrome://extensions.
2. Turn on Developer mode.
3. Click Load unpacked.
4. Select this folder: cloudwatch-xkcd-extension.
5. Open CloudWatch Metrics pages and the style should apply automatically.

Install as Tampermonkey Script

1. Install Tampermonkey.
2. Create a new script.
3. Replace contents with tampermonkey/cloudwatch-xkcd.user.js.
4. Save.
5. Open/refresh CloudWatch pages.

Notes / Limitations

• Works best on CloudWatch charts rendered as SVG.
• Some widgets (or future AWS UI changes) may not match the chart detector and can be skipped.
• If AWS heavily reworks CloudWatch DOM structure, the selector heuristics in src/content.js may need updates.
• This intentionally prioritizes visual chaos over perfect fidelity.
• This is an unofficial fan project and is not affiliated with AWS or xkcd.

Open Source Checklist

1. GitHub Repository

1. Create/push to github.com/<you>/cloudwatch-xkcd-extension.
2. Add repo description + topics (chrome-extension, cloudwatch, xkcd, tampermonkey).
3. In GitHub settings, set:
   • default branch protection,
   • issues enabled,
   • discussions optional.
4. Confirm community docs are detected:
   • LICENSE
   • CONTRIBUTING.md
   • CODE_OF_CONDUCT.md
   • SECURITY.md

2. Chrome Web Store

1. Create a publisher account.
2. Upload a production zip from this folder (contents only, not parent folder).
3. Add listing metadata/screenshots.
4. Submit for review.
5. After approval, publish and increment version in manifest.json for updates.

3. Userscript Distribution

1. Keep the Tampermonkey source at tampermonkey/cloudwatch-xkcd.user.js.
2. Publish via one (or both):
   • GitHub raw URL for direct install.
   • GreasyFork listing.
3. Bump userscript @version whenever behavior changes.

Local/Dev Distribution

1. Zip the extension root contents (manifest.json, src/, etc), not the parent folder.
2. Share as an unpacked folder for internal users, or as a zip for manual loading.

Dev

No build step required.

If you want to tweak style behavior, edit:

• src/xkcd.css for visual treatment,
• src/content.js for chart detection and SVG mutation logic.

Contributing

See CONTRIBUTING.md.

Security

See SECURITY.md.