XSafe - Twitter/X Content Filter

Block NSFW content on Twitter/X • Zero data collection • Local processing only • Free forever

📢 Current Status - Chrome Web Store Submission Ready

🎉 Major Update v0.1.0: XSafe is now ready for Chrome Web Store publication!

✅ All Critical Errors Fixed: Resolved TypeError, connection errors, and DOM manipulation issues
✅ Chrome Web Store Compliant: Enhanced error handling, privacy-first architecture, Manifest V3
✅ Extension Package Ready: xsafe-extension-v0.1.0.zip prepared for Chrome Web Store upload
✅ Zero Data Collection: Privacy advantage with no data collection requirements
✅ Professional Documentation: Complete technical architecture and submission guides

Next: Chrome Web Store review process (1-7 days expected timeline)

👨‍💻 Author

Andy Bo Wu - Privacy-focused Chrome extension developer

🌐 Website: https://andybowu.xyz/
🐦 Twitter/X: https://x.com/andybowu
💼 LinkedIn: https://www.linkedin.com/in/andybowu/

XSafe is a privacy-focused Chrome extension that blocks NSFW images and videos on Twitter/X timeline without collecting any personal data. All processing happens locally on your device with optimized performance. XSafe will always be completely free with no premium features or subscriptions.

🚀 Features

🛡️ NSFW Protection: Block inappropriate images and videos on Twitter/X timeline
🎯 Granular Filtering: Hide only media content while preserving post text, usernames, and engagement buttons
📊 Privacy-First: No data collection, tracking, or external servers
⚙️ Simple Toggle: Easy Safe Mode switch - one toggle for complete protection
🔒 Local Processing: Everything processed on your device only
⚡ Optimized Performance: Lightweight with 1-second scanning for fast content detection
🎨 Smart Content Preservation: Post structure remains intact while filtering visual content
🚫 Profile Picture Protection: Smart filtering that excludes avatars and UI elements
🔧 Automatic Content Hiding: Filtered images and videos disappear completely for cleaner browsing
💰 Free Forever: No premium features, no subscriptions, completely free to use

🎯 Perfect For

👥 Professional Use: Safe Twitter/X browsing in workplace environments
👨‍👩‍👧‍👦 Family Safety: Protect family members from NSFW content
📚 Educational Settings: Safe social media access in schools/libraries
🏢 Corporate Networks: Maintain professional browsing standards
🔒 Privacy Conscious: Users who want content filtering without data collection

💫 Current Interface

Simple Safe Mode Toggle:

Normal Mode: Content displays normally
Safe Mode: Automatically hides images and videos while preserving post text and structure
Visual Feedback: Green background when Safe Mode is active
Content Preservation: Posts remain readable with usernames, text, and engagement buttons visible
GitHub Link: Direct access to source code for transparency

⚡ Performance Optimizations

Recent performance improvements eliminate browser crashes:

🛡 Smart Scanning: 1-second periodic scanning with cooldown protection for responsive filtering
🎯 Granular Media Targeting: Precise targeting of images/videos while preserving post content
🧹 Memory Management: Automatic cleanup with limits (max 200 filtered elements)
📱 Efficient Observers: Targeted mutation detection with 1-second debouncing
💾 Caching: UI element detection caching to prevent repeated expensive checks
🔧 Proper Cleanup: All intervals, observers, and caches are properly managed
🎨 Content Preservation: Only hides media elements, maintaining post readability and functionality

🔒 Privacy Verification - Audit Our Claims

Don't just trust us - verify our privacy claims yourself! XSafe is designed to be completely auditable.

⚡ 1-Minute Privacy Audit

Verify ZERO external requests:

Install XSafe (or use the development version)
Open Twitter/X in your browser
Press F12 (Developer Tools)
Click "Network" tab
Browse Twitter/X for 5 minutes with XSafe active
Look for XSafe requests - you'll find ZERO external calls

# What you'll see in Network tab:
# ✅ Twitter/X requests (normal)
# ❌ NO requests from XSafe extension
# ✅ All processing happens locally

🔍 Source Code Audit

Verify no data collection in our code:

Search our codebase for external requests:

# Clone the repository
git clone https://github.com/AndyBoWu/xsafe.git
cd xsafe

# Search for any external network calls
grep -r "fetch\|XMLHttpRequest\|axios\|request" src/
# Result: No external API calls found!

Check data storage - only local Chrome APIs:

