After several months of user feedback and identifying pain points in v2.0, I rebuilt Reddit Post Hider from the ground up. Version 3.0 represents a complete refactor focused on reliability, performance, and user experience.
What Changed and Why
Version 2.0 had a simple interaction model: click anywhere on a post to hide it. While elegant in concept, this created several problems:
- Accidental clicks - Users often hid posts unintentionally while trying to interact with other elements
- Unreliable post detection - Different post formats (text, images, videos) had varying HTML structures
- Flash on load - Hidden posts would briefly appear before the extension could hide them
- Performance issues - Processing every post immediately caused lag on large feeds
"The best user interfaces feel predictable. If users can't anticipate what a click will do, they lose trust in the tool."
Key Improvements in v3.0
1. Dedicated Hide Buttons
The biggest UX change: replacing click-anywhere functionality with explicit hide buttons in the corner of each post. This eliminates accidental hiding while making the action discoverable and intentional.
- Clear visual affordance with '×' button
- Appears in top-right corner of every post
- Changes to "UNHIDE POST" button on hidden posts
- Prevents misclicks on links or images
2. Bulletproof Post Detection
Reddit's HTML structure varies significantly between old Reddit, new Reddit, and different post types. Version 3.0 implements a prioritized selector strategy:
const selectors = [
'shreddit-post', // New Reddit (most reliable)
'[data-testid="post-container"]', // New Reddit alternative
'.thing[data-fullname^="t3_"]', // Old Reddit
'div[id^="t3_"]' // Old Reddit fallback
];Each selector is tried in order, ensuring posts are detected regardless of Reddit's layout. The extension also validates posts by checking for comment links - the most reliable indicator that an element is actually a post.
3. Performance Optimization with IntersectionObserver
Instead of processing every post immediately, v3.0 uses the IntersectionObserver API to process posts only when they're about to become visible:
- 200px rootMargin - posts are processed slightly before they scroll into view
- WeakSet tracking prevents duplicate processing
- Debounced mutation observer (150ms) reduces unnecessary recalculations
- Significant performance improvement on r/all and r/popular
4. Intelligent Retry Logic
Reddit's single-page architecture means content often loads after initial page load. Version 3.0 implements strategic retry logic:
// Initial processing with retries
setTimeout(() => this.processAllPosts(), 500);
this.config.TIMEOUTS.RETRY_DELAYS.forEach(delay => {
setTimeout(() => this.processAllPosts(), delay);
});This ensures posts are caught even if they load asynchronously, eliminating the flash-on-load problem.
5. Enhanced Subreddit Blocking
Subreddit blocking now happens earlier in the processing pipeline and completely removes blocked posts from the DOM (display: none) rather than just fading them:
- Blocked posts are checked before individual post processing
- Completely hidden from view (not just faded)
- Better performance by skipping processing entirely
- Real-time updates when blocklist changes via storage listener
6. Better Page Navigation Detection
Reddit's SPA navigation doesn't trigger traditional page loads. Version 3.0 detects navigation by monitoring both:
- popstate events - Browser back/forward navigation
- Title element mutations - Reddit updates the title on navigation
This ensures the extension reprocesses posts when you navigate between feeds without full page reloads.
Technical Architecture Deep Dive
The extension is now built around a single RedditPostHider class that encapsulates all functionality. Key architectural decisions:
State Management
- Map for hidden posts - Allows O(1) lookups and stores timestamps for cleanup
- Set for blocked subreddits - Case-insensitive matching
- WeakSet for processed posts - Memory-efficient tracking that doesn't prevent garbage collection
Configuration System
Centralized config object makes tuning performance characteristics easy:
this.config = {
TIMEOUTS: {
INITIAL_LOAD: 500,
RETRY_DELAYS: [1000, 2000],
MUTATION_DEBOUNCE: 150,
MESSAGE_DISPLAY: 2000
},
STORAGE: {
CLEANUP_DAYS: 7
},
VISUAL: {
HIDDEN_OPACITY: 0.08,
BUTTON_SIZE: 64
},
DEBUG: false
};Cleanup and Memory Management
When navigating away from feed pages, the extension removes all buttons and clears state to prevent memory leaks. Hidden posts older than 7 days are automatically cleaned from storage.
User Feedback and Real-World Testing
Version 3.0 has been tested extensively across multiple Reddit browsing patterns:
- r/popular and r/all - High-volume feeds with diverse content
- Individual subreddits - Various custom layouts and styles
- Old vs. New Reddit - Completely different DOM structures
- Mobile responsive layout - Works on narrow viewports
What's Next
Future improvements being considered:
- Keyword filtering - Hide posts based on title content, not just subreddit
- Export/import settings - Sync blocklists and hidden posts across browsers
- Statistics dashboard - See how many posts you've hidden over time
- Custom CSS injection - Allow users to customize hidden post appearance
Lessons Learned
This refactor reinforced several important lessons about browser extension development:
- Explicit is better than clever - Dedicated buttons beat click-anywhere elegance
- Performance matters - IntersectionObserver is essential for feed-based interfaces
- Plan for variability - Reddit's DOM varies wildly; multiple detection strategies are necessary
- User feedback drives features - V3.0 addresses real pain points from actual usage
Try It Out
Reddit Post Hider v3.0 is available now on GitHub. The extension works on all Chromium-based browsers (Chrome, Edge, Brave, etc.) and requires no Reddit account to function.
If you're tired of seeing the same recycled content or want to block subreddits from cluttering your feed, give it a try. The code is open source and contributions are welcome.