finish with logic with bare min popup style

Author: Goutam-04

background.js

@@ -0,0 +1,15 @@
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({ isEnabled: true });
+  });
+  
+  chrome.action.onClicked.addListener((tab) => {
+    chrome.storage.sync.get('isEnabled', (data) => {
+      chrome.storage.sync.set({ isEnabled: !data.isEnabled }, () => {
+        chrome.scripting.executeScript({
+          target: { tabId: tab.id },
+          files: ['content.js']
+        });
+      });
+    });
+  });
+  

content.js

@@ -0,0 +1,68 @@
+chrome.storage.sync.get('isEnabled', (data) => {
+    if (data.isEnabled) {
+        const MAX_PLAYBACK_RATE = 16;
+        let originalMuted = false;
+        let originalPlaybackRate = 1;
+
+        function handleAdSpeed(video) {
+            const observerCallback = (mutations) => {
+                const skipAd = () => {
+                    //logic for finding and clicking skip button
+                    const skipContainers = [
+                        ".ytp-ad-skip-button-container .ytp-ad-skip-button-modern",
+                        ".ytp-skip-ad .ytp-skip-ad-button"
+                    ];
+                    skipContainers.forEach(selector => {
+                        const skipButton = document.querySelector(selector);
+                        if (skipButton) {
+                            skipButton.click();
+                        }
+                    });
+                };
+
+                // The MutationObserver is a JavaScript API that provides a way to watch for changes being made to the DOM tree.
+                // It is designed to react to DOM mutations (such as when nodes are added, removed, or changed) and allows you to execute
+                // callback functions when such changes occur. This is particularly useful for monitoring dynamic content changes in a web page.
+
+                
+                
+                mutations.forEach((mutation) => {
+                    if (mutation.attributeName === "style") {
+                        skipAd();
+                    }
+                });
+                
+                if (video.playbackRate !== MAX_PLAYBACK_RATE) {
+                    originalMuted = video.muted;  
+                    originalPlaybackRate = video.playbackRate;
+                }
+                
+                //it detect is there ad or not on load
+                const isAd = moviePlayer.classList.contains("ad-showing") || moviePlayer.classList.contains("ad-interrupting");
+                //it make noise when a ad is playing at 16x speed so...... muting is a good optin
+                video.muted = isAd ? true : originalMuted;   
+                video.playbackRate = isAd ? MAX_PLAYBACK_RATE : originalPlaybackRate;
+            };
+            
+            
+            //for the capability to skip ad in between videos, but it consume so much resource but not that much hehe
+            const moviePlayer = document.querySelector("#movie_player");
+            new MutationObserver(observerCallback).observe(moviePlayer, {
+                attributeFilter: ["class", "style"],
+                attributes: true,
+                subtree: true,
+            });
+        }
+
+        function init() {
+            const video = document.querySelector("#movie_player video");
+            if (video) {
+                handleAdSpeed(video);
+            } else {
+                setTimeout(init, 300);
+            }
+        }
+
+        init();
+    }
+});

manifest.json

@@ -1,5 +1,5 @@
 {
-    "manifest_version": 1,
+    "manifest_version": 3,
     "name": "Not An Ad Blocker",
     "version": "1.0",
     "description": " Trying to speed up ads and skips them automatically.",
@@ -9,18 +9,18 @@
       "scripting"
     ],
     "background": {
-      "service_worker": "background.js"
+      "service_worker": "./background.js"
     },
     "content_scripts": [
       {
         "matches": ["*://www.youtube.com/*"],
-        "js": ["content.js"]
+        "js": ["./content.js"]
       }
     ],
     "action": {
-      "default_popup": "popup.html",
+      "default_popup": "./popup.html",
       "default_icon": {
-        "128": "icon.png"
+        "128": "./icon.png"
       }
     }
   }

popup.css

@@ -0,0 +1,19 @@
+.container {
+    text-align: center;
+    width: 200px;
+    padding: 20px;
+  }
+  
+  button {
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:disabled {
+    background-color: #cccccc;
+  }
+  

popup.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <h1>YouTube Ad Skipper</h1>
+    <button id="toggleButton">Disable</button>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>

popup.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggleButton = document.getElementById('toggleButton');
+  
+    chrome.storage.sync.get('isEnabled', (data) => {
+      updateButton(data.isEnabled);
+    });
+  
+    toggleButton.addEventListener('click', () => {
+      chrome.storage.sync.get('isEnabled', (data) => {
+        const newStatus = !data.isEnabled;
+        chrome.storage.sync.set({ isEnabled: newStatus }, () => {
+          updateButton(newStatus);
+          chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            chrome.scripting.executeScript({
+              target: { tabId: tabs[0].id },
+              files: ['content.js']
+            });
+          });
+        });
+      });
+    });
+  
+    function updateButton(isEnabled) {
+      toggleButton.textContent = isEnabled ? 'Disable' : 'Enable';
+    }
+  });
+