Colorizes and prettifies JSON-formatted log lines in the Argo CD UI. It finds log <code> blocks, parses JSON, and renders a readable, color-coded <pre> with a MutationObserver to handle new lines as they appear.
- Highlights keys, strings, numbers, booleans, null, and punctuation
- Formats large numbers with thousands separators (e.g.,
42137200→42,137,200) - Auto-detects JSON in common Argo logs containers (e.g.,
div.noscroll code) - Continues enhancing as new logs stream in
public/manifest.json— MV3 manifestsrc/content.ts— content script (TypeScript)public/styles/content.css— token colors and base stylingpublic/dist/content.js— built bundle (generated)
npm install
npm run build
This produces public/dist/content.js that the manifest references.
- Open Chrome →
chrome://extensions - Enable Developer mode
- Click "Load unpacked" and select:
/Users/denham/Documents/projects/envio/code/argo-json-pretty-logs-extension/public
If you change code later, re-run npm run build and hit the "Reload" button on the extension card.
- Right-click the extension icon in the Chrome toolbar to open its context menu.
- Choose "Enable Pretty JSON" or "Disable Pretty JSON". The badge shows
ON/OFF. - The setting persists via
chrome.storage.localand content pages update live without refresh.
Navigate to your Argo CD application logs page. The extension will:
- Detect single-line JSON log entries inside
<code>elements - Hide the original
<code>and insert a pretty, colored<pre>right after it
To verify it’s active, open DevTools Console and run:
document.querySelectorAll('.argo-json-container').length
- Update colors in
public/styles/content.css - Adjust selectors in
src/content.ts(findLogCodeBlocks) to match your exact Argo UI - Narrow URL matches in
public/manifest.jsonif desired
- The script conservatively tries to parse only text that looks like JSON. If a log line isn’t valid JSON, it is left untouched.
MIT © Denham Preen