Как сделать расширение для браузера Яндекс и Chrome

Расширения для браузеров позволяют добавлять новые функции и улучшать пользовательский опыт. Если вы хотите узнать, как сделать расширение для браузера, эта статья поможет вам разобраться в процессе. Мы рассмотрим, как написать расширение для Chrome, разберём основные компоненты и дадим пошаговое руководство по созданию собственного плагина.

Расширения позволяют:

• Автоматизировать повседневные задачи
• Улучшать взаимодействие с веб-сайтами
• Расширять функциональность браузера
• Интегрироваться с внешними API и сервисами

Зачем создавать собственное расширение?

Создание расширения для браузеров открывает множество возможностей для разработчиков, бизнеса и пользователей.

Популярные сценарии использования

• Блокировка рекламы — расширения, такие как AdBlock, убирают нежелательные объявления.
• Менеджеры паролей — сохраняют и автоматически вводят пароли.
• Расширение функционала сайтов — кастомизация интерфейса, например, тёмные темы.
• Автоматизация действий — автозаполнение форм, скрипты для работы с CRM.
• Поиск и обработка информации — автоматический сбор и анализ данных с веб-страниц.
• Интеграция с внешними сервисами — взаимодействие с API.
• Работа с соцсетями — автолайки, автопостинг, аналитика.
• Контроль рабочего времени — трекеры продуктивности, блокировка отвлекающих сайтов.

cloud

Создание расширения

Мы разработаем несложное расширение, которое будет скрывать изображения на сайтах. Это позволит снизить объём трафика, необходимого для загрузки страницы, а также ускорить процесс загрузки.

Создайте на рабочем столе или в другом месте на вашем компьютере папку, в которой будут располагаться все файлы нашего расширения. После этого откройте папку в удобном для вас редакторе кода, я рекомендую использовать VS Code.

Первым делом создайте файл manifest.json. Это самый главный файл во всём расширении. Благодаря ему браузер понимает, какие файлы загружать и использовать, а также показывает всю информацию об этом расширении. Впишите в него следующее:

{
    "manifest_version": 3,
    "name": "Hide Images",
    "version": "1.0",
    "description": "Скрытие изображений на сайтах",
    "permissions": ["storage", "scripting", "activeTab"],
    "background": {
      "service_worker": "background.js"
    },
    "host_permissions": ["<all_urls>"],
    "action": {
      "default_title": "Скрытие изображений на сайтах",
      "default_popup": "popup.html"
    }
  }

При необходимости вы можете добавить иконку для расширения. Ваша иконка должна быть разных размеров, чтобы она могла отображаться в разных местах.

Если вы решите добавить иконки, то ваш manifest.json будет выглядеть следующим образом:

{
    "manifest_version": 3,
    "name": "Hide Images",
    "version": "1.0",
    "description": "Скрытие изображений на сайтах",
    "permissions": ["storage", "scripting", "activeTab"],
    "background": {
      "service_worker": "background.js"
    },
    "host_permissions": ["<all_urls>"],
    "action": {
      "default_title": "Скрытие изображений на сайтах",
      "default_popup": "popup.html"
    },
    "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Важно, чтобы иконки были квадратными, в формате PNG и с прозрачным фоном. PNG предпочтителен, так как он поддерживает прозрачность, что позволяет иконкам корректно отображаться на любом фоне. Кроме того, PNG сохраняет высокое качество изображения даже при сжатии, в отличие от форматов JPEG, который не поддерживает прозрачность и может терять качество из-за сжатия, и WebP, который хотя и обладает хорошей степенью сжатия, может не поддерживаться старыми версиями браузеров. Не рекомендуется использовать иконки с мелкими деталями, так как при уменьшении их размера может ухудшиться качество, что приведёт к потере четкости и ухудшению восприятия пользователями.

Создайте файл background.js и впишите в него следующее:

chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.sync.set({ hideImages: false, whitelist: [] });
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === "complete" && tab.url) {
        const url = new URL(tab.url);
       
        if (url.protocol === "http:" || url.protocol === "https:") {
            chrome.storage.sync.get(["hideImages", "whitelist"], (data) => {
                const isWhitelisted = data.whitelist.includes(url.hostname);

                if (data.hideImages && !isWhitelisted) {
                    chrome.scripting.executeScript({
                        target: { tabId: tabId },
                        files: ["content.js"]
                    }).catch(err => console.warn("Ошибка выполнения content.js:", err));
                }
            });
        }
    }
});

Затем создайте файл content.js со следующим кодом:

document.querySelectorAll("img").forEach(img => {
    img.style.display = "none";
});

Теперь создадим popup.html, который будет открываться при нажатии на иконку расширения.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Настройки</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>Настройки</h2>

    <label class="switch">
        <input type="checkbox" id="toggleHideImages">
        <span class="slider"></span>
    </label>
    <span>Скрывать изображения</span>

    <h3>Белый список</h3>
    <input type="text" id="whitelistInput" placeholder="Введите ссылку на сайт и нажмите Enter">
    <ul id="whitelist"></ul>

    <script src="popup.js"></script>
</body>
</html>

Создайте стили styles.css:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    width: 330px;
    padding: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 10px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4caf50;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

h3 {
    margin-top: 10px;
}

input {
    width: 90%;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f4f4;
    padding: 5px;
    margin-top: 5px;
    border-radius: 5px;
}

button {
    background: red;
    color: white;
    border: none;
    padding: 3px 5px;
    cursor: pointer;
    border-radius: 3px;
}

button:hover {
    background: darkred;
}

.no-animation + .slider {
    transition: none !important;
}

