Added authenctication successfully

background.js

@@ -0,0 +1,59 @@
+chrome.runtime.onInstalled.addListener(() => {
+  console.log("NPC Comment Blocker Extension Installed");
+});
+
+// Function to get OAuth2 token
+function getAuthTokenInteractive() {
+  return new Promise((resolve, reject) => {
+    chrome.identity.getAuthToken({ interactive: true }, (token) => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+      } else {
+        resolve(token);
+      }
+    });
+  });
+}
+
+// Function to revoke token
+function revokeToken(token) {
+  return fetch(`https://accounts.google.com/o/oauth2/revoke?token=${token}`, {
+    method: "POST",
+    mode: "no-cors",
+  })
+    .then(() => {
+      console.log("Token revoked successfully.");
+    })
+    .catch((error) => {
+      console.error("Error revoking token:", error);
+    });
+}
+
+// Listener for messages from popup
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.action === "login") {
+    getAuthTokenInteractive()
+      .then((token) => {
+        sendResponse({ success: true, token });
+      })
+      .catch((error) => {
+        sendResponse({ success: false, error: error.message });
+      });
+    return true; // Indicates that the response is asynchronous
+  }
+
+  if (request.action === "logout") {
+    chrome.identity.getAuthToken({ interactive: false }, (token) => {
+      if (token) {
+        revokeToken(token).then(() => {
+          chrome.identity.removeCachedAuthToken({ token }, () => {
+            sendResponse({ success: true });
+          });
+        });
+      } else {
+        sendResponse({ success: false, error: "No token found" });
+      }
+    });
+    return true;
+  }
+});

content.js

@@ -1,86 +1,8 @@
 const keywords = [
-	"Best",
-	"100% music, 0% nudity",
-	"Who's here in ",
-	"Who's listening to this in ",
-	"Like if you're watching this in ",
-	"Who's here after watching ",
-	"This song never gets old",
-	"This brings back memories",
-	"This song hits different at 3 am",
-	"This is real music, not like today’s trash.",
-	"Anyone else getting nostalgic vibes?",
-	"This deserves more views/likes!",
-	"How many people are still listening to this in [year]?",
-	"I’m in [current year], but this song is timeless.",
-	"If you're reading this, I hope you have a great day!",
-	"Who’s still watching in [year]?",
-	"Here before this blows up!",
-	"RIP to those who haven’t found this gem yet.",
-	"This comment section is a vibe.",
-	"This song is a masterpiece, change my mind.",
-	"If you're reading this, you're a legend.",
-	"Anyone in",
-	"You’re a legend if you’re watching this in",
-	"Who's listening in",
-	"Who's watching in",
-	"Who's here in",
-	"Who's still listening in",
-	"You are allowed to like",
-	"Edit: Thanks for the likes!",
-	"Edit: I can't believe this blew up!",
-	"I see you scrolling through the comments",
-	"You are allowed to like",
-	"I am not asking for likes",
-	"If you like this comment",
-	"If you are reading this",
-	"If you don't like this comment",
-	"Wow this blew",
-	"WHO's Still here",
-	"2019 anyone?",
-	"  Who else is just randomly listening to some old songs",
-	"I'm not asking for likes",
-	"0% Porn",
-	"100% Music",
-	"See you in 2030",
-	"The older i get",
-	"The worst thing about this song is that it ends",
-	"This song is my childhood",
-	"This song is my life",
-	"This song is my love",
-	"This song is my soul",
-	"This song is my heart",
-	"The worst thing about this",
-	"Lets get this to",
-	"[year] anyone?",
-	"[year] [month]",
-	"el comentario con más likes es gay",
-	"el comentario con más likes es puto",
-	"Subscribe to my channel",
-	"use me as a mark",
-	"느낌 좋은 여자들",
-	"이부분때문에",
-	"lets pray for those",
-	"button",
-	"el que lea esto",
-	"el comentario con",
-	"first",
-	"second",
-	"third",
-	"im here early",
-	"amen jesus",
-	"only love",
-	"free fire",
-	"laek share",
-	"only legends",
-	"first comment",
-	"those who ",
-	"english or spanish",
-	"can i get a",
-	"why so many dislikes",
-	"why so serious",
-	"infinite aura",
-	"hawk tuah",
+  // Your list of keywords goes here...
+  "Best",
+  "100% music, 0% nudity",
+  // Add more keywords as needed...
 ];
 
 /**
@@ -89,9 +11,9 @@ const keywords = [
  * @returns {string} - The keyword with placeholders replaced by regex patterns.
  */
 function replacePlaceholders(keyword) {
-	return keyword
-		.replace(/\[year\]/g, "(20\\d{2})")
-		.replace(/\[month\]/g, "(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)");
+  return keyword
+    .replace(/\[year\]/g, "(20\\d{2})")
+    .replace(/\[month\]/g, "(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)");
 }
 
 /**
@@ -100,12 +22,12 @@ function replacePlaceholders(keyword) {
  * @returns {RegExp} - The regex pattern.
  */
 function createPattern(keyword) {
-	const patternWithPlaceholders = replacePlaceholders(keyword);
-	const escapedPattern = patternWithPlaceholders.replace(
-		/[.*+?^${}()|[\]\\]/g,
-		"\\$&",
-	);
-	return new RegExp(`\\b${escapedPattern.replace(/\s+/g, "\\s*")}\\b`, "i");
+  const patternWithPlaceholders = replacePlaceholders(keyword);
+  const escapedPattern = patternWithPlaceholders.replace(
+    /[.*+?^${}()|[\]\\]/g,
+    "\\$&"
+  );
+  return new RegExp(`\\b${escapedPattern.replace(/\s+/g, "\\s*")}\\b`, "i");
 }
 
 /**
@@ -114,65 +36,57 @@ function createPattern(keyword) {
  * @returns {boolean} - True if the text contains any of the keywords, false otherwise.
  */
 function containsKeyword(text) {
-	return keywords.some((keyword) => createPattern(keyword).test(text));
+  return keywords.some((keyword) => createPattern(keyword).test(text));
 }
 
 /**
  * Checks and hides or replaces comments that contain any of the keywords.
- * @param {Array<string>} keywords - The list of keywords to check against.
  * @param {boolean} replaceComments - Whether to replace comments with "[Blocked Comment]" or hide them.
  */
