Skip to content

README.md

Latest commit

 

History

History
211 lines (156 loc) · 6.79 KB

README.md

File metadata and controls

211 lines (156 loc) · 6.79 KB
Raw

TrumpSwap chrome extension

A Chrome extension (Manifest V3) that replaces Trump-related terms and images on webpages with configurable lorem ipsum text and orange placeholder images. Fully customizable via the options page with support for English and Dutch.

Features

✨ Configurable Text Replacement

  • Replace Trump-related terms with custom lorem ipsum or any text you prefer
  • Enter multiple replacement texts (one per line) for random selection

🖼️ Image Replacement

  • Automatically detects and replaces images containing "trump" in metadata
  • Replaces <img> tags, <source srcset> elements, and CSS background images
  • Uses an inline SVG orange placeholder image

🌍 Multi-Language Support

  • English and Dutch UI language options
  • Settings saved per language preference

⚙️ Advanced Options

  • Enable/disable the extension without uninstalling
  • Case-sensitive or case-insensitive filtering
  • Periodic DOM rescanning (every 2 seconds) for stubborn stylesheet updates
  • Mutation observer for dynamic content detection

Installation

From Chrome Web Store

(If published)

Manual Installation (Developer Mode)

  1. Clone or download this repository
  2. Open Chrome and navigate to chrome://extensions
  3. Enable Developer mode (toggle in top right)
  4. Click "Load unpacked"
  5. Select the project folder

The extension is now active on all websites you visit!

Usage

Opening Settings

Option 1: Right-click the extension icon → "Options"

Option 2: Go to chrome://extensions → Find "Trump Text Replacer" → Click "Details" → "Extension options"

Configuring Filters

Extension Status

  • Toggle "Extension enabled" to temporarily disable/enable without uninstalling

Filter Words

  • Enter one search term per line (e.g., "Trump", "Donald Trump")
  • All occurrences are replaced (case-sensitive or insensitive based on settings)
  • Default: Trump, Donald Trump, President Trump, Trump Jr.

Replacement Text

  • Enter one replacement text per line
  • Each replacement randomly selects from these options
  • Default: Lorem ipsum sentences

Options

  • Case-sensitive filtering: When enabled, "Trump" ≠ "trump"
  • Language: Choose between English (English) or Dutch (Nederlands)

How It Works

  1. Settings Storage: All settings are stored in chrome.storage.sync

    • Synchronizes across devices using the same Google account
    • Persists between browser sessions

  2. Content Script: On every page load, the content script:

    • Fetches settings from chrome.storage.sync
    • Checks if the extension is enabled
    • Builds a dynamic regex from your filter words
    • Scans the entire DOM for text, images, and backgrounds
    • Replaces matches with your configured text/images

  3. Dynamic Updates: A MutationObserver watches for:

    • New DOM elements being added
    • Attribute changes (src, alt, style, etc.)
    • Periodic rescans every 2 seconds for stubborn stylesheets

File Structure

trump-text-replacer/
├── manifest.json           # Chrome extension configuration (Manifest V3)
├── content.js              # Main script that performs replacements
├── options.html            # Settings page UI
├── options.js              # Settings page logic (load/save)
├── options.css             # Settings page styling
├── icons/
│   ├── icon16.png          # Extension icon (16x16)
│   ├── icon48.png          # Extension icon (48x48)
│   └── icon128.png         # Extension icon (128x128)
└── README.md               # This file

Technical Details

Manifest V3

  • Modern Chrome extension format
  • Supports chrome.storage.sync for settings persistence
  • Uses options_ui for the settings page
  • Content script matches all http://* and https://* URLs

Regex Generation

Filter words are escaped and combined into a word-boundary regex:

  • Case-sensitive: /\b(Trump|Donald Trump|President Trump|Trump Jr\.)\b/g
  • Case-insensitive: /\b(Trump|Donald Trump|President Trump|Trump Jr\.)\b/gi

Image Detection

Images are considered "Trump-related" if they contain "trump" (case-insensitive) in:

  • alt attribute
  • title attribute
  • aria-label attribute
  • src URL
  • Background image URL

DOM Traversal

  • Text nodes: TreeWalker skips <script>, <style>, <textarea>, <input> elements
  • Attributes: Mutation observer monitors src, alt, title, srcset, style, class
  • Rescan: Every 2 seconds to catch dynamic content and stylesheet changes

Localization

Text strings are managed in options.js via the TRANSLATIONS object:

const TRANSLATIONS = {
  en: { /* English strings */ },
  nl: { /* Dutch strings */ }
};

Add more languages by:

  1. Adding a new language object to TRANSLATIONS
  2. Adding a new <option> to the language selector in options.html
  3. Updating the UI text with data-i18n attributes

Browser Support

  • Chrome 88+ (Manifest V3 support)
  • Edge 88+ (Chromium-based)
  • Other Chromium browsers (Opera, Brave, etc.)

Privacy

  • ✅ No tracking or analytics
  • ✅ Settings stored locally via chrome.storage.sync
  • ✅ No data sent to external servers
  • ✅ Open source and auditable

License

MIT License - See LICENSE file for details

Contributing

Found a bug? Have a feature request? Feel free to open an issue or submit a pull request!

Development Tips

  1. Modify content.js for text/image replacement logic
  2. Modify options.html for UI changes
  3. Update options.js for new settings or translation strings
  4. Modify options.css for styling

After changes:

  • Go to chrome://extensions
  • Click the reload icon next to "Trump Text Replacer"
  • Test on a webpage

Troubleshooting

Extension not replacing text

  1. Check if "Extension enabled" is toggled on
  2. Verify filter words are entered correctly
  3. Hard-refresh the page (Ctrl+Shift+R)
  4. Reload the extension via chrome://extensions

Images still showing

  1. Some images may not be detected if they don't contain "trump" metadata
  2. Add more specific filter words in settings
  3. Check console for errors (F12 → Console)

Settings not saving

  1. Ensure you're using a Google account (required for chrome.storage.sync)
  2. Check that sync is enabled in Chrome settings
  3. Try saving again; sync can take a few seconds

Version History

v2.0.0 (Current)

  • ✨ Options page with full customization
  • 🌍 Multi-language support (English/Dutch)
  • 📦 chrome.storage.sync for settings persistence
  • 🖼️ Advanced image replacement (backgrounds, srcset)
  • ⚡ Improved performance with targeted DOM scanning

v1.0.0

  • Initial release with basic text/image replacement
  • Hardcoded Trump terms and lorem ipsum replacements

Made with ❤️ for a more serene web browsing experience