.no-animation + .slider:before {
    transition: none !important;
}

И в конце создайте файл popup.js:

document.addEventListener("DOMContentLoaded", () => {
    const toggle = document.getElementById("toggleHideImages");
    const whitelistInput = document.getElementById("whitelistInput");
    const whitelistList = document.getElementById("whitelist");

    toggle.classList.add("no-animation");

    chrome.storage.sync.get(["hideImages", "whitelist"], (data) => {
        toggle.checked = data.hideImages;
        updateWhitelistUI(data.whitelist || []);

        setTimeout(() => {
            toggle.classList.remove("no-animation");
        }, 10);
    });

    toggle.addEventListener("change", () => {
        chrome.storage.sync.set({ hideImages: toggle.checked });
    });

    whitelistInput.addEventListener("keypress", (event) => {
        if (event.key === "Enter") {
            const url = new URL(whitelistInput.value);
            const hostname = url.hostname;

            chrome.storage.sync.get("whitelist", (data) => {
                const whitelist = data.whitelist || [];
                if (!whitelist.includes(hostname)) {
                    whitelist.push(hostname);
                    chrome.storage.sync.set({ whitelist }, () => {
                        updateWhitelistUI(whitelist);
                    });
                }
            });

            whitelistInput.value = "";
        }
    });

    function updateWhitelistUI(whitelist) {
        whitelistList.innerHTML = "";
        whitelist.forEach(site => {
            const li = document.createElement("li");
            li.textContent = site;
            const removeBtn = document.createElement("button");
            removeBtn.textContent = "Удалить";
            removeBtn.onclick = () => removeFromWhitelist(site);
            li.appendChild(removeBtn);
            whitelistList.appendChild(li);
        });
    }

    function removeFromWhitelist(site) {
        chrome.storage.sync.get("whitelist", (data) => {
            const whitelist = data.whitelist.filter(item => item !== site);
            chrome.storage.sync.set({ whitelist }, () => {
                updateWhitelistUI(whitelist);
            });
        });
    }
});

Тестирование расширения

Чтобы протестировать расширение, его необходимо загрузить в ваш браузер. Введите в адресную строку chrome://extensions/. Перед вами откроется страница с расширениями.

В правом верхнем углу переключите ползунок «Режим разработчика» в активное состояние. После этого у вас появятся дополнительные кнопки, среди которых будет «Загрузить распакованное расширение». Нажмите на неё, а затем выберите вашу папку с файлами расширения.

Если всё успешно, то расширение загрузится и станет доступным на этой вкладке, а также оно появится в правом верхнем углу браузера, где расположены все ваши установленные расширения.

Нажмите на иконку расширения в верхнем меню. Перед вами откроется следующее:

Если вы переключите ползунок в активное состояние, то при открытии сайтов изображения на них перестанут загружаться. Кроме того, вы можете внести сайт в белый список, и если функция скрытия изображений активирована, а сайт находится в белом списке, то изображения на нём не будут пропадать.

Публикация расширения

Через chrome://extensions/ вы можете лишь загрузить расширение для себя, чтобы тестировать его и использовать в своих целях. Если же вы хотите опубликовать его в открытый доступ, чтобы любой человек в интернете мог его скачать и использовать в своём браузере, для этого необходимо его опубликовать через Chrome Web Store.

Чтобы опубликовать своё расширение, необходимо зарегистрироваться в Chrome Web Store в качестве разработчика, а также заплатить $5, чтобы начать публиковать расширения.

К сожалению из-за санкций в РФ это сделать довольно тяжело, ведь чтобы заплатить взнос, необходимо использовать банковскую карту, которая не находится под санкциями.

Если у вас есть возможность оплатить $5 и загрузить расширение, то следуйте этим шагам:

1. Перейдите на панель разработчика Chrome.
2. Войдите в учетную запись разработчика.
3. Нажмите кнопку «Добавить новый элемент».
4. Нажмите «Выбрать файл» → «ваш ZIP-файл» → «Загрузить». Если манифест вашего элемента и ZIP-файл действительны, вы можете редактировать свой элемент на следующей странице.

Советы по улучшению расширения

Прежде чем приступить к улучшению расширения, важно определить, какие аспекты требуют улучшения и как это повлияет на работу расширения. Стоит провести анализ производительности, удобства использования, безопасности и совместимости с разными версиями браузеров. Например, если пользователи жалуются на медленную работу, следует проверить использование ресурсов и оптимизировать код. Если возникают проблемы с интерфейсом, можно изучить улучшить UI/UX-дизайн.

Оптимизация кода и безопасности

• Минимизируйте JavaScript-код для ускорения работы.
• Используйте HTTPS для загрузки ресурсов.
• Минимизируйте количество разрешений API.
• Проверяйте код на уязвимости с помощью инструментов вроде ESLint и Snyk, которые помогут обнаружить потенциальные проблемы в безопасности.
• Регулярно обновляйте своё расширение, следя за изменениями в API браузеров и исправляя найденные уязвимости.

Способы монетизации расширений

• Платная подписка — доступ к премиум-функциям.
• Реклама — интеграция рекламных блоков.
• Партнёрские программы — интеграция с сервисами за комиссию.

Надежное облако для ваших проектов

Заключение

Теперь вы обладаете всеми необходимыми знаниями для создания собственного расширения. Это не только улучшит ваш опыт работы в браузере, но и позволит вам создавать инструменты, которые могут быть полезны тысячам пользователей. Расширения открывают множество возможностей — от персонализации веб-пространства и автоматизации задач до интеграции с различными сервисами.