В статье подробно показано, как за несколько шагов создать простое расширение для Google Chrome: собрать четыре файла (manifest.json, HTML, CSS, JS), загрузить расширение в chrome://extensions и реализовать сценарий, который открывает сайт MakeUseOf и выполняет случайный поиск по категориям. Подписывайтесь на чек-листы безопасности и тесты приёмки, чтобы расширение работало надёжно и безопасно.

Вы когда-нибудь были неудовлетворены возможностями вашего веб‑браузера? Даже если вы перерыли магазин расширений Google, не всегда достаточно просто нажать «скачать», чтобы получить нужный функционал.

Именно для этого существуют браузерные расширения. В этой статье мы пошагово создадим собственное расширение Google Chrome с нуля и разберём, какие аспекты стоит учитывать при разработке, тестировании и развёртывании.

Что такое расширение Google Chrome?

Современные браузеры, такие как Google Chrome, поставляются с набором встроенных возможностей. Расширения (extensions) позволяют добавлять или изменять функционал браузера и взаимодействовать со страницами. Расширение — это не просто сайт: оно может работать в фоне, реагировать на события браузера и встраивать скрипты в открытые страницы.

Ключевые технологии для создания расширений: HTML, CSS и JavaScript. Если вы знакомы с веб‑разработкой, то сможете быстро начать.

Что мы будем делать

Мы создадим простое расширение, которое открывает сайт MakeUseOf и выполняет случайный поиск по категориям статей сайта. Проект быстрый и прямолинейный, но покрывает основные приёмы работы с Chrome Extensions.

Чему вы научитесь:

• Создавать расширение Google Chrome
• Внедрять кастомный код в веб‑страницы через расширение
• Создавать обработчики событий и симулировать клики
• Генерировать случайные числа
• Работать с массивами и переменными

Краткая методология разработки

• Минимальный набор файлов: manifest.json, index.html, style.css, script.js
• Итеративно: реализовать базовую механику → протестировать локально → добавить обработку ошибок и безопасность → подготовить к публикации (если нужно)
• Всегда проверяйте разрешения (permissions) и host_permissions: они определяют доступ к страницам и данным

Шаг 1: Создаём файлы

Когда расширение не планируется к распространению, храните его локально. Для простого расширения достаточно четырёх файлов: HTML, CSS, JavaScript и JSON (manifest). В нашем примере файлы называются index.html, style.css, script.js и manifest.json. manifest.json должен иметь именно такое имя.

Разместите все файлы в одной корневой папке.

Шаг 2: manifest.json — основная конфигурация

Файл manifest сообщает Chrome, как работать с расширением: имя, версия, описание, версия манифеста, разрешения и действие по умолчанию (в нашем случае popup — index.html).

Содержимое примера manifest.json:

        `{  
"name": "MakeUseOf.com Automated Search",  
"version": "1.0.0",  
"description": "A search tool to find interesting articles",  
"manifest_version": 3,  
"author": "Samuel Garbett",  
    "permissions": ["storage", "declarativeContent", "activeTab", "scripting"],  
    "host_permissions": [""],  
"action":{  
"default_popup": "index.html",  
"default_title": "MUO Auto Search"  
}  
}  
`
    

Примечания по manifest:

• manifest_version: используйте 3 (MV3) — это текущий стандарт Chrome Extensions.
• permissions: даёт права расширению; указывайте только необходимые.
• host_permissions: перечисляет домены, на которых можно выполнять скрипты — для работы с MakeUseOf укажите соответствующий хост явно.
• action.default_popup: указывает HTML‑файл всплывающего окна.

