Вы когда-нибудь задумывались, как создать расширение для блокировки рекламы в Google Chrome? Так что я абсолютно ненавижу смотреть рекламу, это одна из моих наименее любимых вещей, поэтому у меня есть расширение для блокировки рекламы, и я подумал, как я могу создать свое собственное расширение?

Шаг 1. Понимание того, как работают блокировщики рекламы

Для начала давайте разберемся с работой блокировщиков рекламы. Когда вы посещаете веб-сайт или смотрите видео, ваш браузер отправляет запросы не только основному контент-провайдеру (например, YouTube), но и рекламодателям, которые хотят показывать рекламу. Блокировщики рекламы вступают в игру, перехватывая и блокируя эти запросы, чтобы предотвратить показ рекламы.

Шаг 2. Создание расширения Chrome

Теперь, когда мы поняли концепцию, давайте создадим базовое расширение Chrome. Вот упрощенный обзор необходимых шагов:

Создайте новый каталог для вашего расширения.

Внутри каталога создайте файл манифеста (manifest.json), который определяет детали расширения, разрешения и фоновые сценарии. Ниже приведен файл манифеста, который мы будем использовать.

{
    "name": "Simple Adblocker",
    "version": "1.0",
    "description": "This extension can be used to block ads.",
    // list of all chrome api we need access to
    "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"], 
    "background": {
        "scripts": ["background.js"]
    },
    "icons": {
        "16": "ico_16x16.png",
        "48": "ico_48x48.png",
        "128": "ico_128x128.png"
    },
    "manifest_version": 2
}

Добавьте файл фонового сценария (background.js) для обработки логики блокировки. Ниже фрагмент кода демонстрирует использование прослушивателя событий chrome.webRequest.onBeforeRequest в расширении Google Chrome. Давайте разберем это:

1️⃣ defaultFilters — это массив, содержащий шаблоны URL различных рекламных доменов. Эти шаблоны определяют URL-адреса, которые будут заблокированы блокировщиком рекламы.

2️⃣ Функция chrome.webRequest.onBeforeRequest.addListener устанавливает прослушиватель событий, который срабатывает перед каждым сетевым запросом. Он принимает три аргумента:

  • Первый аргумент — это анонимная функция, которая обрабатывает событие. В этом случае он возвращает объект { cancel: true }, указывающий, что запрос следует отменить.
  • Второй аргумент — это объект, указывающий шаблоны URL для сопоставления. Здесь мы передаем defaultFilters, который содержит список URL-адресов для блокировки.
  • Третий аргумент — это массив дополнительных опций. В этом случае ["blocking"] указывает, что запрос должен быть заблокирован.
const defaultFilters = [
"*://*.googlesyndication.com/*",
 "*://*.google-analytics.com/*",
"*://*.quantserve.com/*",
 "*://*.scorecardresearch.com/*",
 "*://*.zedo.com/*",
 "*://*.doubleclick.net/*",
 "*://partner.googleadservices.com/*",
 "*://creative.ak.fbcdn.net/*",
 "*://*.adbrite.com/*",
 "*://*.exponential.com/*",

]

chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return { cancel: true }},
    { urls: defaultFilters },
    ["blocking"]
)

Используя этот фрагмент кода в расширении Chrome, вы можете эффективно блокировать запросы к указанным рекламным доменам, предотвращая показ рекламы в браузере.

Настройте файл манифеста, чтобы включить необходимые разрешения и указать фоновый сценарий.

Шаг 4. Установка и тестирование расширения Chrome

После реализации кода установите расширение, загрузив распакованное расширение в режиме разработчика Chrome. Посетите веб-сайты с рекламой и станьте свидетелем волшебства, когда реклама исчезнет с вашего экрана!

Вот ссылка на репозиторий с полным кодом расширения — https://github.com/lavisor/AdBlocker_extension.

✨ Создание собственного расширения для блокировщика рекламы позволяет упростить работу в Интернете. Настройте его в соответствии со своими предпочтениями и попрощайтесь с надоедливой рекламой!