Firefox Extras: Refined Findbar

🎯

Centered & Fixed

The findbar stays centered and fixed in your viewport, making it easy to access without disrupting your browsing flow. No more hunting for the search box!

📐

Scalable Design

Adjust the size to match your preferences. From compact to large, the findbar scales beautifully while maintaining perfect proportions and readability.

🎨

Fully Customizable

Every aspect is configurable via SCSS. Change colors, positioning, behavior, button grouping, and element order to create your perfect search experience.

⚡

Performance Focused

Lightweight CSS implementation with smooth animations. No JavaScript dependencies, minimal resource usage, and optimized for daily use.

🔧

Easy Installation

Multiple installation methods including automated scripts for Windows, macOS, and Linux. Get up and running in seconds with our deployment tools.

🌍

Cross-Platform

Works seamlessly across all Firefox installations. Consistent experience whether you're on Windows, macOS, or Linux.

Installation Guide

Choose your preferred installation method.

📦 Installation Methods

🚀 Quick Install (Recommended)

Open PowerShell (Windows) or Terminal (macOS/Linux)
Run the installation command:

                iwr https://raw.githubusercontent.com/AlexanderReaper7/firefox-extras/main/scripts/deploy.ps1 | iex
              

⚠️ Always review remote scripts before running. Requires PowerShell Core on non-Windows platforms.

📁 Manual Installation

Download firefox-chrome.zip from Releases
Open Firefox profile folder (about:profiles → Open Folder)
Extract the chrome/ folder to your profile
Set toolkit.legacyUserProfileCustomizations.stylesheets = true in about:config
Restart Firefox

🛠️ Development Install

Clone the repository:

git clone https://github.com/AlexanderReaper7/firefox-extras.git

Install dependencies and build:

npm install && npm run build

Deploy to Firefox:

npm run deploy:local

⚙️ Configuration Options

The findbar can be customized using SCSS variables:


            
              $float: Enable floating/overlay mode
              $float-alignment: Position (top, bottom)
              $float-distance: Distance from viewport edge
              $buttons: Show prev/next navigation buttons
              $buttons-grouped: Group buttons visually with text box
              $hide-close-button: Show/hide the close button
              $hide-when-unfocused: Auto-hide when not in use
              $opacity-when-unfocused: Transparency when not focused (0-1)
              $fixed: Use fixed positioning (stays in viewport)
              $centered: Center horizontally on the page
              $scale: Scale factor for size (1.0 = default, 1.5 = 150%)
              $side-margin: Custom side margins (null = auto)
              $order: Customize the order of findbar elements