Curtain - Chrome Extension

Curtain is a Chrome extension designed to give you control over visual elements on webpages. With Curtain, you can hide images, videos, SVGs, and backgrounds, or apply a greyscale filter to reduce distractions and create a more focused browsing experience.

Features

• Hide Images, Videos, SVGs, and Backgrounds: Customize your browsing experience by toggling the visibility of these elements.
• Greyscale Mode: Apply a greyscale filter to all visual elements on a webpage.
• Persistent Settings: Your preferences are saved per website, so they are automatically applied every time you visit.
• Easy Control Panel: Access all settings through a sleek and intuitive control panel.

Installation

Install Curtain directly from the Chrome Web Store: Curtain Extension Support the development: Budy me a coffee

Usage

1. Click the Curtain icon in your browser toolbar to open the control panel.
2. Use the checkboxes to toggle the visibility of images, backgrounds, videos, SVGs, and the greyscale filter.
3. Your settings are saved automatically for each website.

Development

TODOs:

• Add settings page
• Solve the permissions management to avoid the scary "Read and change all your data on all websites" alert.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add your feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Create a new Pull Request.

Support

If you have any issues or suggestions, please open an issue on GitHub or contact me directly.

License

This project is licensed under the CC BY-NC 4.0 License - see the LICENSE file for details.

---

Curtain - Simplify, Focus, Control.

Developer Notes - Shadow DOM Isolation

To prevent webpage styles from leaking into the control panel (which previously caused visual bugs), the control panel is now injected inside an open Shadow DOM. This isolates the extension's UI and inlines its CSS so pages cannot override our styles.

Quick smoke-test steps:

• Load the extension unpacked in Chrome/Edge/Firefox.
• Open a webpage with aggressive CSS (e.g., pages that set * { all: unset } or strong global font/color rules).
• Open the Curtain control panel via the extension action. The panel should appear styled consistently regardless of page styles.
• Toggle images/backgrounds/videos/SVGs and verify the page elements change while the panel remains visually unaffected.

If you find a site that still disturbs the UI, please report the page URL and a screenshot to help reproduce.

Global vs Website-specific rules

Behavior:

• By default, Curtain applies a single set of global settings to every website.
• In the control panel, users can enable "Add website specific rules" for the current site. When enabled, the extension stores a per-site rule that overrides the global defaults for that hostname.
• Users can remove a per-site rule with the "Remove site-specific rules" button, reverting that site to the global defaults.

Storage:

• Global defaults are stored under chrome.storage.local.globalSettings.
• Per-site rules are stored in an object chrome.storage.local.rules indexed by hostname.

This change keeps the common case simple (one set of preferences for all sites) while allowing exceptions for specific sites.