DEV Community: StardustDemo

Why Ctrl+P Truncates ChatGPT & Claude Threads — Purifying SPA DOMs into Crisp Vector PDFs

StardustDemo — Sun, 15 Nov 2026 06:22:32 +0000

Try opening a 20-turn architecture or debugging conversation in ChatGPT, Claude, Copilot, or DeepSeek right now and pressing Cmd+P (Ctrl+P) to save a PDF reference for your team wiki or tablet.

Three things almost always go catastrophically wrong:

Only Page 1 Prints (The 100vh Flex Scroll Trap): Everything above or below the current viewport disappears because modern single-page chat apps lock html, body to height: 100vh; overflow: hidden and scroll an inner flex: 1; overflow-y: auto container. Browser print engines paginate the root document viewport—not nested scrollboxes!
Code Blocks & Tables Get Sliced Horizontally: <pre><code> blocks styled with overflow-x: auto; white-space: pre clip the right 40% of your SQL queries or TypeScript types, and page breaks slice single lines of code vertically in half.
Dark Mode Torches Printer Toner: Terminal dark slate backgrounds (#0f172a), sticky composer drawers, sidebar thread histories, and low-contrast #94a3b8 text produce muddy, ink-soaked pages.

Many existing "ChatGPT to PDF" tools work around this by rasterizing the DOM onto an HTML5 <canvas> (html2canvas) and wrapping giant PNG screenshots inside a PDF container—resulting in 25 MB files where you cannot Cmd+F search or copy-paste a single line of code, or worse, requiring terrifying <all_urls> "Read and change all your data on all websites" permissions.

We built and open-sourced CleanPrint & AI-Chat to PDF Studio (live on Mozilla Firefox Add-ons and unpacked for Chrome/Edge/Brave) to produce true 80 KB selectable vector PDFs in <50ms locally. Here is how the DOM purification and @media print architecture works under the hood.

1. Escaping the `100vh` Scroll Container Trap Non-Destructively

If you try to mutate ChatGPT or Claude's live React/Next.js Fiber tree in-place—stripping overflow: hidden and deleting sidebar nodes—two bad things happen: CSS specificity wars with Tailwind utility classes break layout unpredictably, and the moment React reconciles state, your mutated DOM crashes with hydration/removeChild errors when the user returns to their chat.

Instead, CleanPrint treats the live SPA DOM as read-only input, extracts a clean semantic AST, mounts an isolated sibling root (#cleanprint-studio-root) directly under document.body, and hides sibling app shells purely via a reversible root class:

html.cleanprint-studio-active,
html.cleanprint-studio-active body {
  background: #e2e8f0 !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.cleanprint-studio-active body > *:not(#cleanprint-studio-root) {
  display: none !important;
}

Why is body > *:not(#cleanprint-studio-root) { display: none !important; } so effective?

Every nested 100vh React wrapper (#__next, main, sticky navbars, composer inputs) stays completely intact in memory—preserving scroll position, React event listeners, and streaming state.
#cleanprint-studio-root sits in normal document block flow with height: auto, allowing Blink, Gecko, and WebKit's native print pagination engine to lay out 1 to 100+ vector pages effortlessly.
Clicking Restore Original Web View simply removes html.cleanprint-studio-active and unmounts #cleanprint-studio-root, restoring window.scrollTo(0, savedScrollY) with zero page reload.

2. Multi-Platform AI Turn Extraction + Density Fallback

Different LLM interfaces mark up conversation turns differently, and those selectors evolve. In src/purifier.js, our parser cascades through three tiers before falling back to an article link-density scorer (for GitHub READMEs, MDN docs, and engineering blogs):

// Tier 1: OpenAI / ChatGPT semantic author role attributes
var roleNodes = doc.querySelectorAll('[data-message-author-role]');

// Tier 2: Claude, Copilot & Gemini custom elements / test IDs
var combinedTurnNodes = doc.querySelectorAll(
  '[data-testid="user-message"], .font-claude-message, ' +
  '[data-content="user-message"], [data-content="ai-message"], ' +
  'user-query, model-response, .copilot-chat-message'
);

// Tier 3: Generic turn wrappers & link-density article root fallback

Inside each turn, a recursive walker normalizes headings (h1–h6), inline formatting runs (code, strong, em, resolved a[href]), Markdown tables, blockquotes, lists, and fenced <pre><code> blocks—automatically detecting the programming language either from language-* classes or adjacent header pills (sql, python, typescript) while ignoring UI buttons like "Copy" or "Edit".

3. Passing Mozilla AMO Security Review: Zero `innerHTML` & Least-Privilege MV3

If you have ever submitted an extension to Mozilla Add-ons (AMO), you know their automated linter and human security reviewers strictly flag any assignment to .innerHTML, insertAdjacentHTML, or outerHTML inside privileged scripts due to DOM XSS risks when parsing untrusted web pages.

CleanPrint contains zero .innerHTML calls across the entire codebase (enforced automatically by our build script before running syntax checks in JavaScriptCore). Every purified card, table cell, inline code badge, and multi-tab Table of Contents entry is constructed through a tiny 25-line hyperscript helper using document.createElement and textContent:

function el(tag, attrs, children) {
  var node = document.createElement(tag);
  if (attrs) {
    Object.keys(attrs).forEach(function (k) {
      if (k === 'className') node.className = attrs[k];
      else if (k === 'textContent') node.textContent = attrs[k];
      else if (k.indexOf('on') === 0 && typeof attrs[k] === 'function') {
        node.addEventListener(k.slice(2).toLowerCase(), attrs[k]);
      } else if (attrs[k] != null) {
        node.setAttribute(k, String(attrs[k]));
      }
    });
  }
  (children || []).forEach(function (ch) {
    if (ch == null) return;
    node.appendChild(typeof ch === 'string' ? document.createTextNode(ch) : ch);
  });
  return node;
}

Equally important is Manifest V3 permission hygiene. CleanPrint requests strictly:

"permissions": ["activeTab", "scripting", "storage"]

No <all_urls>. No persistent content scripts slowing down every page load. purifier.js is injected strictly on-demand via scripting.executeScript when—and only when—you click the toolbar icon. For cross-browser compatibility between Chromium (service_worker) and Firefox MV3 (background.scripts + browser_specific_settings.gecko with data_collection_permissions.required: ["none"]), we maintain clean target manifests sharing 100% of the runtime JS.

4. Print-Media CSS That Never Cuts Off Code Blocks or Wastes Toner

To ensure exported PDFs read like typeset technical handouts rather than broken web dumps, our print stylesheet combines four rules:

/* 1. Wrap long code lines cleanly instead of clipping horizontally */
#cleanprint-studio-root .cp-pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: visible;
  line-height: 1.5;
}

/* 2. Keep code blocks, tables, figures & headings anchored across page breaks */
#cleanprint-studio-root .cp-heading,
#cleanprint-studio-root .cp-qa-header {
  break-after: avoid;
  page-break-after: avoid;
}

#cleanprint-studio-root .cp-avoid-break,
#cleanprint-studio-root pre,
#cleanprint-studio-root table {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* 3. Eco Low-Ink Mode: strip dark terminal fills into crisp monochrome hairlines */
#cleanprint-studio-root.cp-low-ink .cp-code-block {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.25px solid #334155 !important;
}

Toggling Eco Low-Ink Mode replaces solid #1e293b code backgrounds and tinted prompt cards with pure #ffffff paper fills and sharp #334155 borders—cutting black toner/ink usage by roughly 65%–75% on code-heavy LLM threads while boosting laser-print legibility.

Install or Inspect the Source (MIT Licensed)

🦊 Firefox Official Add-on (1-Click Install): CleanPrint & AI-Chat to PDF Studio on Mozilla Add-ons
📦 Chrome / Edge / Brave Release .zip & MIT Source: github.com/963239327/cleanprint-ai-chat-to-pdf
👀 Interactive Web Preview: Try CleanPrint Formatting in Browser
📚 CleanPrint Pro ($5.99 Lifetime Offline Key): Unlocks our Multi-Tab Print Queue Binder (combine 10+ ChatGPT threads & docs into one research PDF with an auto-generated Table of Contents), Academic Serif / 2-Column Study / 2-Up Booklet themes, and marginless URL header removal via Gumroad.

Happy printing—and may your <pre><code> blocks never get chopped at column 80 again!

Stop Pasting REDACTED into LLMs: Building a Zero-Latency Reversible Secret Vault in Vanilla JS

StardustDemo — Sun, 15 Nov 2026 06:00:28 +0000

Every week, an engineer somewhere highlights a failing Kubernetes manifest, .env file, Terraform plan, or curl trace, pastes it into ChatGPT or Claude to debug an edge case, and realizes half a second too late that a live sk-proj-... key, AWS AKIA... credential, or production Postgres URI just left their machine.

Most security-conscious developers try to solve this manually by doing a quick find-and-replace to turn credentials into ***REDACTED*** before prompting.

Unfortunately, naive ***REDACTED*** scrubbing silently breaks two critical parts of an AI-assisted debugging loop:

Destroying Cross-Variable Identity (Topology Loss): Suppose a distributed trace references two internal nodes (10.24.8.15 and 10.24.8.99) and passes a bearer token across three microservices, where service C accidentally receives a stale token. If every IP and token becomes ***REDACTED***, the LLM loses equivalence relationships—it can no longer tell whether two masked strings were identical or distinct.
Roundtrip Re-Insertion Friction: When Claude or ChatGPT hands back a 60-line refactored TypeScript or YAML block filled with ***REDACTED*** literals, pasting it back into your editor breaks your local build until you manually hunt down and restore every single credential without fat-fingering a quote.

To fix both problems without routing sensitive clipboard contents through any cloud proxy or bloated native binary, I built and open-sourced PasteShield—a zero-dependency, <1ms reversible secret sanitizer running 100% in local RAM across VS Code / Cursor, Node/Bun CLI pipelines, and an offline browser sandbox.

Here is a look under the hood at the three architectural problems we had to solve: deterministic bidirectional interning, ordered multi-pass regex precedence, and zero-server offline license verification using 32-bit FNV-1a checksums.

1. Designing a Prototype-Safe Bidirectional `SessionVault`

Instead of destroying entropy with static asterisks, PasteShield maps each unique (category, rawSecret) pair to a numbered semantic token such as <OPENAI_KEY_1>, <DB_URI_1>, <INTERNAL_IP_1>, and <INTERNAL_IP_2>.

Inside sanitizer-core.js, the vault lives strictly in volatile process memory using null-prototype dictionaries (Object.create(null)) so maliciously crafted log strings like __proto__ or constructor can never trigger prototype pollution:

function SessionVault() {
  this.secretToToken = Object.create(null);
  this.tokenToSecret = Object.create(null);
  this.categoryCounters = Object.create(null);
}

SessionVault.prototype.intern = function (category, rawSecret) {
  var compositeKey = category + '\u0000' + rawSecret;
  if (this.secretToToken[compositeKey]) {
    return this.secretToToken[compositeKey];
  }
  var nextIndex = (this.categoryCounters[category] || 0) + 1;
  var candidate = '<' + category + '_' + nextIndex + '>';
  while (this.tokenToSecret[candidate] && this.tokenToSecret[candidate] !== rawSecret) {
    nextIndex += 1;
    candidate = '<' + category + '_' + nextIndex + '>';
  }
  this.categoryCounters[category] = nextIndex;
  this.secretToToken[compositeKey] = candidate;
  this.tokenToSecret[candidate] = rawSecret;
  return candidate;
};

Notice two subtle invariants here:

Referential Stability Across Multi-File Prompts: Because secretToToken keys on category + '\u0000' + rawSecret, copying .env first and docker-compose.yml five minutes later guarantees that the same Redis password resolves to <DB_URI_1> in both snippets. The LLM sees exact structural isomorphism while never seeing a single character of the credential.
Collision-Proof Angle-Bracket Syntax: Tokens follow /^<[A-Z][A-Z0-9_]{1,40}_[1-9]\d*>$/. LLMs naturally treat <DB_URI_1> as an opaque symbolic variable and preserve it verbatim inside refactored string templates, JSON payloads, and TypeScript configs. When you copy the AI's response and press Cmd+Alt+R (Ctrl+Alt+R), a single regex pass over /<([A-Z][A-Z0-9_]{1,40})_([1-9]\d*)>/g swaps every placeholder back to its exact original value in under a millisecond.

2. Why Regex Execution Order Makes or Breaks Secret Scrubbers

If you run 10 independent regular expressions in arbitrary order, smaller patterns will cannibalize larger structured secrets and corrupt restoration!

Consider a production PostgreSQL connection URI:

DATABASE_URL="postgresql://svc_billing:sk-live-secret99@10.24.8.15:5432/ledger"

If your INTERNAL_IP detector (10.24.8.15) or generic .env key-value detector fires before your DB_URI detector, the URI gets partially mutated into:

postgresql://svc_billing:sk-live-secret99@<INTERNAL_IP_1>:5432/ledger

Now the DB_URI regex fails to match, leaving svc_billing:sk-live-secret99 exposed in plain text!

PasteShield prevents partial-token cannibalization through strict coarse-to-fine pass ordering paired with an idempotency guard (hasExistingPlaceholder):

Pass 1 — Multi-Line PEM / OpenSSH / PGP Private Key Blocks: Captures entire -----BEGIN ... PRIVATE KEY----- blocks across newlines before line-oriented matchers touch base64 lines.
Pass 2 — Composite Cloud Connection Strings: Matches multi-segment Azure Storage, Service Bus, Cosmos DB, IoT Hub, and SQL connection strings (DefaultEndpointsProtocol=...;AccountKey=...).
Pass 3 — Authenticated Database & Broker URIs: Captures full postgres://, mysql://, mongodb+srv://, rediss://, amqps://, and clickhouse:// URIs containing user:pass@host.
Pass 4 — High-Prefix Vendor Tokens: Captures sk-proj-... / sk-ant-... (OpenAI & Anthropic), AKIA... / ASIA... (AWS IAM), ghp_ / github_pat_ (GitHub), Slack xoxb-, Stripe rk_live_, and 3-segment eyJ... signed JWTs.
Pass 5 — Network & Identity Primitives: Captures RFC1918 (10.x, 172.16-31.x, 192.168.x) plus Tailscale/CGNAT (100.64-127.x) private IPv4s and email addresses.
Pass 6 — Contextual Key-Value Assignments: Captures .env, YAML, and JSON assignments matching *_SECRET, *_PASSWORD, *_TOKEN, or *_API_KEY, while explicitly skipping benign placeholders (true, false, null, changeme, $ENV_REF, {{handlebars}}, and already-interned <TOKEN_1> markers).

Because every replacement checks if (hasExistingPlaceholder(match)) return match;, already-sanitized regions are completely immune to double-wrapping.

3. Zero-Backend Offline Pro Verification with 32-Bit FNV-1a

A non-negotiable security promise for developer security tools is zero outbound network traffic. If an extension claims to keep secrets local, opening fetch() sockets to a custom licensing server undermines enterprise trust and fails inside air-gapped corporate VPNs.

Our core 10 detectors, bidirectional VS Code commands, and Node/Bun CLI are 100% free and MIT-licensed forever. For teams wanting optional power features—like custom corporate domain redaction (*.corp.acme.internal → <COMPANY_DOMAIN_1>) and multi-file Markdown AI Context Packs—we needed a purely offline license key format (SHIELDPRO-XXXX-XXXX-XXXXXX) verifiable in 15 lines of dependency-free JavaScript across Node, browsers, and macOS JavaScriptCore (jsc).

We used a 32-bit FNV-1a non-cryptographic checksum with 32-bit unsigned integer multiplication (Math.imul):

function fnv1aHex6(str) {
  var h = 0x811c9dc5;
  for (var i = 0; i < str.length; i++) {
    h ^= str.charCodeAt(i);
    h = Math.imul(h, 0x01000193) >>> 0;
  }
  return ('00000000' + h.toString(16).toUpperCase()).slice(-8).slice(0, 6);
}

Why Math.imul(h, 0x01000193) >>> 0 instead of h * 0x01000193? In JavaScript, standard multiplication uses IEEE-754 64-bit floats with 53 bits of mantissa precision; multiplying a 32-bit integer near 0xFFFFFFFF by the FNV prime 16777619 (0x01000193) can exceed $2^{53} - 1$ and silently drop low bits! Math.imul performs exact C-style 32-bit two's-complement multiplication, and >>> 0 coerces the result back to an unsigned 32-bit integer—producing byte-for-byte identical hex signatures between Python build scripts and JavaScript runtimes with zero WebCrypto async ceremony.

Try It in Your Workflow (100% Local & MIT Open Source)

Whether you live inside VS Code, Cursor, or terminal pbpaste | ... | pbcopy pipelines, you can wire reversible sanitization into your daily AI loop in 30 seconds:

🧩 Install on VS Code Marketplace: PasteShield — AI Prompt & Clipboard Secret Sanitizer
⭐ Clone Source & Zero-Dependency CLI on GitHub: github.com/963239327/pasteshield-secret-sanitizer
🌐 Test Live in Browser (No Install): Interactive Client-Side Playground
🔑 Support Indie OSS: Optional $9 Lifetime PasteShield Pro Key or $19 CraftLeaf Studio All-Access Pass.

If there is a cloud vendor token format or log pattern your team hits frequently, open an issue or PR on GitHub—happy to add first-class detectors for it!