🎵 Custom Sounds

Available languages

Custom Sounds is an extension designed to personalize your web browsing experience by adding sound effects to different actions within your browser.

---

🖼️ Images

Settings Page

Event Customization Modal

---

✨ Features

• 🔊 Custom Sounds: currently, you can assign sounds to:

  • ➕ Open/Close tabs.
  • ⌨️ Keystrokes.

• 🛠️ Simple Configuration: intuitive interface to manage your audio files.

• 🚀 Lightweight: optimized to ensure no impact on browser performance.

⏭️ Upcoming Features Completed Features!!!

• 🎚️ Volume Control: because only you should decide how fast you want to destroy your ears.

• ⌨️ Multiple keys, same sound: so you can assign your favorite sounds to your keyboard.

💻 Technologies Used

• JavaScript (WebExtensionAPI): for background logic and browser events.

• HTML: for the options page.

• CSS (Tailwind CSS): for the interface design.

⬇️ Installation

For Users

Now available on AMO or, if you prefer, you can install it manually by downloading the distribution .zip for your browser from the Latest Release or by following the development steps.

Developer Guide (Manual Installation)

If you want to modify the extension or contribute to the code, follow these steps to set up your local environment.

1. Clone this repository

   git clone https://github.com/Kirutre/custom_sounds.git
   
   cd custom_sounds

2. Styles Management (Tailwind CSS)

   This extension uses Tailwind CSS for the interface. The output.css file is already included in the repository so the extension works immediately, but if you make design changes, you will need to recompile it.

   Recompile output.css

   1. Download the CLI executable for your operating system from Tailwind CSS Releases.

   2. Place the executable in the project root and rename it to tailwindcss-cli.

   3. Run the following command to compile and watch changes in real-time.

   ./tailwindcss-cli -i ./options/input.css -o ./options/output.css --watch --minify

Tip

If you have Node.js installed, you can avoid downloading the binary manually by using:

npx @tailwindcss/cli -i ./options/input.css -o ./options/output.css --watch --minify

3. Load for testing

   • In Firefox

     1. Rename manifest-firefox.json to manifest.json.

     2. Open Firefox and type about:debugging in the address bar.

     3. Click on "This Firefox".

     4. Click on "Load Temporary Add-on...".

     5. Select the manifest.json file inside the project folder.

   • In Chromium

     1. Rename manifest-chromium.json to manifest.json.

     2. Open your Chromium-based browser and type chrome://extensions/ in the address bar.

     3. Enable "Developer Mode".

     4. Click on "Load unpacked".

     5. Select the project root folder (where manifest.json is located).

🤝 Contributing

Contributions are what make software better, and I’m excited to see what you have to offer!

Please read the Contributing Guidelines to get started. Whether it's fixing a bug or suggesting a crazy new sound trigger, all help is welcome!

📝 License

Distributed under the MIT License. See the LICENSE file for more information.

📬 Contact

Kirutre - GitHub

Kirutre - contact.kirutre+firefox@gmail.com

Project Link: https://github.com/Kirutre/custom_sounds