YouTube Focus Mode & Speed Changer Extension

Overview

This Chrome extension enhances your YouTube experience by providing:

• Focus Mode: Hide distractions and focus on the video content.
• Speed Changer: Easily adjust playback speed with a simple UI.

Features

• Toggle focus mode to hide recommended videos, comments, and other distractions.
• Change video playback speed quickly from the popup.
• Clean and minimal UI for ease of use.

Installation

1. Download or clone this repository.
2. Open Chrome and go to chrome://extensions/.
3. Enable Developer mode (top right).
4. Click Load unpacked and select this extension's folder.
5. The extension icon will appear in your browser toolbar.

Usage

1. Open any YouTube video.
2. Click the extension icon to open the popup.
3. Use the Focus Mode toggle to hide distractions.
4. Use the Speed Changer to set your preferred playback speed.

File Structure

• manifest.json – Extension manifest file.
• content.js – Main logic for focus mode and speed change.
• popup.html – Popup UI for user controls.
• styles.css – Styles for the popup and content script.
• image.png, image1.png – Screenshots of the extension in action.

Example Code

content.js (Core Logic)

// Focus Mode: Hide distractions
function toggleFocusMode(enable) {
  const elements = [
    '#related', // Sidebar
    '#comments', // Comments
    'ytd-merch-shelf-renderer', // Merch shelf
    'ytd-video-secondary-info-renderer', // Video info
  ];
  elements.forEach(sel => {
    const el = document.querySelector(sel);
    if (el) el.style.display = enable ? 'none' : '';
  });
}

// Speed Changer
function setPlaybackSpeed(speed) {
  const video = document.querySelector('video');
  if (video) video.playbackRate = speed;
}

// Listen for messages from popup
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'TOGGLE_FOCUS') toggleFocusMode(msg.enable);
  if (msg.type === 'SET_SPEED') setPlaybackSpeed(msg.speed);
});

popup.html (UI Example)

<!-- ...existing code... -->
<label>
  <input type="checkbox" id="focusToggle"> Focus Mode
</label>
<br>
<label>
  Speed:
  <select id="speedSelect">
    <option value="0.5">0.5x</option>
    <option value="1" selected>1x</option>
    <option value="1.5">1.5x</option>
    <option value="2">2x</option>
  </select>
</label>
<!-- ...existing code... -->

styles.css (Minimal Example)

/* ...existing code... */
#focusToggle {
  margin-right: 8px;
}
#speedSelect {
  margin-left: 4px;
}
/* ...existing code... */

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.