Вы когда-нибудь задумывались, как создать расширение для блокировки рекламы в 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.
✨ Создание собственного расширения для блокировщика рекламы позволяет упростить работу в Интернете. Настройте его в соответствии со своими предпочтениями и попрощайтесь с надоедливой рекламой!