# Search for data storage
grep -r "chrome.storage" src/
# Result: Only local and sync storage (no external databases)

🛡️ Technical Privacy Guarantees

Privacy Measure	How to Verify	What You'll Find
No External APIs	Network tab in DevTools	Zero outgoing requests
Local Storage Only	`chrome://extensions/` → Inspect	Only browser storage used
Minimal Permissions	Extension details page	Only 3 basic permissions
Open Source	This GitHub repository	Every line of code visible
No Analytics	Search codebase for "analytics"	No tracking code found
No Telemetry	Search codebase for "telemetry"	No crash reporting found

📋 Extension Permissions Audit

We only request 3 minimal permissions:

"permissions": [
  "storage",     // ✅ Local settings only (no external DB)
  "activeTab",   // ✅ Current tab only (not all tabs)
  "scripting"    // ✅ DOM manipulation only (no network access)
]

"host_permissions": [
  "*://x.com/*",      // ✅ Twitter/X only
  "*://twitter.com/*" // ✅ Twitter redirect support
]

Compare with other extensions that often request:

❌ tabs (access to all tabs)
❌ history (browsing history)
❌ cookies (tracking data)
❌ identity (personal information)
❌ http://*/* (access to all websites)

🔐 Content Security Policy

Our CSP prevents external code injection:

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}

What this means:

✅ Only our own code can run
❌ No external scripts allowed
❌ No remote resources loaded
❌ No code injection possible

📖 Open Source Transparency

Full source code available:

Repository: https://github.com/AndyBoWu/xsafe
License: MIT (complete transparency)
No hidden builds: Webpack config is public
No obfuscation: All code is readable

Community auditing:

🔍 Security researchers: Please audit our code
🐛 Bug reports: Report privacy concerns via Issues
🤝 Contributions: Help improve privacy through PRs

🚨 Red Flags We DON'T Have

✅ XSafe has NONE of these privacy concerns:

❌ No Google Analytics or tracking pixels
❌ No external CDNs or fonts
❌ No crash reporting services (Sentry, Bugsnag)
❌ No A/B testing platforms
❌ No advertising networks
❌ No user accounts or registration
❌ No cloud storage or syncing
❌ No encrypted "anonymous" data collection

💡 Privacy Verification Tips

For privacy advocates:

# Advanced verification techniques:
1. Network traffic analysis with Wireshark
2. Static code analysis with ESLint security rules
3. Extension sandboxing with Chrome DevTools
4. Manifest.json permission analysis

For everyday users:

