Разработка собственного расширения для блокировки рекламы, подобного AdBlock, — задача не так сложна, как кажется. Это руководство описывает создание простого расширения для Chrome, удаляющего видео с YouTube со страниц веб-сайтов. Несмотря на ограниченный функционал, оно иллюстрирует основные концепции разработки расширений Chrome, применимые для создания более сложных плагинов, включая полноценный аналог AdBlock.
Разработка расширения: пошаговое руководство
Для разработки расширения необходимы знания HTML, CSS и JavaScript.
Создание проекта и файла manifest.json
Создайте проект и файл manifest.json. Этот файл содержит основные характеристики расширения:
- Версию манифеста
- Название
- Описание
- Версию проекта
- Имя автора
- Название, отображаемое при наведении курсора на значок расширения
- Иконку расширения
- Страницы, на которых будет работать расширение (в нашем случае — все страницы)
- Скрипты, которые будут использоваться (в примере — jquery.js и собственный скрипт).
Добавление и настройка скриптов
Добавьте в проект файл jquery.js (или другую библиотеку JavaScript). Затем создайте собственный скрипт. В нём будем искать теги <iframe>, проверять атрибут src и удалять те, которые содержат слово «youtube». Можно скрывать элемент вместо удаления. Пример кода:
// Пример кода (неполный)
$('iframe[src*="youtube"]').remove(); // или $('iframe[src*="youtube"]').hide();Загрузка расширения в Chrome
Включите режим разработчика в настройках расширений Chrome, нажмите «Загрузить распакованное расширение» и выберите папку с проектом.
Добавление пользовательского интерфейса
Для добавления пользовательского интерфейса, укажите в manifest.json HTML-файл для всплывающего окна. Добавьте необходимые разрешения, например, доступ к вкладкам браузера. Создайте HTML-файл с дизайном и стилями CSS.
Создайте отдельный JavaScript-файл и подключите его к HTML-странице. В нём напишите функции, выполняющиеся при нажатии на кнопки. Например, при нажатии на кнопку можно изменить фон страницы на тёмный, а текст — на белый:
// Пример кода (неполный)
function changeBackgroundColor() {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: () => {
document.body.style.backgroundColor = 'black';
document.body.style.color = 'white';
}
});
});
}Создание расширений для браузеров — относительно простая задача, требующая знания HTML, CSS и JavaScript. Хотя заработать большие деньги на расширениях сложно, они — отличный инструмент для расширения функциональности веб-сайтов и решения различных задач. Это руководство дало базовое понимание процесса разработки, которое можно использовать для создания более сложных и функциональных расширений.