https://github.com/himanshurajora/web-badger

A simple browser extension to visually tag websites with customizable colored labels. Helps distinguish between different environments (e.g., dev, staging, prod) or similar-looking sites.
https://github.com/himanshurajora/web-badger

badge chrome chrome-extension devtools extension javascript markers menifest

Last synced: about 2 months ago
JSON representation

A simple browser extension to visually tag websites with customizable colored labels. Helps distinguish between different environments (e.g., dev, staging, prod) or similar-looking sites.

• Host: GitHub
• URL: https://github.com/himanshurajora/web-badger
• Owner: himanshurajora
• Created: 2025-04-07T07:20:12.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-07T07:22:17.000Z (about 1 year ago)
• Last Synced: 2025-10-04T06:59:47.603Z (9 months ago)
• Topics: badge, chrome, chrome-extension, devtools, extension, javascript, markers, menifest
• Language: JavaScript
• Homepage: https://chromewebstore.google.com/detail/mhcjmgpkjgjkepdhiknakljhehiahofb?utm_source=item-share-cb
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Website Color Tagger

A simple browser extension to visually tag websites with customizable colored labels.

Helps distinguish between different environments (e.g., dev, staging, prod) or similar-looking sites.

## Features

*   Adds a customizable colored tag to configured web pages.

*   Globally enable/disable the extension.

*   Enable/disable tags on a per-domain basis.

*   **Extensive Customization (per domain):**

    *   **Label**: Set custom text (e.g., DEV, STAGE).

    *   **Position**: Choose corner (top-left, top-right, bottom-left, bottom-right).

    *   **Shape**: Select shape (rectangle, pill, circle).

    *   **Size**: Define width and height.

    *   **Opacity**: Control tag transparency.

    *   **Font**: Customize family (optional), size, weight, and color.

    *   **Background**: Set solid color or apply linear gradients.

    *   **Border**: Configure width, style, color, and radius.

    *   **Effects**: Add entrance animations (fade-in, slide-in) and hover effects (move-opposite-corner, change-opacity, grow).

*   Automatic default color generation based on domain name.

*   Automatic default label generation (first 2 letters of domain).

*   Dark/Light mode support for the popup configuration.

*   Settings are synced across devices (if browser sync is enabled).

*   Option to reset settings per-site or globally.

## How to Use

1.  Install the extension.

2.  Click the extension icon in your browser toolbar to open the configuration popup.

3.  The popup shows settings for the **current website** you are visiting.

4.  **Enable Tag for this Site**: Check this box to activate the tag for the current domain.

5.  **Customize**: Expand the sections (General, Font, Border, Effects) to configure:

    *   Label, Position, Shape, Size, Opacity.

    *   Font Size, Weight, Color.

    *   Background Color and Gradient options.

    *   Border Width, Style, Color, Radius.

    *   Entrance Animation and Hover Effect.

6.  Click **Save Site Settings**.

7.  The tag should now appear on the website (you might need to refresh the page).

8.  Use the **Global Settings** toggle to turn the entire extension on or off.

9.  Manage all your configured sites under the **Configured Sites** section.

10. Use the **Reset** buttons carefully!

## Development

1.  Clone the repository.

2.  Load the extension in your browser (usually via `chrome://extensions/` or `about:debugging` and selecting "Load Unpacked").

3.  Make changes to the code.

4.  Reload the extension in your browser to see the changes.

## Files

*   `manifest.json`: Extension configuration.

*   `icons/`: Extension icons.

*   `src/background/background.js`: Background service worker (manages state, storage, communication).

*   `src/content/content.js`: Injected into web pages to display the tag.

*   `src/content/content.css`: Styles for the injected tag.

*   `src/popup/popup.html`: HTML structure for the configuration popup.

*   `src/popup/popup.css`: Styles for the popup (including light/dark themes).

*   `src/popup/popup.js`: JavaScript logic for the popup UI.

*   `src/common/utils.js`: Shared utility functions (settings management, defaults, etc.).

*   `README.md`: This file.