Loading...

How Do You Implement Ad Blocking with Ghostery?

Need to block ads programmatically? Learn how to implement ad blocking using the Ghostery Adblocker library with real-world examples and solutions.

Back

After years of wrestling with various ad blocking solutions, I want to share my experience implementing the Ghostery Adblocker library. Trust me, this journey has been eye-opening, and I've learned quite a bit about what works and what doesn't in the world of programmatic ad blocking.

Why I Chose Ghostery Adblocker

I'll be honest - I initially started with a simple content blocker, but quickly ran into limitations. What drew me to Ghostery was its flexibility. I needed something that could work across different environments (browser extensions, Electron apps, and even Node.js), and Ghostery fit the bill perfectly.

Here's what sold me on it:

  • It's lightweight but powerful
  • Works seamlessly in different JavaScript environments
  • Has excellent TypeScript support (a huge plus for me)
  • Maintains compatibility with existing filter lists

Real Problems I've Solved

Let me share some actual challenges I've tackled:

1. Browser Extension Development

I was building a privacy-focused browser extension and needed reliable ad blocking. Here's what worked for me:

import { WebExtensionBlocker } from '@ghostery/adblocker-webextension';
 
// This is my go-to setup for browser extensions
async function setupAdBlocking() {
  const blocker = await WebExtensionBlocker.fromPrebuiltAdsAndTracking();
  
  // I found this to be the most reliable way to enable blocking
  blocker.enableBlockingInBrowser(browser);
  
  // Don't forget to handle errors!
  blocker.on('request-blocked', ({ url }) => {
    console.log('Blocked:', url);
  });
}

2. Desktop App Integration

For an Electron app I was working on, I needed to block ads in all windows. Here's my solution:

import { ElectronBlocker } from '@ghostery/adblocker-electron';
 
// This setup has worked really well for me
async function setupElectronBlocking() {
  const blocker = await ElectronBlocker.fromPrebuiltAdsAndTracking();
  
  // I like to add some custom rules for specific cases
  blocker.enableBlockingInSession(session.defaultSession);
}

Lessons Learned (The Hard Way)

Let me share some things I wish I'd known from the start:

  1. Filter List Management I initially loaded all available filter lists - big mistake! It slowed everything down. Now I'm more selective:
// My optimized approach to filter lists
const blocker = await FiltersEngine.fromLists(fetch, [
  'https://easylist.to/easylist/easylist.txt',
  // I only add what I actually need
]);
  1. Performance Optimization After some trial and error, here's what I've found works best:
const blocker = await WebExtensionBlocker.fromPrebuiltAdsAndTracking({
  enableCompression: true,  // This really helps with memory usage
  loadNetworkFilters: true,
  loadCosmeticFilters: false  // I only enable this when needed
});

Tips from My Experience

  1. Always Test Thoroughly I learned this the hard way - some sites break when ad blocking is too aggressive. I now maintain a whitelist of problematic domains.

  2. Handle Updates Gracefully Filter lists need regular updates. I set up an update mechanism that runs daily:

async function updateFilters() {
  try {
    await blocker.updateEngine();
  } catch (error) {
    // I make sure to have a fallback plan
    console.error('Filter update failed:', error);
  }
}

What's Working Well for Me Now

After months of tweaking, here's my current setup that's working great:

  1. Custom Rules I maintain a set of custom rules for specific cases:

    ||annoying-ads.example.com^
    ||tracking.example.com^$third-party
  2. Error Handling I've learned to be defensive with my implementation:

    blocker.on('error', (error) => {
      // I log these for debugging later
      console.error('Blocking error:', error);
    });

Community Resources I Found Helpful

These resources have been invaluable in my journey:

Want to explore more web automation topics? Check out my other guides:

Note: Looking for a developer-friendly screenshot API? screenshotsapi.dev offers the most affordable screenshot API for developers, with built-in smart waiting strategies, dynamic content handling, and reliable results. Skip the complexity of managing timing strategies and focus on building your application with our simple, developer-first API.

Written by

Durgaprasad Budhwani

At

Tue Jan 02 2024