YouTube Enhancer

.gitignore

@@ -1,26 +1 @@
-# build output
-dist/
-
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
-
-# Code Editors
-.idea/
-
-.vercel
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MrBashyal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cleanup.css

@@ -0,0 +1,9 @@
+/* Hide video thumbnail timestamps */
+ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail.style-scope {
+  display: none !important;
+}
+
+/* Hide rich sections in the grid (often contains shorts, ads or promoted content) */
+ytd-rich-section-renderer.ytd-rich-grid-renderer.style-scope {
+  display: none !important;
+} 

content.js

@@ -0,0 +1,129 @@
+// content.js
+(function() {
+  'use strict';
+
+  const CONFIG = {
+    CUSTOM_CLASS: 'youtube-enhancer-enabled',
+    FEATURE_FILES: {
+      vid: { js: 'features/vidplayer.js', css: 'features/vidplayer.css' },
+      shorts2long: { js: 'features/shorts2long.js', css: 'features/shorts2long.css' },
+      subsComment: { js: 'features/subs-comment.js', css: 'features/subs-comment.css' },
+      subsbutton: { js: 'features/subsbutton.js', css: 'features/subsbutton.css' },
+      sblock: { js: 'features/shortsblock.js', css: 'features/shortsblock.css' }
+    }
+  };
+
+  let isExtensionEnabled = true;
+  const injectedElements = {};
+  const activeFeatureCleanups = {};
+
+  async function initialize() {
+    console.log('Initializing content script');
+    await chrome.storage.sync.get(['extensionEnabled'], (result) => {
+      isExtensionEnabled = result.extensionEnabled !== false;
+      toggleExtensionFeatures(isExtensionEnabled);
+    });
+
+    await chrome.storage.sync.get(Object.keys(CONFIG.FEATURE_FILES), (features) => {
+      console.log('Feature states:', features);
+      Object.keys(CONFIG.FEATURE_FILES).forEach((feature) => {
+        if (features[feature] !== false) {
+          enableFeature(feature);
+        }
+      });
+    });
+
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      if (message.action === 'toggleExtension') {
+        handleToggleExtension(message.enabled);
+      } else if (message.action === 'toggleFeature') {
+        handleToggleFeature(message.feature, message.enabled);
+      }
+      sendResponse({ status: 'success' });
+      return true;
+    });
+  }
+
+  function handleToggleExtension(enabled) {
+    isExtensionEnabled = enabled;
+    toggleExtensionFeatures(enabled);
+    Object.keys(CONFIG.FEATURE_FILES).forEach((feature) => {
+      chrome.storage.sync.get([feature], (result) => {
+        if (result[feature] && isExtensionEnabled) {
+          enableFeature(feature);
+        } else {
+          disableFeature(feature);
+        }
+      });
+    });
+  }
+
+  function handleToggleFeature(feature, enabled) {
+    if (enabled && isExtensionEnabled) {
+      enableFeature(feature);
+    } else {
+      disableFeature(feature);
+    }
+  }
+
+  async function enableFeature(feature) {
+    if (!CONFIG.FEATURE_FILES[feature]) return;
+    try {
+      injectCSS(feature);
+      await loadFeatureJS(feature);
+      if (window.youtubeEnhancer?.[feature]?.init) {
+        const cleanup = window.youtubeEnhancer[feature].init();
+        if (cleanup) activeFeatureCleanups[feature] = cleanup;
+      }
+      console.log(`Enabled feature: ${feature}`);
+    } catch (error) {
+      console.error(`Error enabling ${feature}:`, error);
+    }
+  }
+
+  function disableFeature(feature) {
+    if (!CONFIG.FEATURE_FILES[feature]) return;
+    if (injectedElements[feature]) {
+      injectedElements[feature].remove();
+      delete injectedElements[feature];
+    }
+    if (activeFeatureCleanups[feature]) {
+      activeFeatureCleanups[feature]();
+      delete activeFeatureCleanups[feature];
+    }
+    console.log(`Disabled feature: ${feature}`);
+  }
+
+  function loadFeatureJS(feature) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = chrome.runtime.getURL(CONFIG.FEATURE_FILES[feature].js);
+      script.id = `youtube-enhancer-${feature}-script`;
+      script.onload = () => {
+        console.log(`Loaded ${feature}.js`);
+        resolve();
+      };
+      script.onerror = () => reject(new Error(`Failed to load ${feature}.js`));
+      document.head.appendChild(script);
+    });
+  }
+
+  function injectCSS(feature) {
+    const existingLink = document.getElementById(`youtube-enhancer-${feature}-css`);
+    if (existingLink) existingLink.remove();
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = chrome.runtime.getURL(CONFIG.FEATURE_FILES[feature].css) + '?v=' + Date.now();
+    link.id = `youtube-enhancer-${feature}-css`;
+    link.onload = () => console.log(`CSS loaded for ${feature}`);
+    link.onerror = () => console.error(`CSS failed to load for ${feature}`);
+    document.head.appendChild(link);
+    injectedElements[feature] = link;
+  }
+
+  function toggleExtensionFeatures(enabled) {
+    document.body.classList.toggle(CONFIG.CUSTOM_CLASS, enabled);
+  }
+
+  initialize();
+})();

