Clarity for X

Inspiration

X is one of the best places to discover ideas and join real-time conversations, but useful replies are increasingly buried under repetitive templates, profile bait, promoted content, and other visual clutter. Existing blockers often felt too aggressive or opaque: they either removed too much or gave users no practical way to understand and reverse a decision. That inspired me to build Clarity for X, a local-first Chrome extension that makes X quieter without taking control away from the user.

How I Built It

Clarity for X is built as a Manifest V3 Chrome extension using JavaScript, CSS, and chrome.storage. It processes visible X pages directly in the browser, without uploading posts or replies to a backend.

The extension combines a versioned multilingual rule pack with text normalization, duplicate detection, profile and link signals, and rules learned from the user's manual markings. Users can hide one reply, filter similar replies or display names, review everything that was hidden, restore false positives, and import or export their local rules. It can also optionally hide promoted posts, “Discover more,” and the right sidebar. The interface automatically supports English and Simplified Chinese.

Challenges

The hardest challenge was X's continuously changing, virtualized interface. Timeline elements are frequently recycled and remounted as the user scrolls. Simply removing a post could make the feed jump, cause a reply to reappear, or trigger repeated layout updates. Hiding promoted posts also initially left large blank areas because X retained their measured height. I had to preserve X's virtual-list nodes while applying compact, stable visual changes and carefully ignore mutations created by Clarity itself.

Accurate filtering was another challenge. Short replies can be spam, but they can also be completely normal. Instead of treating a single keyword as proof, Clarity combines multiple signals and prioritizes low false-positive rates. Every decision remains reviewable and reversible.

What I Learned

The most important lesson was that a filtering product is fundamentally about trust. Detecting more content is not automatically better. Users need quiet defaults, understandable reasons, reliable recovery controls, and ownership of their local rules.

I also learned that browser extensions interacting with modern single-page applications require more than DOM selectors. They need lifecycle management, mutation control, virtual-list awareness, localization, regression fixtures, and continuous compatibility testing. Clarity for X became not just a spam filter, but an experiment in building a calmer and more user-controlled reading experience.

Built With

• codex