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

5
(8)

Как написать расширение для браузера 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 

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

Насколько был полезен этот пост?

Кликни что бы проголосовать

Средний рейтинг 5 / 5. Всего голосов 8

Пока нет голосов, будьте первым кто оценит этот пост.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *