Build Your First AdBlocker - Chrome Extension

Summary

In this tutorial, Deb Sage teaches viewers how to create a Google Chrome ad blocker extension. She explains how ad blockers work by blocking requests to advertisers, guides through setting up a manifest file, and demonstrates adding a background script to filter and block specific URLs. The video also covers creating icons and testing the extension in Chrome.

Takeaways

• 😀 Deb Sage is teaching how to create a Google Chrome ad blocker extension.
• 🔍 Ad blockers work by monitoring network traffic and blocking requests to advertisers.
• 📄 A manifest file is necessary for all Chrome extensions and contains important information about the plugin.
• 📚 The manifest file includes properties like name, version, description, permissions, background scripts, and icons.
• 🏗️ Permissions are needed to access certain Chrome APIs, such as the web request and web request blocking APIs.
• 🤖 The background script is used to add event listeners for Chrome events, specifically to intercept and potentially block requests.
• 🛠️ The `chrome.webRequest.onBeforeRequest` event listener is used to check and block requests to potential advertisers.
• 🌐 A filter object is used to specify which sites the callback function should apply to, allowing selective blocking of requests.
• 🖼️ Icons for the extension are specified in the manifest file and should be created in different sizes (16x16, 48x48, 128x128).
• 🚀 To test the extension, enable developer mode in Chrome, load the unpacked extension, and test its functionality by visiting an advertiser's website.

Q & A

What is the main purpose of the video?

The main purpose of the video is to teach viewers how to create a Google Chrome ad blocker extension.

Why does the video creator dislike ads?

The video creator dislikes ads because they find them annoying and prefer not to watch them.

How does an ad blocker work in the context of the video?

An ad blocker works by monitoring network traffic and blocking requests to potential advertisers, thus preventing ads from being displayed on web pages.

What is the first file that needs to be created for a Chrome extension?

The first file that needs to be created is the 'manifest.json', which contains important information about the extension.

What properties should be added to the 'manifest.json' file?

The properties to be added include 'name', 'version', 'description', 'permissions', 'background', 'icons', and 'manifest_version'.

Which APIs are mentioned as needing permissions in the video?

The APIs mentioned as needing permissions are the 'web request' API and the 'web request blocking' API.

What is the purpose of the 'background.js' file in the extension?

The 'background.js' file contains scripts that run in the background, mainly for adding event listeners, which are used to monitor and potentially block requests to advertisers.

How can you block requests to specific advertisers in the extension?

You can block requests by using a filter object in the 'onBeforeRequest' event listener, specifying URLs or regular expressions that match the advertiser's domain.

What is the special permission called 'all URLs' for?

The 'all URLs' permission is used to grant the extension access to all URLs, allowing it to block requests across all websites.

How can you test the functionality of your ad blocker extension?

You can test the extension by loading it in Chrome's 'chrome://extensions' page, enabling developer mode, and then loading the unpacked extension from the ad blocker folder.

What is the final step mentioned in the video for using the ad blocker extension?

The final step is to visit a website like 'zito.com' to see if the requests are being blocked, which would prevent ads from being displayed.