Building a Smart Topics Filter for X (Twitter): A Chrome Extension Guide

In this post, I’ll walk you through creating a Chrome extension that enhances your X (formerly Twitter) experience by intelligently filtering your “For You” feed based on your interests and the accounts you follow.

The Problem

X’s “For You” feed often shows content from accounts you don’t follow, making it harder to focus on topics and people you care about. While the algorithmic recommendations can be useful, they sometimes overwhelm your feed with irrelevant content.

The Solution

Our Chrome extension, “X Topics Filter,” solves this by:

1. Showing only tweets from accounts you follow
2. Filtering tweets based on your specified keywords
3. Working seamlessly with X’s infinite scroll
4. Maintaining your preferences across browser sessions

How It Works

1. Content Filtering Logic

The extension uses two main filtering criteria:

function shouldShowTweet(tweetEl, keywords) {
  // Hide tweets from accounts you don't follow (those with Follow buttons)
  const followBtn = tweetEl.querySelector('[data-testid="follow"]');
  if (followBtn) return false;

  // Filter by keywords if specified
  if (keywords && keywords.length > 0) {
    const tweetText = tweetEl.querySelector('[data-testid="tweetText"]');
    const text = tweetText ? tweetText.innerText.toLowerCase() : '';
    if (!keywords.some(kw => text.includes(kw.toLowerCase()))) {
      return false;
    }
  }

  return true;
}

2. Dynamic Content Handling

The extension uses multiple strategies to catch all tweets:

1. Mutation Observer: Watches for DOM changes as new tweets load
2. Periodic Scanning: Runs every second to catch any missed tweets
3. Navigation Handler: Reapplies filters during single-page-app navigation

function observeFeed() {
  // Watch for new tweets
  const observer = new MutationObserver(async (mutations) => {
    const keywords = await getKeywords();
    // Process new tweets
    // ...
  });

  // Set up periodic scanning
  setInterval(periodicScan, 1000);
}

3. User Interface

The extension provides a simple popup interface where users can:

• Enter keywords of interest
• Save preferences automatically
• See immediate feedback when settings are saved

Technical Implementation

1. Project Structure

chrome-extension-x-topics/
├── manifest.json         # Extension configuration
├── popup.html           # User interface
├── popup.js            # UI logic
├── contentScript.js    # Tweet filtering logic
├── background.js       # Service worker (future use)
└── icons/              # Extension icons

2. Key Features

Persistent Storage

// Save user preferences
chrome.storage.sync.set({ keywords }, () => {
  // Settings sync across browsers
});

Smart Tweet Detection

// Look for tweets in multiple ways
const tweets = [
  ...node.matches('article[data-testid="tweet"]') ? [node] : [],
  ...node.querySelectorAll('article[data-testid="tweet"]')
];

Error Handling

try {
  const keywords = raw.split(/\s*,\s*/)
    .filter(k => k)
    .map(k => k.toLowerCase());
} catch (err) {
  console.error('Error processing keywords:', err);
  // Show user-friendly error message
}

Installation Guide

1. Download or clone the repository – https://github.com/sethlahaul/chrome-extension-x-topics

   git clone https://github.com/sethlahaul/chrome-extension-x-topics.git

2. Open Chrome and navigate to chrome://extensions/
3. Enable “Developer mode” (top-right toggle)
4. Click “Load unpacked” and select the extension directory
5. Click the extension icon and enter your keywords

Usage Tips

Keyword Selection:

• Use broad terms for general topics: “tech”, “sports”, “news”
• Use specific terms for niche interests: “machine learning”, “python”
• Separate keywords with commas

Following Strategy:

• Follow accounts that consistently post about your interests
• The extension will only show tweets from these accounts

Fine-tuning:

• Start with fewer keywords and add more as needed
• Monitor which tweets are being filtered
• Adjust keywords based on what you’re missing or seeing too much of

Performance Considerations

The extension is designed to be lightweight and efficient:

• Uses DOM mutation observers instead of polling
• Processes tweets only once
• Caches keyword searches
• Minimal CPU and memory footprint

Future Enhancements

Advanced Filtering:

• Regular expression support
• Negative keywords (exclude tweets with certain words)
• Language filtering

UI Improvements:

• Filter statistics
• Quick toggle button
• Preset keyword collections

Performance:

• Worker thread for heavy processing
• Batch processing for large tweet volumes

---

Technical Deep Dive

For those interested in the implementation details, here are some key aspects:

1. Tweet Detection Strategy

The extension uses multiple selectors to ensure reliable tweet detection:

const tweetSelectors = [
  'article[data-testid="tweet"]',
  'div[data-testid="tweet"]',
  '[role="article"]'
];

2. Performance Optimization

To maintain smooth scrolling:

let tweetsProcessed = new Set(); // Avoid reprocessing
const periodicScan = debounce(async () => {
  // Process new tweets
}, 1000);

3. Error Recovery

The extension includes several fallback mechanisms:

// Multiple feed container selectors
const feedSelectors = [
  'div[aria-label="Timeline: Your Home Timeline"]',
  'div[aria-label="Home timeline"]',
  'div[data-testid="primaryColumn"]',
  'main[role="main"]'
];

Closing Thoughts

This Chrome extension demonstrates how to enhance the X experience while respecting the platform’s structure and user experience. It’s a practical example of using Chrome’s extension APIs, DOM manipulation, and user preference management.

Whether you’re learning about Chrome extension development or looking to improve your X experience, I hope this project provides valuable insights and practical utility.

Remember to keep your keywords list focused and relevant to get the most out of your filtered feed. Happy browsing!

---