popup-blocker-chrome-extension

Popup Blocker Chrome Extension

A Chrome extension for blocking unnecessary content on web pages, with extensible rule support.

🎯 Project Status

✅ Core functionality completed: Block onetrust-consent-sdk.js script

✨ Features

Implemented:

1. ✅ Block onetrust-consent-sdk.js script to prevent privacy policy notifications
2. ✅ Multi-layer interception mechanism:
   • declarativeNetRequest network layer interception
   • MutationObserver DOM layer interception
   • Periodic cleanup of loaded OneTrust elements
3. ✅ Automatically remove OneTrust-related popups and banners
4. ✅ Restore disabled page scrolling functionality

Not Implemented (Future):

• Rule visualization interface
• Rule export and import
• Rule extensibility (user-defined rules)
• Regular expression support
• Enable/disable rules by domain
• Enable/disable rules by URL keyword
• Track blocked request statistics
• Whitelist functionality

📦 Installation

Method 1: Developer Mode (Recommended)

1. Open Chrome Extensions Page

   • Enter in address bar: chrome://extensions/
   • Or via menu: More Tools → Extensions

2. Enable Developer Mode

   • Toggle “Developer mode” switch in top-right corner

3. Load Extension

   • Click “Load unpacked” button
   • Select this project directory (the folder containing manifest.json)

4. Confirm Installation

   • Extension list should display “Popup Blocker”
   • Status should be enabled (blue toggle)

Method 2: Packaged Installation

# In Chrome Extensions management page
# Click "Pack extension"
# Select this project root directory
# Install the generated .crx file

🚀 Usage

1. After installation, the extension runs automatically on all web pages
2. Visit any website with OneTrust privacy popups (many international sites)
3. The extension automatically blocks privacy notifications - no manual action needed
4. View [Popup Blocker] logs in browser console for interception details

🔍 How It Works

The extension uses three layers of protection:

1. Network Layer Interception (declarativeNetRequest API)

Blocks script requests from the following domains:

• *onetrust-consent-sdk*
• *cdn.cookielaw.org*
• *optanon.blob.core.windows.net*
• *wcpstatic.microsoft.com* (Microsoft Cookie Consent)
• *consent.cookiebot.com* (Cookiebot)
• *consent.cookiefirst.com* (CookieFirst)

Intercepts before script download for maximum efficiency.

2. DOM Monitoring (MutationObserver)

• Real-time monitoring of page DOM changes
• Automatically removes any attempts to inject OneTrust scripts
• Prevents dynamically loaded scripts

3. Periodic Cleanup (setInterval)

• Cleans page every 500ms
• Removes OneTrust-related popup and banner elements
• Restores disabled page scrolling

🧪 Testing

Test Websites

• https://www.theguardian.com/ (The Guardian)
• https://www.bbc.com/ (BBC)
• https://edition.cnn.com/ (CNN)
• https://www.nytimes.com/ (The New York Times)
• https://marketplace.visualstudio.com/ (VS Code Marketplace)

Expected Results

• ✅ No privacy policy/Cookie popups displayed
• ✅ Page loads and displays normally
• ✅ Console shows [Popup Blocker] interception logs
• ✅ Page scrolling works normally

View Logs

1. Open browser developer tools (F12 or Cmd+Option+I)
2. Switch to “Console” tab
3. Look for log messages with [Popup Blocker] prefix

Example logs:

[Popup Blocker] Content script loaded
[Popup Blocker] Blocked script: https://cdn.cookielaw.org/scripttemplates/otSDKStub.js
[Popup Blocker] Removed element: #onetrust-consent-sdk

🛠️ Technical Implementation

Files

• manifest.json: Chrome extension configuration (Manifest V3)
• rules.json: declarativeNetRequest rule configuration
• content.js: Content script for DOM-level interception and cleanup

Key Code Snippets

manifest.json Configuration

{
  "manifest_version": 3,
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["<all_urls>"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

content.js Core Logic

// DOM monitoring
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.tagName === "SCRIPT") {
        const src = node.src || "";
        if (src.includes("onetrust-consent-sdk") || src.includes("cdn.cookielaw.org")) {
          console.log("[Popup Blocker] Blocked script:", src);
          node.remove();
        }
      }
    });
  });
});

// Periodic cleanup
function removeOneTrustElements() {
  const selectors = ["#onetrust-consent-sdk", "#onetrust-banner-sdk", "#onetrust-pc-sdk", ".onetrust-pc-dark-filter"];
  selectors.forEach(selector => {
    document.querySelectorAll(selector).forEach(el => el.remove());
  });
  document.body.style.overflow = "";
}
setInterval(removeOneTrustElements, 500);

📁 Project Structure

popups-blocker-chrome-extension/
├── manifest.json          # Extension configuration (Manifest V3)
├── content.js            # Content script (2.2KB)
├── rules.json            # declarativeNetRequest rules
├── README.md             # Project documentation
├── icons/                # Icon resources
│   ├── icon16.png        # 16x16 icon
│   ├── icon48.png        # 48x48 icon
│   ├── icon128.png       # 128x128 icon
│   └── icon.svg          # SVG source file
└── verify.sh             # Verification script

📊 Performance Metrics

• Extension size: ~3KB (excluding icons)
• Memory usage: <1MB
• CPU usage: Extremely low
• Network impact: Reduces unnecessary requests
• Page load: No noticeable impact

🔧 Development & Debugging

Reload Extension After Code Changes

1. Modify code files (manifest.json, content.js, rules.json)
2. Go to chrome://extensions/
3. Find Popup Blocker extension card
4. Click refresh icon 🔄
5. Refresh test webpage to see effects

Debugging Tips

1. View Interception Logs

   Open Console (F12) → Filter "[Popup Blocker]"
   

2. Test Network Interception

   Open Network tab → Look for cancelled requests
   

3. Verify DOM Cleanup

   Open Elements tab → Search "onetrust"
   Should find no related elements
   

Common Issues

Q: Extension not working?

• Check if extension is enabled
• Refresh test webpage (Cmd+R or Ctrl+R)
• Check console for [Popup Blocker] logs

Q: How to temporarily disable extension?

• Go to chrome://extensions/
• Toggle off Popup Blocker switch

Q: How to uninstall extension?

• Go to chrome://extensions/
• Click “Remove” button on Popup Blocker card

🎨 Custom Icons (Optional)

Current placeholder icons can be customized:

cd icons
# Method 1: Use ImageMagick
brew install imagemagick
convert icon.svg -resize 16x16 icon16.png
convert icon.svg -resize 48x48 icon48.png
convert icon.svg -resize 128x128 icon128.png

# Method 2: Use online tools
# Visit https://www.aconvert.com/image/svg-to-png/
# Upload icon.svg and generate different sizes

⚙️ Technical Stack

• Chrome Extension API: Manifest V3
• declarativeNetRequest API: Network request interception
• MutationObserver API: DOM change monitoring
• Content Scripts: Page script injection

📝 Technical Details

• Manifest Version: V3 (latest standard)
• Compatibility: Chrome 88+
• Performance Impact: Extremely low
• Required Permissions:
  • declarativeNetRequest: Network request interception
  • <all_urls>: Run on all web pages

📄 Related Documentation

• Chrome Extension Manifest V3
• declarativeNetRequest API
• Content Scripts
• MutationObserver API

📜 License

MIT License - Free to use and modify

---

Project Created: November 24, 2025
Minimum Chrome Version: 88+
Status: ✅ Production Ready

This site is open source. Improve this page.