Важное: не оставляйте пустые host_permissions в продакшене. Указывайте точные URL (например, https://www.makeuseof.com/*), чтобы избежать неоправданных прав.

Шаг 3: HTML и CSS для popup

Создаём простой UI — заголовок, две кнопки (переход на сайт и запуск случайного поиска) и подключаем script.js.

index.html:

        `  
  
  
  
  
  
  
  
  
  
  
  
  
  
MUO Auto Search
  
  
Go to MakeUseOf.com  
  
Start Random Search  
  
  
  
  
  
  
`
    

style.css (простые правила для pop‑up):

        `html {  
    width: 400px;  
}  
body {  
    font-family: Helvetica, sans-serif;  
}  
h1 {  
    text-align: center;  
}  
#buttonOne {  
    border-radius: 0px;  
    width: 100%;  
    padding: 10px 0px;  
}  
#buttonTwo {  
    border-radius: 0px;  
    width: 100%;  
    padding: 10px 0px;  
    margin-top: 10px;  
}  
`
    

Советы по дизайну:

• Держите popup компактным (макс. ширина ~400px). Это привычный формат для расширений.
• Используйте понятные метки кнопок. Если собираетесь локализовать — переводите тексты в HTML.

Шаг 4: JavaScript — логика расширения

Главная логика содержится в script.js. Мы будем внедрять функцию autoSearch на активную вкладку и эмулировать клики и ввод в поля формы на сайте MakeUseOf.

Оригинальный код:

        `// This function inserts our autoSearch function into the page's code  
functioninsertScript() {  
// This selects the focused tab for the operation and passes the autoSearch function  
chrome.tabs.query({active: true, currentWindow: true}, tabs => {  
chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch})  
})  
  
// This closes the extension pop-up to select the website search bar  
window.close();  
}  
  
// This is an event listener that detects clicks on our "Start Random Search" button  
document.getElementById('buttonTwo').addEventListener('click', insertScript)  
  
// This function selects a random topic from an array and   
functionautoSearch() {  
// This is an array to store our search terms  
const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac",  
            "Linux", "Android", "Apple", "Internet", "Security",  
            "Programming", "Entertainment", "Productivity", "Career", "Creative",  
            "Gaming", "Social Media", "Smart Home", "DIY", "Review"];  
  
// This generates a random number between 0 and 19  
let selectorNumber = Math.floor(Math.random() * 20);  
  
// This uses the random number to select an entry from the array  
let selection = searchTerms[selectorNumber];  
  
// This simulates a click on the MUO website search icon  
document.getElementById("js-search").click();  
  
// This sets the MUO website search bar as a variable  
var searchBar = document.getElementById("js-search-input");  
  
// This inserts our random search term into the search bar  
searchBar.value = searchBar.value + selection;  
  
// This finishes the process by activating the website form  
document.getElementById("searchform2").submit();  
}`
    

Комментарии к коду:

• insertScript: использует chrome.scripting.executeScript (MV3) для выполнения autoSearch в контексте активной вкладки.
• autoSearch: выбирает случайный элемент из массива категорий, кликает по элементу с id=”js-search”, вставляет текст в поле с id=”js-search-input” и отправляет форму с id=”searchform2”.

Проверки и обработка ошибок, которых в примере нет, но которые следует добавить:

• Проверять, что элементы с нужными id существуют на странице перед доступом к ним.
• Логировать ошибки в консоль и уведомлять пользователя, если операция не удалась.
• Ограничивать частоту вызовов (rate limiting), чтобы не рассылать множество запросов подряд.

Шаг 5: Установка в Chrome

1. Откройте Google Chrome.
2. Перейдите на chrome://extensions.
3. Включите режим разработчика (Developer mode) в правом верхнем углу.

4. Нажмите Load Unpacked (Загрузить распакованное) и укажите папку с вашими файлами.

5. После загрузки фиксация: нажмите значок пазла и закрепите расширение на панели инструментов.

Важно: расширение будет работать только на тех сайтах, которые разрешены в manifest.json (host_permissions) и в случаях, когда элементы DOM имеют ожидаемые id.

Когда это будет работать, а когда нет (примеры неудач)

• Не сработает, если MakeUseOf изменит id элементов (js-search, js-search-input, searchform2).
• Не сработает на сайтах с CSP (Content Security Policy), блокирующим внедрение скриптов, если host_permissions не разрешены.
• Не сработает, если пользователь отключил разрешения для расширения или использует браузер с ограничениями.

Альтернативные подходы

• Использовать message passing: вместо непосредственного executeScript можно отправлять сообщения в content script, который уже загружен на целевых страницах.
• Создать content script в manifest.json, который автоматически инжектируется на определённые страницы, и слушает команды из popup через chrome.runtime.sendMessage.
• Для кросс‑браузерной поддержки использовать WebExtensions API и тестировать в Firefox/Edge.

Безопасность и приватность

• Запрашивайте минимально необходимые permissions.
• Не собирайте личные данные пользователей без явного согласия.
• Для хранения данных используйте chrome.storage (не локальные cookies без необходимости).
• При работе с внешними доменами явно указывайте host_permissions.

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

Тесты и критерии приёмки

Критерии приёмки:

• Popup открывается и отображает заголовок и две кнопки.
• Кнопка «Go to MakeUseOf.com» открывает сайт в новой вкладке.
• Кнопка «Start Random Search» вызывает insertScript и закрывает popup.
• На активной вкладке autoSearch кликает по кнопке поиска, вставляет текст и отправляет форму.
• При отсутствии элементов на странице показывается понятное сообщение в консоли (или alert).

Тесты (ручные):

• Позитивный: на странице MakeUseOf все действия выполняются и открывается список результатов.
• Негативный: открыть другую страницу (например, about:blank) и убедиться, что расширение корректно обрабатывает отсутствие элементов (не ломается).
• Граничный: если элемент присутствует, но с другим id, проверка сообщает об ошибке.

Риски и способы смягчения

• Риск: расширение запрашивает слишком много разрешений → смягчение: сократить permissions до минимально необходимых.
• Риск: злоупотребление доступом к страницам → смягчение: явно ограничить host_permissions и не внедрять скрипты на проактивные сайты.
• Риск: утечка данных → смягчение: шифрование/добавление логики удаления данных и политики конфиденциальности.

Контроль качества и развёртывание

• Локальное тестирование: chrome://extensions → Load Unpacked.
• Код‑ревью: проверить все изменения permissions и работу с DOM.
• Автоматизация: добавить простые unit‑тесты для чистой JS‑логики (например, выбор случайного индекса).
• Публикация в Chrome Web Store требует описания, скриншотов и политики конфиденциальности.

Чек‑лист ролей

Для разработчика:

• Проверить manifest.json на минимальные permissions
• Добавить обработку ошибок в script.js
• Убедиться, что код соответствует MV3

Для тестировщика:

• Выполнить позитивные и негативные тесты
• Проверить поведение при изменённых id элементов

Для пользователя:

• Проверить, что расширение закреплено и имеет понятный title
• Ознакомиться с политикой приватности (если применимо)

Пример альтернативы: content script вместо executeScript

Если вы хотите, чтобы логика всегда была доступна на страницах MakeUseOf, добавьте content script в manifest:

• manifest.json → “content_scripts”: [{“matches”: [“https://www.makeuseof.com/*”], “js”: [“content.js”]}]

content.js будет загружаться автоматически и слушать сообщения из popup. Такой подход делает поведение более предсказуемым и снимает необходимость динамически inject’ить функции через chrome.scripting.

Сопроводительная документация и шаблоны

Шаблон папки расширения:

• my-extension/
  • manifest.json
  • index.html
  • style.css
  • script.js
  • README.md

README — включите инструкции по локальной установке и тестам.

Короткое объявление (100–200 слов)

MUO Auto Search — лёгкое расширение Chrome, которое даёт новую жизнь поиску на MakeUseOf. Достаточно нажать кнопку в pop‑up, и расширение выберет случайную категорию и выполнит поиск по сайту. Это отличный пример того, как расширения позволяют автоматизировать рутинные действия в браузере. Расширение предназначено для локального использования и демонстрации принципов работы Chrome Extensions. Перед установкой убедитесь, что вы доверяете коду и предоставленным разрешениям.

Краткая сводка и рекомендации

• Начните с минимального набора файла и функций, затем расширяйте.
• Всегда уточняйте host_permissions и не оставляйте их пустыми.
• Добавьте обработку ошибок и тесты, прежде чем делиться расширением.
• Для распространения подготовьте политику приватности и описание в Web Store.

1‑строчный глоссарий

• manifest.json: конфигурационный файл расширения.
• content script: JS, который выполняется в контексте веб‑страницы.
• popup: всплывающее окно расширения (action.default_popup).

Итог

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