TV Show Image Filter - Chrome Extension

A Chrome extension that automatically detects and blocks images related to a configurable TV show using AI.

Features

• Blur-first approach: Images are blurred immediately, then analyzed
• Hybrid AI analysis: Local heuristic pre-filter + OpenAI Vision API for accurate detection
• Configurable target: Choose which TV show to filter
• Site controls: Whitelist trusted sites, blacklist problematic ones
• Statistics tracking: See how many images have been blocked
• Privacy-focused: Images are analyzed but never stored

Installation

From Source (Developer Mode)

1. Clone or download this repository

2. Open Chrome and navigate to chrome://extensions/

3. Enable "Developer mode" (toggle in top-right corner)

4. Click "Load unpacked"

5. Select the extension folder from this project

6. The extension icon should appear in your toolbar

Generate Custom Icons (Optional)

The extension includes placeholder icons. To generate custom icons:

1. Open extension/assets/generate-icons.html in a browser
2. Right-click each canvas and save as the specified filename
3. Replace the placeholder PNGs in extension/assets/

Configuration

1. Set Target Show

1. Click the extension icon in your toolbar
2. Click "Settings" to open the options page
3. Enter the TV show name you want to filter (e.g., "Breaking Bad")
4. Optionally add context to improve detection accuracy

2. Add OpenAI API Key (Recommended)

For accurate image classification:

1. Get an API key from platform.openai.com
2. Open extension Settings
3. Paste your API key
4. Click "Test" to verify it works
5. Click "Save Settings"

Cost: Approximately $0.0005 per image analyzed (using GPT-4o with low detail)

3. Customize Site Lists

• Whitelist: Sites where filtering is disabled
• Blacklist: Sites where all images are blocked immediately

How It Works

Image Detected -> Apply Blur -> Analyze -> Reveal or Block
                                   |
                    +--------------+--------------+
                    |                             |
             Local Heuristic               OpenAI Vision
             (placeholder filter)          (accurate analysis)
                    |                             |
              If confident,              Returns decision
              skip cloud API             (related/not related)

1. Detection: MutationObserver watches for new images (>=100x100px)
2. Blur: Images are immediately blurred to prevent viewing
3. Analysis: Local heuristics check for obvious non-matches; uncertain cases go to OpenAI Vision
4. Decision: Based on AI analysis, images are either revealed (safe) or fully blocked (match)

Architecture

extension/
|-- manifest.json              # Chrome extension configuration
|-- background/
|   +-- service-worker.js      # Analysis pipeline coordinator
|-- content/
|   |-- content.js             # Main content script
|   |-- image-observer.js      # Detects images on pages
|   +-- image-blocker.js       # Handles blur/block effects
|-- lib/
|   |-- storage.js             # Chrome storage utilities
|   |-- local-classifier.js    # Heuristic pre-filter
|   +-- openai-client.js       # OpenAI Vision API client
|-- popup/                     # Extension popup UI
+-- options/                   # Settings page

Privacy

• No data collection: The extension doesn't collect or transmit any user data
• API requests: Images are sent to OpenAI's API for analysis (if configured)
• Local processing: Without an API key, only local heuristics are used
• No storage: Analyzed images are not stored; only statistics counters are kept

Limitations

• API costs: Accurate classification requires OpenAI API usage
• Speed: API calls add latency; images remain blurred until analyzed
• Accuracy: Detection depends on AI model capabilities
• Service worker constraints: TensorFlow.js would require offscreen documents (future enhancement)

Troubleshooting

Images not being filtered

1. Ensure the extension is enabled (check popup toggle)
2. Verify a target show is configured
3. Check if the site is whitelisted
4. Ensure images meet minimum size (100x100px)

Images staying blurred

1. Check if API key is configured and valid
2. Without an API key, uncertain images remain blurred
3. Check the browser console for errors

Extension not loading

1. Ensure all files are present in the extension folder
2. Check Chrome's extension error page for details
3. Try reloading the extension

Development

Local Development

1. Make changes to the source files
2. Go to chrome://extensions/
3. Click the refresh button on the extension card
4. Test changes on web pages

Future Enhancements

• Offscreen document for TensorFlow.js/MobileNet local classification
• Support for multiple shows
• Image caching to reduce API calls
• Sync settings across devices
• Export/import settings

License

MIT License - See LICENSE file for details

Credits

Built with:

• OpenAI Vision API for image analysis
• Chrome Extensions Manifest V3