🚀 Getting Started with DioShiftes

Extension for Chromium based browsers. DioShiftes allows you to change the parameters of videos and images on a website.

How to Install the Extension in Chrome/Chromium Browsers

Follow these simple steps to load and start using DioShiftes:

Step 1: Open Chrome Extensions Page

1. Open your Chromium-based browser (Chrome, Edge, Opera, Brave, etc.)
2. In the address bar, type one of these URLs depending on your browser:
   • Chrome: chrome://extensions/
   • Microsoft Edge: edge://extensions/
   • Opera: opera://extensions/
   • Brave: brave://extensions/

Alternatively:

• Click the ⋮ (three dots) menu in the top-right corner
• Select More tools → Extensions

Step 2: Enable Developer Mode

Look for the Developer mode toggle in the top-right corner of the extensions page.

• Click to enable it (it should turn blue/highlighted)

Step 3: Load the Extension

Once Developer mode is enabled, three new buttons will appear:

• Load unpacked
• Pack extension
• Update extensions now

Click Load unpacked

Step 4: Select the Extension Folder

A file picker dialog will open. Navigate to the DioShiftes project folder and select:

DioShiftes/.output/chrome-mv3/

This folder contains the built extension files ready to be loaded.

Step 5: Extension Installed ✅

You should now see DioShiftes in your extensions list with a purple/blue icon.

---

How to Use DioShiftes

Option 1: Using the Popup (Quickest)

1. Click the DioShiftes icon in your browser toolbar (usually top-right)
2. The popup window opens showing all media parameters
3. Adjust sliders as needed - changes apply instantly!
4. Click on a saved profile to quickly switch parameter sets
5. Create a New Profile to save your current settings

Option 2: Using the Slide Panel (On Any Webpage)

1. While viewing any webpage, press Alt + V (or Cmd+Shift+V on Mac)
2. A slide panel appears from the right side of the screen
3. Adjustyour media parameters
4. The panel applies changes to videos and images on that page
5. Close the panel by:
   • Pressing Alt + V again, or
   • Clicking the × button, or
   • Clicking outside the panel

---

Features Overview

🎚️ Media Parameters

Parameter	Range	Effect
Brightness	0-200%	Makes content brighter or darker
Contrast	0-200%	Increases or decreases color contrast
Gamma	50-200%	Adjusts midtone brightness
Color Temperature	3000K-10000K	Warmth: Orange (warm) ↔ Blue (cool)
Edge Sharpness	-100 to +100	Enhances or softens edges
Playback Speed	0.25x-2x	Slows down or speeds up videos
Volume Booster	0-200%	Increases audio volume

💾 Profiles System

Save multiple configurations for different content types:

• Movie Profile: High contrast, normal speed
• Gaming Profile: High brightness, 1.5x speed
• Night Mode: Warm colors, reduced brightness
• ... Create any combination!

⌨️ Default Shortcuts

• Toggle Slide Panel: Alt + V (Windows/Linux) or Cmd+Shift+V (Mac)

See wxt.config.ts to customize this shortcut.

---

🔧 Development & Building

First Time Setup

# Clone the repository (if you haven't)
git clone https://github.com/domintes/DioShiftes.git
cd DioShiftes

# Install dependencies
npm install

Development Mode (With Hot Reload)

npm run dev

Then reload the extension manually in chrome://extensions/ or use the browser's reload feature.

Production Build

npm run build

Output will be in .output/chrome-mv3/

Create ZIP for Distribution

npm run zip

Creates dioshiftes.wxt.zip ready for uploading to the Chrome Web Store (future feature).

---

🐛 Troubleshooting

"This extension cannot be loaded"

• Make sure you're selecting the .output/chrome-mv3/ folder, not the root project folder
• The folder must contain manifest.json

Panel/Popup doesn't appear

• Ensure Developer mode is ON in chrome://extensions/
• Check if the extension is Enabled (toggle switch should be ON)
• Try reloading the extension or the webpage

Keyboard shortcut doesn't work

• Some keyboard shortcuts may conflict with browser or OS shortcuts
• Edit wxt.config.ts and change the suggested_key values
• Rebuild with npm run build

Changes don't appear

• Hard refresh the webpage: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
• Close and reopen the popup
• Unload and reload the extension

Web Audio API errors

• Some browsers restrict Web Audio API on certain websites
• Volume control may not work on all audio sources
• This is a browser security feature, not a bug

---

📝 Next Steps

1. ✅ Load the extension (you've done this!)
2. 🎚️ Explore the parameters on YouTube, Netflix, or other video sites
3. 📌 Create profiles for your favorite settings
4. ⌨️ Customize the keyboard shortcut if needed
5. 📢 Share DioShiftes with friends!

---

🤝 Need Help?

• Check the GitHub Issues page
• Report bugs or request features
• See the main README.md for more information

---

Happy enhancing! 🎬✨