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

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

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

Создаём директорию с названием нашего расширения, например назовём папку, — «block-ads»Обязательно создаём директорию «expansion«, это и будет папка с нашим проектом.Далее создаём обязательный файл «manifest.json«. Есть документация от гугл по написанию этого манифеста, вот здесь, — developer.chrome.com/docs/extensions/mv3/manifest/ Но у меня есть упрощённый вариант, —

manifest.json

{
  "name": "Block-ads",
  "description": "Удалить рекламу на странице",
  "version": "0.0.1",
  "manifest_version": 3,
  "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"],
      "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('div[id*=yandex_rtb]'),
            document.querySelectorAll('div[id*=ya_partner]'),

            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*=ya]'),
            document.querySelectorAll('yatag'),

            //document.querySelectorAll('div[class*=ad]'),
            document.querySelectorAll('div[class*=Ads]'),
            document.querySelectorAll('div[class*=adaptiveConstructorAd]'),
            document.querySelectorAll('div[data-name*=adaptiveConstructorAd]'),

            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'
            });
        }

        // ShadowRoot
        /*let allElementDom = document.getElementsByTagName("*");
        for (const element of allElementDom) {
            element.attachShadow({mode: 'open'});

            if (element instanceof ShadowRoot) {
                console.log(element);
            }


            if(element.toString() === "[object ShadowRoot]") {
                console.log(element);
            }
        }*/

    }, 5000);
});

let body = document.querySelector('body');
let styleTag = document.createElement('style')
styleTag.setAttribute('type', 'text/css');
styleTag.innerHTML = ':host{display: none} :host-context{display: none}';
body.appendChild(styleTag);

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

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

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

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

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

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