Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Зачем создавать собственное расширение?
Создание расширения для браузеров открывает множество возможностей для разработчиков, бизнеса и пользователей.
Популярные сценарии использования
- Блокировка рекламы — расширения, такие как AdBlock, убирают нежелательные объявления.
- Менеджеры паролей — сохраняют и автоматически вводят пароли.
- Расширение функционала сайтов — кастомизация интерфейса, например, тёмные темы.
- Автоматизация действий — автозаполнение форм, скрипты для работы с CRM.
- Поиск и обработка информации — автоматический сбор и анализ данных с веб-страниц.
- Интеграция с внешними сервисами — взаимодействие с API.
- Работа с соцсетями — автолайки, автопостинг, аналитика.
- Контроль рабочего времени — трекеры продуктивности, блокировка отвлекающих сайтов.
Мы разработаем несложное расширение, которое будет скрывать изображения на сайтах. Это позволит снизить объём трафика, необходимого для загрузки страницы, а также ускорить процесс загрузки.
Создайте на рабочем столе или в другом месте на вашем компьютере папку, в которой будут располагаться все файлы нашего расширения. После этого откройте папку в удобном для вас редакторе кода, я рекомендую использовать 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"
}
}При необходимости вы можете добавить иконку для расширения. Ваша иконка должна быть разных размеров, чтобы она могла отображаться в разных местах.
| Размер | Где используется |
|---|---|
| 16x16 | Вкладка расширений в панели инструментов |
| 32x32 | В некоторых диалогах и всплывающих уведомлениях |
| 48x48 | В Chrome Web Store |
| 128x128 | В Chrome Web Store и в настройках расширений |
Вкладка расширений в панели инструментов
В некоторых диалогах и всплывающих уведомлениях
В Chrome Web Store и в настройках расширений
Если вы решите добавить иконки, то ваш 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 и загрузить расширение, то следуйте этим шагам:
- Перейдите на панель разработчика Chrome.
- Войдите в учётную запись разработчика.
- Нажмите кнопку «Добавить новый элемент».
- Нажмите «Выбрать файл» → «ваш ZIP-файл» → «Загрузить». Если манифест вашего элемента и ZIP-файл действительны, вы можете редактировать свой элемент на следующей странице.
Советы по улучшению расширения
Прежде чем приступить к улучшению расширения, важно определить, какие аспекты требуют улучшения и как это повлияет на работу расширения. Стоит провести анализ производительности, удобства использования, безопасности и совместимости с разными версиями браузеров. Например, если пользователи жалуются на медленную работу, следует проверить использование ресурсов и оптимизировать код. Если возникают проблемы с интерфейсом, можно изучить улучшить UI/UX-дизайн.
Оптимизация кода и безопасности
- Минимизируйте JavaScript-код для ускорения работы.
- Используйте HTTPS для загрузки ресурсов.
- Минимизируйте количество разрешений API.
- Проверяйте код на уязвимости с помощью инструментов вроде ESLint и Snyk, которые помогут обнаружить потенциальные проблемы в безопасности.
- Регулярно обновляйте своё расширение, следя за изменениями в API браузеров и исправляя найденные уязвимости.
Способы монетизации расширений
- Платная подписка — доступ к премиум-функциям.
- Реклама — интеграция рекламных блоков.
- Партнёрские программы — интеграция с сервисами за комиссию.
Нужен сервер для практики? Арендуйте VPS/VDS в России — root-доступ, NVMe, DDoS-защита и поддержка 24/7.