Merge pull request #55 from tajulafreen/Add_Blocker_Extension

50Projects-HTML-CSS-JavaScript : Ads blocker extension
tajulafreen · Dec 28, 2024 · c526b1c · c526b1c
2 parents 59c14c5 + 351e3a2
commit c526b1c
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -584,6 +584,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Ads Blocker Extension</summary>
+<p>This is a simple Ad Blocker Extension. AdBlocker is a lightweight browser extension designed to block intrusive advertisements and enhance your browsing experience.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AdsBlockerExtension/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/AdsBlockerExtension">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/AdsBlockerExtension/content.js b/Source-Code/AdsBlockerExtension/content.js
@@ -0,0 +1,42 @@
+/* eslint-disable no-undef */
+const adSelectors = [
+  'iframe[src*="ads"]',
+  'div[class*="ad"]',
+  'div[id*="ad"]',
+  'ins.adsbygoogle',
+  '[data-ad]',
+  '.ad-banner',
+];
+
+// Normalize domain
+const normalizeDomain = (domain) => domain.replace(/^www\./, '');
+
+chrome.storage.local.get(
+  { adBlockerEnabled: true, whitelist: [] },
+  ({ adBlockerEnabled, whitelist }) => {
+    if (!adBlockerEnabled) return;
+
+    const currentSite = normalizeDomain(window.location.hostname);
+    const normalizedWhitelist = whitelist.map(normalizeDomain);
+
+    if (normalizedWhitelist.includes(currentSite)) {
+      console.log(`Whitelist active: Ads are allowed on ${currentSite}`);
+      return; // Skip ad blocking
+    }
+
+    // Ad blocking logic
+    const blockAds = () => {
+      adSelectors.forEach((selector) => {
+        const ads = document.querySelectorAll(selector);
+        console.log(`Found ${ads.length} ads for selector: ${selector}`);
+        ads.forEach((ad) => ad.remove());
+      });
+    };
+
+    blockAds(); // Initial blocking
+
+    // Observe dynamically loaded ads
+    const observer = new MutationObserver(blockAds);
+    observer.observe(document.body, { childList: true, subtree: true });
+  },
+);
diff --git a/Source-Code/AdsBlockerExtension/icons/icon128.png b/Source-Code/AdsBlockerExtension/icons/icon128.png
diff --git a/Source-Code/AdsBlockerExtension/icons/icon16.png b/Source-Code/AdsBlockerExtension/icons/icon16.png
diff --git a/Source-Code/AdsBlockerExtension/icons/icon48.png b/Source-Code/AdsBlockerExtension/icons/icon48.png
diff --git a/Source-Code/AdsBlockerExtension/manifest.json b/Source-Code/AdsBlockerExtension/manifest.json
@@ -0,0 +1,27 @@
+{
+    "manifest_version": 2,
+    "name": "Ad Blocker",
+    "version": "1.0",
+    "description": "A simple ad blocker to remove advertisements from websites.",
+    "permissions": ["activeTab", "storage"],
+    "content_scripts": [
+      {
+        "matches": ["<all_urls>"],
+        "js": ["content.js"]
+      }
+    ],
+    "browser_action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "./icons/icon16.png",
+        "48": "./icons/icon48.png",
+        "128": "./icons/icon128.png"
+      }
+    },
+    "icons": {
+      "16": "./icons/icon16.png",
+      "48": "./icons/icon48.png",
+      "128": "./icons/icon128.png"
+    }
+  }
+
diff --git a/Source-Code/AdsBlockerExtension/popup.css b/Source-Code/AdsBlockerExtension/popup.css
@@ -0,0 +1,34 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 10px;
+  width: 250px;
+}
+
+h1 {
+  font-size: 1.5em;
+  margin-bottom: 10px;
+}
+
+label {
+  display: block;
+  margin-bottom: 20px;
+}
+
+input {
+  margin-right: 10px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin: 5px 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+button {
+  cursor: pointer;
+}
diff --git a/Source-Code/AdsBlockerExtension/popup.html b/Source-Code/AdsBlockerExtension/popup.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ad Blocker</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <h1>Ad Blocker</h1>
+  <label>
+    <input type="checkbox" id="toggle-ad-blocker" checked>
+    Enable Ad Blocker
+  </label>
+  <div>
+    <h2>Whitelist</h2>
+    <input type="text" id="whitelist-input" placeholder="Enter website URL">
+    <button id="add-to-whitelist">Add</button>
+    <ul id="whitelist"></ul>
+  </div>
+  <p id="status"></p>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Source-Code/AdsBlockerExtension/popup.js b/Source-Code/AdsBlockerExtension/popup.js
@@ -0,0 +1,34 @@
+const whitelistInput = document.getElementById('whitelist-input');
+const addToWhitelist = document.getElementById('add-to-whitelist');
+const whitelist = document.getElementById('whitelist');
+let whitelistData = JSON.parse(localStorage.getItem('whitelist')) || [];
+
+// Load whitelist
+function loadWhitelist() {
+  whitelist.innerHTML = '';
+  whitelistData.forEach((site) => {
+    const li = document.createElement('li');
+    li.textContent = site;
+    const removeBtn = document.createElement('button');
+    removeBtn.textContent = 'Remove';
+    removeBtn.addEventListener('click', () => {
+      whitelistData = whitelistData.filter((item) => item !== site);
+      localStorage.setItem('whitelist', JSON.stringify(whitelistData));
+      loadWhitelist();
+    });
+    li.appendChild(removeBtn);
+    whitelist.appendChild(li);
+  });
+}
+
+addToWhitelist.addEventListener('click', () => {
+  const site = whitelistInput.value.trim();
+  if (site && !whitelistData.includes(site)) {
+    whitelistData.push(site);
+    localStorage.setItem('whitelist', JSON.stringify(whitelistData));
+    whitelistInput.value = '';
+    loadWhitelist();
+  }
+});
+
+loadWhitelist();