Phase 8 — Hard-tier platforms (Facebook, Instagram, TikTok) with anti-obfuscation stack

[bryanmatthewsimonson]

Part of the v4.2 parity push — the last phase, deferred until the rest of the architecture is stable.

Depends on

• Phase 3 (platform handler registry, easy-tier handlers establish the pattern) — Phase 3 — Easy-tier platform handlers (Substack, YouTube, Twitter/X, generic) #14

Why P3

These three platforms are high-maintenance. Class names are randomized, DOM is heavily obfuscated, APIs change under the hood. The userscript spends ~1,629 LOC on them plus another ~800 LOC in the anti-obfuscation stack (API interceptor, React Fiber walker, module hook).

This phase should probably be split into four sub-issues when work starts — one per platform plus one for the anti-obfuscation stack — rather than shipped as a single chunk. Listed here together because they share infrastructure.

Scope (at a high level)

Anti-obfuscation infrastructure

• shared/api-interceptor.js (~595 LOC in the userscript) — hooks fetch() and XMLHttpRequest in the MAIN world (injected via chrome.scripting.executeScript({ world: 'MAIN' })) to capture Meta's GraphQL responses keyed by fb_api_req_friendly_name and doc_id. In the extension, the interceptor posts intercepted payloads back to the content script via window.postMessage.
• React Fiber traversal helper — walks __reactFiber$* properties on DOM elements to extract component props.
• shared/module-hook.js (~121 LOC) — probes Facebook's internal __d() module registry. MAIN-world only.
• Click-to-select overlay — semi-transparent overlay, user clicks the post to capture, DOM walker finds the post container via visual-characteristic scoring (size, borders, shadows, margins).

Per-platform handlers (one sub-issue each when actually started)

• Facebook (platforms/facebook.js, ~240 LOC) — ARIA roles (role="article", data-testid), API interception for GraphQL post data, React fiber fallback.
• Instagram (platforms/instagram.js, ~964 LOC — the largest platform handler) — ARIA extraction, React fiber inspection for minified post data, API interception for comment threads, hashtag extraction.
• TikTok (platforms/tiktok.js, ~425 LOC) — __NEXT_DATA__ JSON parse with a DOM fallback (the __NEXT_DATA__ path breaks whenever TikTok changes their Next.js setup).

Capture Panel UI

These platforms use the capture-panel flow instead of the reader view (they need the underlying page visible for scrolling through comments, selecting text). Per docs/capture-panel-design.md:

• Side-panel-based capture UI (not a shadow-DOM injected sidebar) — uses the existing chrome.sidePanel infrastructure from Phase 0.
• Pending captures queue surfaced as a red badge on the toolbar icon when CSP blocks the publish path (should be rare since SW relay client is outside page CSP, but keep the fallback).

Extension-native wins to exploit here

• No WebSocket CSP blocks — SW relay client was the reason to not put this off-platform.
• API interception via declarativeNetRequest could replace some of the fetch() hook work — we can inspect requests directly at the network layer without needing to patch the page's fetch. Worth evaluating during implementation.
• chrome.debugger API is another cheat code worth considering for especially-hostile platforms; high-friction auth prompts though, so only as a last resort.

Success criteria

Deferred until actual work starts — defined per sub-issue when this phase is split.

Notes

• Before starting this phase, confirm FB/IG/TikTok obfuscation patterns haven't shifted enough since v4.2's userscript version to invalidate the existing code. A platform review at the top of the work is cheaper than porting code that's already stale.