Make your own adblocker Chrome Extension

Hello everyone,
This is my first ever post on dev.to

Ad blockers are a popular way to improve the browsing experience by blocking unwanted ads from appearing on websites. They can help reduce distractions, save data, and even improve page load times. In this tutorial, we will learn how to create our own ad blocker Chrome extension using JavaScript.

Prerequisites
Before getting started, make sure you have the following:

• Basic knowledge of JavaScript
• A text editor (e.g. Sublime Text, Atom)
• Google Chrome browser

Step 1: Set up the project

First, we need to create a new folder for our project and create the following files inside it:

• manifest.json:This file tells Chrome about our extension and its properties.
• popup.html: This is the HTML file for the popup window that will appear when the user clicks on the extension icon.
• popup.js: This is the JavaScript file for the popup window that will contain the logic for blocking ads.
• style.css: This is the CSS file for styling the popup window.

Next, we need to add the following code to the manifest.json file:

{
  "manifest_version": 2,
  "name": "My Ad Blocker",
  "description": "This extension blocks ads on websites.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "webRequest",
    "*://*/*"
  ]
}

Let's go over the different properties in this file:

• manifest_version: This specifies the version of the manifest file.
• name: This is the name of the extension that will be displayed in the Chrome Web Store and in Chrome's extension management page.
• description: This is a brief description of the extension that will be displayed in the Chrome Web Store.
• version: This is the version of the extension.
• browser_action: This specifies the properties for the extension's icon in the browser toolbar. The default_icon property specifies the path to the extension's icon, and the default_popup property specifies the path to the HTML file for the popup window that will appear when the user clicks on the icon.
• permissions: This specifies the permissions that the extension needs in order to function. In this case, we are giving it access to the webRequest API and allowing it to run on any website.