Tab Highlighter

A cross-browser extension for Chrome and Firefox that highlights GitHub repository tabs with custom colors and indent levels, enhancing code readability and navigation.

🦊 Available on Firefox Add-ons with automatic updates.

✨ Available on Microsoft Edge Addons.

🌐 Chrome support via GitHub Releases.

📚 Table of Contents

• Tab Highlighter
  • 📚 Table of Contents
  • Features
  • Installation & Usage
    • Firefox (Recommended)
    • Edge (Recommended)
    • Manual Installation
      • Chrome / Chromium
      • Firefox (manual)
      • Edge (manual)
    • Using the Extension
  • Contributing
  • Project Structure
  • For Developers
    • Prerequisites
    • Setup
  • Building (For Developers)
    • Build for Chrome
    • Build for Firefox
  • Loading the Extension
    • Chrome
    • Firefox
    • Edge
    • Manifest Files
  • Roadmap
  • License

Features

• 🌐 Works on both Chrome and Firefox
• ⚡ Lightweight and fast
• 💾 Persistent tab highlighting
• 🎯 Easy-to-use popup interface
• 🎨 Customizable indent levels
• 🎨 Highlight tabs with custom colors
• 🔧Consider files indent level while highlighting

Installation & Usage

Firefox (Recommended)

The extension is officially published on Firefox Add-ons (AMO).

👉 Install from Firefox Add-ons:

This provides automatic updates and does not require Developer Mode.

Edge (Recommended)

The extension is officially published on Microsoft Edge Addons.

👉 Install from Microsoft Edge Addons:

Manual Installation

Pre-built extension packages are available on the GitHub Releases page. This is the easiest way to install the extension — no build step required.

👉 Download the latest release: https://github.com/nihaltp/tab-highlighter/releases/latest

Each release includes:

• tab-highlighter-chrome.zip — for Chrome / Chromium browsers
• tab-highlighter-firefox.zip — for Firefox

Chrome / Chromium

1. Download tab-highlighter-chrome.zip
2. Extract the ZIP
3. Open chrome://extensions/
4. Enable Developer mode
5. Click Load unpacked
6. Select the extracted folder

Firefox (manual)

⚠️ Manual installation is intended for testing and development.

For daily use, installing from Firefox Add-ons is strongly recommended.

1. Download tab-highlighter-firefox.zip
2. Open about:addons
3. Click the ⚙️ menu → Install Add-on From File
4. Select the ZIP file

Edge (manual)

⚠️ Manual installation is intended for testing and development.

For daily use, installing from Microsoft Edge Addons is strongly recommended.

1. Download tab-highlighter-edge.zip
2. Open edge://extensions/
3. Enable Developer mode
4. Click Load unpacked
5. Select the extracted folder

Using the Extension

Go to any GitHub repository file page (e.g. browsing files in a repo). Tabs will be highlighted automatically.

Contributing

Contributions are welcome! Bug fixes, feature suggestions, and pull requests are appreciated. For major changes, please open an issue first to discuss your ideas.

Project Structure

tab_highlighter/
├── .github/
│   └── workflows/
│       └── build.yml          # GitHub Actions workflow for building the extension
│
├── .husky/
│   └── pre-commit             # Pre-commit hook for linting and formatting
│
├── dist/                      # Compiled output
│
├── icons/                     # Extension icons
│
├── manifests/
│   ├── manifest.chrome.json   # Chrome extension manifest (Manifest V3)
│   ├── manifest.firefox.json  # Firefox extension manifest (Manifest V3)
│   └── manifest.edge.json     # Edge extension manifest (Manifest V3)
│
├── node_modules/              # Project dependencies
│
├── scripts/
│   ├── build.js               # Build script
│   └── update-manifests.js    # Script to update manifest files
│
├── src/
│   ├── content/
│   │   ├── content.js             # Content script injected into pages
│   │   └── content.css            # Content styling
│   └── popup/
│       ├── popup.css              # Popup styling
│       ├── popup.html             # Popup HTML
│       └── popup.js               # Popup JavaScript
│
├── .gitignore                 # Git ignore rules
├── .prettierrc                # Prettier configuration for consistent formatting
├── LICENSE                    # MIT License
├── package-lock.json          # Locked dependency versions
├── package.json               # Project dependencies and scripts
└── README.md

For Developers

Prerequisites

• npm

Setup

1. Clone the repository:

git clone https://github.com/nihaltp/tab-highlighter.git
cd tab-highlighter

2. Install dependencies:

npm install

Building (For Developers)

Build for Chrome

npm run build:chrome

The packaged extension will be in dist/chrome/.

Build for Firefox

npm run build:firefox

The packaged extension will be in dist/firefox/.

Loading the Extension

Chrome

1. Open chrome://extensions/
2. Enable "Developer mode" (toggle in top right)
3. Click "Load unpacked"
4. Navigate to dist/chrome/ and select it
5. The extension will be loaded and ready to use

Firefox

1. Open about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on"
3. Navigate to dist/firefox/manifest.json and select it
4. The extension will be loaded and ready to use

Edge

1. Open edge://extensions/
2. Enable "Developer mode" (toggle in bottom left)
3. Click "Load unpacked"
4. Navigate to dist/edge/ and select it
5. The extension will be loaded and ready to use

Manifest Files

• manifest.chrome.json: Chrome-specific configuration
• manifest.firefox.json: Firefox-specific configuration
• manifest.edge.json: Edge-specific configuration

Roadmap

• Allow users to set custom colors for different file types
• Consider files' indent levels while highlighting tabs
• Chrome Web Store publishing

License

MIT License - see LICENSE file for details