Check Network tab (should show 0 XSafe requests)
Compare our permissions vs other extensions
Read our source code (it's surprisingly readable!)

🔒 Privacy Promise: If you find ANY external data transmission in XSafe, please report it immediately. We're committed to absolute transparency.

🔗 Installation

Chrome Web Store (Coming Soon)

🚀 In Review: XSafe is currently under review for the Chrome Web Store. Once approved, it will be available for easy one-click installation.

📦 Current Status: Extension package ready (xsafe-extension-v0.1.0.zip) with all error fixes applied and Chrome Web Store compliance achieved.

Manual Installation (Developer Mode)

Download the latest release from GitHub Releases
Extract the ZIP file
Open Chrome and go to chrome://extensions/
Enable "Developer mode" in the top right
Click "Load unpacked" and select the extracted folder
The extension will appear in your browser toolbar

Build from Source

git clone https://github.com/AndyBoWu/xsafe.git
cd xsafe
npm install
npm run build
# Load the 'dist' folder as an unpacked extension in Chrome

🛠️ Development

Prerequisites

Node.js 16+
npm 8+
Git

Quick Start

# Clone the repository
git clone https://github.com/AndyBoWu/xsafe.git
cd xsafe

# Install dependencies
npm install

# Development build with file watching
npm run dev

# Production build
npm run build

# Run tests
npm test

# Lint code
npm run lint

Build System

XSafe uses Webpack for building with the following features:

Available Scripts

# Development
npm run dev          # Watch mode with source maps
npm run build:dev    # Development build (one-time)

# Production
npm run build        # Optimized production build
npm run package      # Build + create extension zip

# Testing & Quality
npm test             # Run Jest tests
npm test:watch       # Watch mode testing
npm run lint         # ESLint code checking
npm run lint:fix     # Auto-fix linting issues

# Analysis
npm run analyze      # Bundle size analysis
npm run clean        # Clean dist directory

Build Features

✅ Multi-Entry Points: Separate bundles for background, content, popup, options ✅ Code Splitting: Optimized chunking for better performance ✅ CSS Processing: PostCSS with autoprefixing and minification ✅ Asset Management: Automatic handling of images, fonts, icons ✅ Source Maps: Available in development mode ✅ Bundle Analysis: Webpack Bundle Analyzer integration ✅ File Validation: Build verification and size checking ✅ Chrome Extension Optimized: Manifest handling and extension structure

Project Structure

xsafe/
├── src/
│   ├── background/       # Service worker
│   ├── content/          # Content scripts
│   ├── popup/            # Extension popup
│   ├── options/          # Settings page
│   └── utils/            # Shared utilities
├── dist/                 # Built extension (generated)
├── tests/                # Test files
├── scripts/              # Build scripts
├── webpack.config.js     # Webpack configuration
├── package.json          # Dependencies & scripts
└── manifest.json         # Extension manifest

Development Workflow

Start Development:
```
npm run dev
```
This starts webpack in watch mode with source maps.
Load Extension:
- Open chrome://extensions/
- Enable "Developer mode"
- Click "Load unpacked" and select the dist/ folder
Make Changes:
- Edit source files in src/
- Webpack automatically rebuilds
- Reload extension in Chrome to test
Production Build:
```
npm run build
```
Creates optimized build in dist/ folder.

Testing

XSafe uses Jest with Chrome extension API mocking:

# Run all tests
npm test

# Watch mode (re-run on changes)
npm test:watch

# Coverage report
npm test -- --coverage

Test files should be placed alongside source files with .test.js or .spec.js extensions.

Code Quality

ESLint: Configured for Chrome extensions with modern JavaScript
Prettier: Code formatting (integrated with ESLint)
Babel: ES6+ transpilation for Chrome compatibility

📦 Extension Structure

Background Script (`background.js`)

Settings management
Content filtering logic
Statistics tracking
Chrome API interactions

Content Script (`content.js`)

DOM manipulation
Real-time content filtering
Performance optimization

Popup (`popup.html/js/css`)

Quick settings toggle
Current page statistics
Domain whitelisting

Options Page (`options.html/js/css`)

Advanced configuration
Domain management
Statistics dashboard
Privacy settings

🏗️ Build Output

The build process generates:

dist/
├── manifest.json         # Updated extension manifest
├── background.js         # Service worker bundle
├── content.js            # Content script bundle
├── popup.html            # Popup page
├── popup.js              # Popup bundle
├── popup.css             # Popup styles
├── options.html          # Options page
├── options.js            # Options bundle
├── options.css           # Options styles
└── icons/                # Extension icons

🔧 Configuration

Webpack Configuration

The webpack.config.js provides:

Multiple Entry Points: Each extension component has its own bundle
Environment-Specific Builds: Different configs for dev/prod
Chrome Extension Optimization: Specialized plugins and settings
Asset Processing: Images, fonts, CSS handling
Code Splitting: Vendor and common chunk separation

Babel Configuration

The .babelrc configures:

Target: Chrome 88+ for extension compatibility
Presets: Modern JavaScript features with polyfills
Environment-Specific: Different settings for dev/prod/test

📊 Bundle Analysis

Analyze bundle sizes and dependencies:

npm run analyze

This opens an interactive bundle analyzer showing:

Bundle composition
Module sizes
Dependency relationships
Optimization opportunities

🚢 Publishing

Create Production Build:
```
npm run package
```
This creates xsafe-extension.zip ready for Chrome Web Store.
Upload to Chrome Web Store:
- Visit Chrome Web Store Developer Dashboard
- Upload the generated zip file
- Fill out store listing details

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Run tests: npm test
Run linting: npm run lint
Create a pull request

📄 License

MIT License - see LICENSE file for details.

🔗 Links

XSafe - Protecting your privacy while browsing, one filter at a time. 🛡️

Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
docs		docs
icons		icons
scripts		scripts
src		src
tests		tests
.babelrc		.babelrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
CHROME_STORE_SUBMISSION.md		CHROME_STORE_SUBMISSION.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
manifest.json		manifest.json
package-lock.json		package-lock.json
package.json		package.json
playwright.config.js		playwright.config.js
webpack.config.js		webpack.config.js
xsafe-extension-v0.1.0.zip		xsafe-extension-v0.1.0.zip

Folders and files

Latest commit

History

Repository files navigation