feature-handlers.js

@@ -0,0 +1,31 @@
+// Function to toggle features based on the checkbox state
+function toggleFeature(feature, isEnabled) {
+    chrome.storage.sync.set({ [feature]: isEnabled }, () => {
+        console.log(`${feature} is now ${isEnabled ? 'enabled' : 'disabled'}`);
+        // Send a message to the background script to relay to content scripts
+        chrome.runtime.sendMessage({ 
+            action: 'toggleFeature', 
+            feature, 
+            enabled: isEnabled 
+        });
+    });
+}
+
+// This function will only run in popup.html context, not in the background
+function initFeatureHandlers() {
+    // Add event listeners to feature toggles
+    document.querySelectorAll('.feature-toggle').forEach(toggle => {
+        toggle.addEventListener('change', function() {
+            const feature = this.getAttribute('data-feature');
+            const isEnabled = this.checked;
+            toggleFeature(feature, isEnabled);
+        });
+    });
+}
+
+// Run the init function only if we're in a browser context with a DOM
+if (typeof document !== 'undefined' && document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFeatureHandlers);
+} else if (typeof document !== 'undefined') {
+    initFeatureHandlers();
+}

manifest.json

@@ -0,0 +1,45 @@
+{
+  "manifest_version": 3,
+  "name": "YouTube Enhancer",
+  "version": "1.0",
+  "description": "Enhances YouTube with additional features.",
+  "permissions": [
+    "storage",
+    "scripting",
+    "activeTab",
+    "webRequest"
+  ],
+  "background": {
+    "service_worker": "feature-handlers.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": "icons/icon48.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["content.js"]
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "features/vidplayer.js",
+        "features/vidplayer.css",
+        "features/shorts2long.js",
+        "features/shorts2long.css",
+        "features/subs-comment.js",
+        "features/subs-comment.css",
+        "features/subsbutton.js",
+        "features/subsbutton.css",
+        "features/shortsblock.js",
+        "features/shortsblock.css",
+        "styles/variables.css",
+        "styles/responsive.css",
+        "styles/themes.css"
+      ],
+      "matches": ["*://*.youtube.com/*"]
+    }
+  ]
+}

popup.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube Enhancer</title>
+    <link rel="stylesheet" href="popup_styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <img src="icons/icon128.png" alt="YouTube Enhancer" class="header-icon">
+        <div class="header-text">
+            <h1 class="header-title">YouTube Enhancer</h1>
+            <p class="header-version">v1.0.2</p>
+        </div>
+        <svg id="openSettings" class="settings-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6, 12,15.6z"/>
+        </svg>
+    </div>
+
+    <!-- Settings Panel (hidden by default) -->
+    <div id="settings" class="feature-cards">
+        <div class="feature-card subsComment">
+            <p class="feature-title">Subs Comment</p>
+            <label class="switch">
+                <input type="checkbox" class="feature-toggle" data-feature="subsComment" disabled>
+                <span class="slider"></span>
+            </label>
+        </div>
+        <div class="feature-card sblock">
+            <p class="feature-title">Shortz Block</p>
+            <label class="switch">
+                <input type="checkbox" class="feature-toggle" data-feature="sblock">
+                <span class="slider"></span>
+            </label>
+        </div>
+        <div class="feature-card shorts2long">
+            <!-- Changed div class from s2l to shorts2long -->
+            <p class="feature-title">Shortz 2.Long</p>
+            <label class="switch">
+                <input type="checkbox" class="feature-toggle" data-feature="shorts2long" disabled>
+                <span class="slider"></span>
+            </label>
+        </div>
+        <div class="feature-card vid">
+            <p class="feature-title">VidPlayz</p>
+            <label class="switch">
+                <input type="checkbox" class="feature-toggle" data-feature="vid" >
+                <span class="slider"></span>
+            </label>
+        </div>
+        <div class="feature-card subsbutton">
+            <p class="feature-title">Sub Button</p>
+            <label class="switch">
+                <input type="checkbox" class="feature-toggle" data-feature="subsbutton" disabled>
+                <span class="slider"></span>
+            </label>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="main-content">
+        <div class="toggle-container" role="group" aria-labelledby="toggle-label">
+            <span id="toggle-label" class="toggle-label">Extension Status</span>
+            <label class="switch" aria-label="Toggle extension">
+                <input type="checkbox" id="toggleSwitch" aria-describedby="statusText">
+                <span class="slider"></span>
+            </label>
+        </div>
+        <div id="statusText" role="status" aria-live="polite">Loading status...</div>
+    </div>
+
+    <footer>
+        &copy; <span id="currentYear"></span>
+        <a href="https://github.com/Prarambha369/YouTube_Enhancer" target="_blank" rel="noopener noreferrer">Mister Bashyal</a>
+    </footer>
+</div>
+
+<script src="popup.js"></script>
+</body>
+</html>