Как написать расширения для браузера Google Crhome

Главная » Блог » Как написать расширения для браузера Google Crhome

Как написать расширение для браузера Google Crhome?

Создаём директорию с названием нашего расширения, например назовём папку, — «block-ads»

Обязательно создаём директорию «expansion«, это и будет папка с нашим проектом.

Далее создаём обязательный файл «manifest.json«. Есть документация от гугл по написанию этого манифеста, вот здесь, — developer.chrome.com/docs/extensions/mv2/manifest/

Но у меня есть упрощённый вариант, —

manifest.json

{
  "name":"Block-ads", // Название нашего расширения
  "description":"Удалить рекламу на странице", // Описание нашего расширения
  "version":"1.0", // Версия нашего расширения
  "manifest_version":2, // Версия манифеста
  "content_scripts":[
    {
      "matches": ["<all_urls>"], // Использовать расширение на всех сайтах
      // Сайты исключения, где не будет использоваться расшиерние
      "exclude_matches": ["https://www.google.com/*", "https://google.com/*", "http://www.google.com/*", "http://google.com/*", "https://mail.google.com/*", "http://mail.google.com/*", "https://studio.youtube.com/*"], 
      "js":["script.js"], // Путь до javascript - тового файла
      "run_at":"document_end" // Указание, когда мы будем использовать наше расширение, в данном случае сразу после загрузки документа(страницы)
    }
  ],
  "icons": {
    "16":"icon.png", // Путь до иконки
    "48":"icon.png",
    "128":"icon.png"
  }
}

Из манифеста комментарии все убираем, потому как это у нас json файл!

Вот такой набор файлов у нас получился, —

Теперь просто пишем код javascript в файл script.js, и он будет выполнятся на всех урлах. К примеру я написал, подобие расширения ADblock, —

script.js

window.addEventListener('load', () => {

    setInterval(() => {
        let arrElementDeleted = []
        let searchElementDeleted = [
            document.querySelectorAll('#ad_unit'),
            document.querySelectorAll('#google_esf'),
            document.querySelectorAll('#ad_container'),
            document.querySelectorAll('#content .Contentid'),

            document.querySelectorAll('lima-video'),

            document.querySelectorAll('.rectangle-banner'),
            document.querySelectorAll('.trg-b-banner-block'),
            document.querySelectorAll('.mailru-visibility-check'),
            document.querySelectorAll('.promo-banner'),
            document.querySelectorAll('.root__bottom-ad'),
            //document.querySelectorAll('.hookBlock'),

            document.querySelectorAll('a[href*="mail.ru/redir"]'),
            document.querySelectorAll('a[href*=google]'),
            document.querySelectorAll('a[href*=Google]'),

            document.querySelectorAll('script[src*=Google]'),
            document.querySelectorAll('script[src*=google]'),

            document.querySelectorAll('img[src*=Google]'),
            document.querySelectorAll('img[src*=google]'),

            document.querySelectorAll('div[class*=Google]'),
            document.querySelectorAll('div[class*=amzn]'),
            document.querySelectorAll('div[class*=google]'),
            document.querySelectorAll('div[class*=ads]'),
            //document.querySelectorAll('div[class*=ad]'),
            document.querySelectorAll('div[class*=Ads]'),
            //document.querySelectorAll('div[class*=Ad]'),

            document.querySelectorAll('iframe[src*=Google]'),
            document.querySelectorAll('iframe[id*=google]'),
            document.querySelectorAll('iframe[id*=Google]'),
            document.querySelectorAll('iframe[src*=google]'),
            document.querySelectorAll('iframe[src*=googleads]')
        ]

        searchElementDeleted.forEach(el => el.length > 0 ? addInArr(el) : '')

        function addInArr(htmlList) {
            htmlList.forEach(el => arrElementDeleted.push(el) )
        }

        if (arrElementDeleted.length > 0) arrElementDeleted.forEach(el => el.style.display = 'none')
    }, 100)

});

Переходим в браузер, открываем список всех расширений, или можно набрать вместо урла, вот это chrome://extensions/

Затем переключаем свитч справа вверху, в «Режим разработчика«, слева вверху жмём, — «Добавить распакованное расширение«, Выбираем нашу директорию «block-ads/expansion«, жмём открыть, и в теории всё должно работать, смотрим ошибки в консоли и после изменений в коде манифеста либо скрипта, обязательно обновляем само расширение во вкладке расширений, —

На этом в принципе всё, надеюсь у Вас всё получилось.
Вот примеры расширений на которых я тренировался, — disk.yandex.ru

Как написать расширения для браузера Google Crhome

Как написать расширение для браузера Google Crhome?

Поделиться ссылкой: