๐Ÿ”– Smart Labels

Smart Labels let you instantly label text on any webpage, making it easy to convert currencies or units and customize content for clarity. ๐Ÿ˜Š

๐Ÿš€ Why You'll Love Smart Labels

  • ๐ŸŽฏ Replace Anything: Swap text patterns with custom labels.
  • ๐Ÿ’ฑ Currency Conversion: Real-time exchange rates.
  • ๐Ÿ“ Unit Conversions: Length, weight, volumeโ€”you name it.
  • ๐ŸŽจ Style It Your Way: Choose from 30+ label styles.
  • ๐ŸŒ Domain-Specific Smarts: Configurations auto-save and apply to any page of the website you visit in the future.

Try it outโ€”you'll find it super convenient! ๐Ÿ™Œ

๐Ÿ› ๏ธ How to Use

๐Ÿ–ผ๏ธ Demo Screenshot

  • Here's a screenshot showcasing different Smart Labels you can use when shopping.
  • Don't be intimidated. You can add one or hundreds of labels! ๐Ÿ‘‰

Smart Labels Demo

๐Ÿ–๏ธ Add Label

  1. Choose Label Type:
    • Text: Simple word or phrase matching.
    • Regex: Advanced pattern matching.
    • Custom Unit: Create your own conversion.
    • Currency: Auto-detect and convert any currency (USD, EUR, JPY, etc.).
    • Units: Auto-detect and convert units (length, weight, volume, etc.).
  2. Fill All Fields:
    • Before Pattern:
      • For Text or Regex: Enter the pattern to match.
      • Auto-filled for unit types. Customize as needed.
    • After:
      • For Text or Regex: Input your replacement word or phrase.
      • For Currencies or Units: Choose your target (e.g., Convert USD โ†’ EUR).
    • Conversion Rate:
      • For unit types only. Auto-filled and adjustable.
  3. Click "+": The add label button ("+") is only enabled when all fields are filled and valid. Click to save the config and see the effect.
  • The fields autocomplete! Simply type to search for the option.
  • Scroll to the right to see the entire row on small screens.
  • Click the "x" icon to clear the field.
  • If you want to do some math ๐Ÿ˜‰: 1 After-unit = rate * Type-unit

โœ๏ธ Edit Label

See the Effect in Real-time!

Click any field to modify saved configurations.

See the effect immediately (for text fields, click on empty spaces of the config table).

๐Ÿ—‘๏ธ Delete Label

Use the trash icon to delete labels.

๐Ÿ•ต๏ธ Hide Label

Easily hide labels to view the original content:

  • Touch Screen: Tap on the label to hide it for 3 seconds.
  • Mouse: Hover over the label to hide it and show the content it covers.

๐ŸŽจ Display Style

Display styles have two aspects: position and color. You can label different things in different styles.

Position

Choose how you want your label to be positioned relative to the original text:

  • On-Top: Default position, displays on top of the original text.
  • Beside: Displays beside the original text.
  • Below: Displays below the original text.
  • In-Place: Simply inserts blue text after the original text.

Refer to the demo screenshot to see how these styles look.

Color

Select the color style for your label:

  • Blue ๐Ÿ’™
  • Green ๐Ÿ’š
  • Yellow ๐Ÿ’›
  • Red โค๏ธ
  • Gradient ๐ŸŒˆ
  • BlackOnWhite ๐Ÿ–ค
  • WhiteOnBlack ๐Ÿค
  • WhiteOnBlue ๐ŸŒ€
  • Purple ๐Ÿ’œ
  • Pink ๐Ÿ’–
  • Orange ๐ŸŠ
  • Brown ๐ŸŸค

๐Ÿค“ Examples

Smart Labels can be used in many creative ways. Whether you're reading articles, shopping, doing research, or watching videos.

  • International Travel & Shopping: Automatically convert prices to your preferred currency.
  • Reading: Highlight important terms with different styles.
  • Research: Replace technical jargon with simpler terms for better understanding.

โœ๏ธ Text Replacement

  • Type: Text
  • Before: HuBrowser (YouTube Channel name)
  • After: Nice! (your personal annotation)
  • Style: Gradient

๐Ÿ’ฐ Currency Conversion

  • Type: EUR
  • Before: Auto-filled
  • After: USD
  • Rate: Auto-filled with the latest exchange rate.
  • Result: e.g. โ‚ฌ93.50 โ†’ $99.99

๐Ÿ“ Unit Conversion

  • Type: Length/inches
  • Before: (auto-filled)
  • After: Length/cm
  • Rate: (auto-filled)

๐Ÿ› ๏ธ Troubleshoot

Follow these simple steps to troubleshoot:

  1. Check "Before" field: Does the "Before" pattern match your target text?
  2. Try different styles: Depending on the website, some styles work better than others.
  3. Refresh: Reload the webpage to apply changes.