Сегодня мы погрузимся в удивительный мир расширений Chrome, увлекательную область, которая поднимает ваш опыт просмотра на новый уровень.
Давайте засучим рукава и углубимся в простой, но чрезвычайно полезный проект: расширение Chrome для кодирования и декодирования строк base64. Почему base64, спросите вы? Скажем так, это старый приятель из моих предыдущих проектов, который мне очень помог! Так почему бы не начать наше путешествие отсюда? Пристегнитесь и начнем!
Предпосылка
Для этого путешествия вам понадобятся некоторые знания HTML, CSS и JavaScript.
Шаг 1: Настройка проекта
Во-первых, давайте настроим папку нашего проекта. Назовите его "base64-расширение". В этой папке нам нужны три файла:
manifest.json: Это сердце расширения. Он сообщает Chrome все, что ему нужно знать о вашем расширении.popup.html: это HTML-документ, который будет отображаться при нажатии на значок расширения в меню Chrome.popup.js: Наш файл JavaScript, в котором происходит волшебство!styles.css: Для оформления вашего расширения.
Идите вперед, создайте эти файлы в каталоге вашего проекта.
Шаг 2: Создание нашего манифеста
Далее мы собираемся заполнить наш файл manifest.json. Вот как Chrome знает, что делать с нашим расширением. Вот что вам понадобится:
{
"manifest_version": 3,
"name": "Base64 Converter",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
}
Примечание. Вам нужно будет предоставить свои собственные значки или использовать заполнитель.
Шаг 3: Создание пользовательского интерфейса
Давайте создадим наше всплывающее окно. Это будет просто: два текстовых поля (одно для ввода, одно для вывода), две кнопки (для кодирования и декодирования) и какой-нибудь броский стиль.