-function blockComments(keywords, replaceComments) {
-	const comments = document.querySelectorAll("#content-text");
-	comments.forEach((comment) => {
-		if (containsKeyword(comment.innerText.toLowerCase(), keywords)) {
-			if (replaceComments) {
-				comment.innerText = "[Blocked Comment]";
-			} else {
-				comment.closest("ytd-comment-thread-renderer").style.display = "none";
-			}
-		}
-	});
+function blockComments(replaceComments) {
+  const comments = document.querySelectorAll("#content-text");
+  comments.forEach((comment) => {
+    if (containsKeyword(comment.innerText.toLowerCase())) {
+      if (replaceComments) {
+        comment.innerText = "[Blocked Comment]";
+      } else {
+        comment.closest("ytd-comment-thread-renderer").style.display = "none";
+      }
+    }
+  });
 }
 
 /**
  * Initializes the observer to monitor and block comments.
- * @param {Array<string>} keywords - The list of keywords to check against.
  * @param {boolean} replaceComments - Whether to replace comments with "[Blocked Comment]" or hide them.
  */
-function initObserver(keywords, replaceComments) {
-	const commentsSection = document.querySelector("#comments");
-	if (commentsSection) {
-		blockComments(keywords, replaceComments);
-		const observer = new MutationObserver(() =>
-			blockComments(keywords, replaceComments),
-		);
-		observer.observe(commentsSection, {
-			childList: true,
-			subtree: true,
-		});
-	} else {
-		console.error("Comments section not found.");
-	}
+function initObserver(replaceComments) {
+  const commentsSection = document.querySelector("#comments");
+  if (commentsSection) {
+    blockComments(replaceComments);
+    const observer = new MutationObserver(() => blockComments(replaceComments));
+    observer.observe(commentsSection, {
+      childList: true,
+      subtree: true,
+    });
+  } else {
+    console.error("Comments section not found.");
+  }
 }
 
 /**
  * Loads keywords and toggle states from storage and initializes the observer when the page loads.
  */
 window.addEventListener("load", () => {
-	chrome.storage.sync.get(
-		["keywords", "isEnabled", "replaceComments"],
-		(data) => {
-			const keywords = data.keywords || [];
-			const isEnabled = data.isEnabled !== false; // Default to enabled if not set
-			const replaceComments = data.replaceComments === true; // Default to remove if not set
-			if (isEnabled) {
-				setTimeout(() => {
-					initObserver(keywords, replaceComments);
-				}, 3000);
-			} else {
-				console.log("NPC Comment Blocker is disabled");
-			}
-		},
-	);
+  chrome.storage.sync.get(["isEnabled", "replaceComments"], (data) => {
+    const isEnabled = data.isEnabled !== false; // Default to enabled if not set
+    const replaceComments = data.replaceComments === true; // Default to remove if not set
+    if (isEnabled) {
+      setTimeout(() => {
+        initObserver(replaceComments);
+      }, 3000);
+    } else {
+      console.log("NPC Comment Blocker is disabled");
+    }
+  });
 });

login.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="styles.css"> <!-- Link to CSS for styling -->
+</head>
+<body>
+    <div class="login-container">
+        <h2>Login</h2>
+        <form id="loginForm">
+            <div class="form-group">
+                <label for="username">Username:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <div class="form-group">
+                <button type="submit">Login</button>
+            </div>
+            <div id="errorMessage" class="error-message"></div>
+        </form>
+        <p>Don't have an account? <a href="register.html">Register here</a></p>
+    </div>
+    <script src="login.js"></script>
+</body>
+</html>

login.js

@@ -0,0 +1,38 @@
+document
+  .getElementById("loginForm")
+  .addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    const username = document.getElementById("username").value;
+    const password = document.getElementById("password").value;
+
+    // Basic validation
+    if (username === "" || password === "") {
+      displayError("Username and password cannot be empty.");
+      return;
+    }
+
+    // Mock authentication (replace with real authentication logic)
+    const mockUser = {
+      username: "user123",
+      password: "pass123",
+    };
+
+    if (username === mockUser.username && password === mockUser.password) {
+      // Redirect on successful login
+      alert("Login successful!");
+      window.location.href = "dashboard.html"; // Redirect to a dashboard or home page
+    } else {
+      displayError("Invalid username or password.");
+    }
+  });
+
+/**
+ * Displays an error message.
+ * @param {string} message - The error message to display.
+ */
+function displayError(message) {
+  const errorMessageDiv = document.getElementById("errorMessage");
+  errorMessageDiv.textContent = message;
+  errorMessageDiv.style.display = "block";
+}