Learn

Master the Surface Filter Mode extension with tutorials and comprehensive documentation.

Video Tutorials

Coming soon! Video guides on how to use all features of the SFM extension.

Documentation

Introduction

Surface Filter Mode (SFM) is a powerful Chrome extension that allows you to apply beautiful visual filters and effects to any website in real-time. Transform web pages with custom filters, color adjustments, animations, and more.

Installation

  1. Download the SFM extension files
  2. Open Chrome and go to chrome://extensions/
  3. Enable "Developer mode" in the top right
  4. Click "Load unpacked" and select the extension folder
  5. The SFM icon will appear in your browser toolbar

Main Features

1. Site Enable/Disable

Use the toggle in the Filters panel to enable or disable SFM for the current website. This allows you to control where filters are applied.

2. Custom Filter Builder

Create unique filters using the Custom Filter panel:

  • Image Upload: Upload your own images to use as filter overlays
  • Blend Modes: Choose from 18 different blend modes including Normal, Multiply, Screen, Overlay, and more
  • Effects Controls:
    • Brightness: Adjust from 0% to 200%
    • Contrast: Adjust from 0% to 200%
    • Saturation: Adjust from 0% to 200%
    • Hue Rotate: Rotate colors 0-360 degrees
    • Sepia: Add sepia tone 0-100%
    • Grayscale: Convert to grayscale 0-100%
    • Invert: Invert colors 0-100%
    • Opacity: Control filter transparency 0-100%

3. Color Palette Builder

Create custom filters based on color palettes:

  • Pick colors using the color picker
  • Generate random filters from selected colors
  • Choose blend modes for the generated filter
  • Adjust opacity of the color-based filter

4. Text Color Customization

Change text appearance on web pages:

  • Apply custom text colors
  • Add text highlights with chosen colors
  • Toggle highlight mode on/off
  • Add round/curved text effects
  • Select custom fonts for text

5. Border Frames

Apply animated border effects around page elements:

  • Gradient spin effect
  • Neon glow effect
  • Fire wave effect
  • Matrix rain effect
  • Electric bolt effect
  • 3D perspective effect
  • Adaptive color sampler effect
  • Auto intense color effect

6. Cursor Customizer

Personalize your browser cursor:

  • Choose custom cursor colors
  • Adjust cursor opacity and size
  • Add blur effects
  • Enable gradient effects
  • Upload custom cursor images
  • Apply to all sites or current site only

7. Selection Settings

Apply filters to specific page elements:

  • Enable selection mode
  • Click "Select Object" to choose elements
  • Apply filters only to selected areas
  • Reset selections when needed

8. Loop Animation

Create animated effects from static images:

  • Generate looped animations from uploaded images
  • Reset animations

9. Only Back Customer

Apply effects only to website backgrounds:

  • Upload background images
  • Apply images only to page backgrounds, not UI elements
  • Clean background effects

10. Code Widget

Add custom code to websites:

  • Add custom HTML, CSS, and JavaScript
  • Choose between separate editors or combined HTML
  • Clear all added widgets

11. Adjust Color

Fine-tune color balance:

  • Hue adjustment (-180° to 180°)
  • Saturation (0% to 200%)
  • Lightness (-100% to 100%)
  • Warmth adjustment (-50K to 50K)
  • Vibrance (0% to 200%)

How to Use

  1. Click the SFM icon in your browser toolbar
  2. Enable SFM for the current site using the toggle
  3. Choose from preset filters or create custom ones
  4. Use the various panels to adjust effects
  5. Apply filters using the "Apply" buttons
  6. Use "Clear" to remove all filters

Troubleshooting

  • Filters not applying: Ensure SFM is enabled for the site and try refreshing the page
  • Performance issues: Some effects may slow down heavy websites. Try reducing opacity or disabling unused features
  • Selection mode not working: This feature may not work consistently on dynamic websites due to DOM changes. Position adjustments might be needed after page reload on complex sites like YouTube or SoundCloud
  • Browser compatibility: SFM is designed for Chrome. Other Chromium-based browsers may work but are not officially supported
  • Images not loading: Ensure uploaded images are in supported formats (PNG, JPG, GIF) and under reasonable file sizes
  • Effects not visible: Some websites use CSS that may override SFM effects. Try using selection mode to target specific elements
  • Extension not loading: Make sure all extension files are present and the manifest.json is valid

Tips

  • Experiment with different blend modes for unique effects
  • Use the color palette builder for harmonious color schemes
  • Combine multiple effects for complex filters
  • Save your favorite filter combinations for reuse
  • Use selection mode for precise control over filter application

Technical Notes

SFM uses advanced CSS filters and canvas manipulation to apply effects in real-time. The extension injects content scripts into web pages to modify their appearance without altering the original HTML/CSS.