Twitter Video Filter Chrome Extension

An assessment of Codex's capabilities, some notes:

• Amusing how it converges to recreating React.
• Also runs into all the React footguns, like state persistence on window navigation events, etc.
• Surprised to see some unprompted boilerplate I haven't encountered before in LLM output, like log handlers.
• Otherwise an impressive effort with minimal handholding. I'd like for it to have a search tool somehow.
• Everything below this line is machine-generated. Everything else in this repository is machine-generated.

Goal

Build a Chrome extension that hides tweets with video content on the "For You" feed and surfaces a list of impacted tweets.

Extension Plan

1. Research DOM structure

   • Inspect Twitter/X "For You" timeline DOM to identify selectors for tweet cards, video indicators, usernames, and permalinks.
   • Determine reliable signals that distinguish video tweets from static/media-less tweets (e.g., presence of <video> tags or specific aria labels).

2. Set up extension scaffold

   • Create MV3 manifest with required permissions (activeTab, scripting, and host permissions for https://twitter.com/* and https://x.com/*).
   • Add content script entry point and minimal background service worker (if needed for scripting injection).
   • Configure extension to run content script on Twitter domains after page load.

3. Implement content filtering logic

   • In content script, watch the timeline using MutationObserver to handle infinite scrolling.
   • For each tweet element, detect video tweets via DOM checks (video container, play button, or data attributes).
   • Hide or collapse matching tweet elements while preserving layout stability.

4. Collect offending tweet metadata

   • Extract username and canonical tweet URL for each filtered tweet.
   • Maintain an in-memory list of filtered tweets, ensuring duplicates are removed if the same tweet reappears.

5. Inject reporting UI

   • Insert a lightweight control panel into the DOM (e.g., fixed element near timeline or sidebar).
   • Populate panel with a list of offending usernames; render each as a link pointing to the tweet URL.
   • Style UI with minimal CSS injected by the content script to match Twitter's appearance without breaking layout.

6. Handle navigation and dynamic loads

   • Detect Twitter's client-side navigation events (URL changes without full reload) and re-run observers when the feed changes.
   • Ensure the extension cleans up old UI instances to avoid duplication on navigation.

7. Testing and refinement

   • Manually validate on both twitter.com and x.com domains in the "For You" tab.
   • Fine-tune selectors and detection logic to avoid false positives (e.g., removing GIF-only or image tweets).
   • Add basic logging toggled via console flag for debugging.

8. Packaging for local use

   • Document steps for loading the unpacked extension in Chrome.
   • Provide instructions for enabling/disabling the filter and updating the username panel.

Local usage

Load the extension

1. Clone this repository or download its contents locally.
2. Open Chrome and navigate to chrome://extensions.
3. Enable Developer mode (toggle in the top-right corner).
4. Click Load unpacked and select the project directory that contains manifest.json.
5. The extension should appear in the extensions list; pin it to the toolbar if you want quick access to enable/disable controls.

Enable or disable filtering

• The filter runs automatically whenever you visit twitter.com or x.com once the extension is enabled.
• Use the Chrome extensions toolbar toggle (or the switch on chrome://extensions) to disable or re-enable the filter at any time.
• Reload the Twitter tab after toggling to ensure the timeline and injected UI reset cleanly.

Refreshing the reporting panel

• The "Video tweets hidden" panel updates live as the content script hides matching tweets.
• Navigate to a different feed tab (e.g., switch between "For you" and "Following") or reload the page to clear the list and start fresh.
• If the panel ever appears out of sync, toggle the extension off and back on or refresh the page to reset state.

Panel controls and persistence

• Use the Hide/Show button in the panel header to collapse or expand the filtered tweet list; the extension remembers your choice across navigations.
• The hidden state is stored with chrome.storage.local, so it survives tab reloads while the extension stays installed.
• The header now shows the current count (e.g., 3 tweets hidden) so you can see the list size even when collapsed.
• Click the mute icon beside any entry to mute that account on Twitter; the entry (and any of their other hidden tweets) disappears once the mute is confirmed.

Optional debugging

• In the Twitter tab console, run window.__tvfDebug.enable() to enable verbose logging and window.__tvfDebug.disable() to turn it off.
• The helper saves the flag via chrome.storage.local; the previous localStorage.setItem('tvf:debug', '1') fallback still works if needed.
• Debug logs share the [twitter-filter] prefix so they can be filtered quickly in DevTools.

Packaging

• Ensure you have a recent Node.js installed (only the built-in npm CLI is required; no dependencies to install).
• Run npm run pack to bundle the extension into dist/twitter-filter.zip for import via chrome://extensions or distribution.
• The script simply zips manifest.json, background.js, content.js, and style.css; adjust it if you add new assets.

Next Steps

• Begin DOM research and capture selectors/details for video tweet detection.
• Create manifest and scaffold files (manifest.json, content.js, optional style.css).
• Prototype MutationObserver-based filtering logic.