Калькулятор, как расширение для браузера
Приложение, которое мы создаем, называется браузерным расширением. Браузерные расширения позволяют добавлять дополнительную функциональность в ваш браузер. Они могут изменять внешний вид страниц, добавлять новые функции или даже создавать отдельные мини-приложения, такие как наш калькулятор.
Структура проекта
У нас будут три основных файла:
manifest.json Описывает наше расширение и указывает браузеру, какие ресурсы оно использует.
calculator.js Содержит логику работы калькулятора.
calculator.html Представляет собой пользовательский интерфейс калькулятора.
Также нам понадобится иконка для нашего расширения (icon.png), которая будет отображаться на панели инструментов браузера.
Файл manifest.json
Этот файл является основным конфигурационным файлом для любого браузерного расширения. Он содержит информацию о названии, версии, описании и других параметрах расширения.
Вот пример содержимого manifest.json для нашего калькулятора:
{
"manifest_version": 3,
"name": "Browser Calculator",
"version": "1.0",
"description": "A simple in-browser calculator.",
"action": {
"default_icon": "icon.png",
"default_popup": "calculator.html"
},
"permissions": []
}
Разберём этот код по частям:
«manifest_version»: Указывает версию манифеста. Версия 3 используется в современных браузерах.
«name»: Название нашего расширения.
«version»: Версия нашего расширения.
«description»: Краткое описание того, что делает наше расширение.
«action»: Определяет, что происходит при активации расширения. Здесь мы указываем, какую иконку использовать («default_icon») и какой HTML-файл открывать («default_popup»).
«permissions»: Список разрешений, необходимых нашему расширению. В нашем случае никаких специальных разрешений не требуется, поэтому массив пуст.
Файл calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<style>
body { font-family: Arial, sans-serif; padding: 10px; }
input[type=number], select { width: 50px; text-align: center; margin-right: 5px; }
#result { font-weight: bold; margin-top: 10px; }
</style>
</head>
<body>
<input type="number" id="num1" placeholder="Number 1">
<select id="operation">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
<option value="^">^</option>
</select>
<input type="number" id="num2" placeholder="Number 2">
<button id="calculate">Calculate</button>
<div id="result"></div>
<script src="calculator.js"></script>
</body>
</html>
Давайте разберемся, что тут происходит:
< input type= » number » id= » num1 » placeholder= » Number 1 » > : Поле ввода для первого числа.
< select id= » operation » > : Выпадающий список операций (+, -, *, /, %, ^).
< input type= » number » id= » num2 » placeholder= » Number 2 » > : Поле ввода для второго числа.
< button id= » calculate » > Calculate < /button > : Кнопка для выполнения расчета.
< div id= » result » > < /div > : Элемент, куда будет выводиться результат.
< script src= » calculator.js » > < /script > : Подключение скрипта с логикой калькулятора.
Файл calculator.js
// Операции калькулятора
const operations = {
'+': (a, b) => a + b,
'-': (a, b) => a - b,
'*': (a, b) => a * b,
'/': (a, b) => a / b,
'%': (a, b) => a % b,
'^': (a, b) => Math.pow(a, b)
};
document.getElementById('calculate').addEventListener('click', () => {
const operation = document.querySelector('#operation').value;
const num1 = parseFloat(document.querySelector('#num1').value);
const num2 = parseFloat(document.querySelector('#num2').value);
if (!operations.hasOwnProperty(operation)) {
alert("Invalid operation");
return;
}
try {
const result = operations[operation](num1, num2);
document.querySelector('#result').innerText = result.toString();
} catch (e) {
alert(e.message);
}
});
Это логика работы калькулятора. Рассмотрим каждую часть кода подробнее:
const operations = {…}: Объект, содержащий функции для каждой арифметической операции. Ключи объекта соответствуют символам операций, а значения — функциям, выполняющим эти операции.
document.getElementById(‘calculate’).addEventListener(‘click’, …) : Добавляем обработчик события click на кнопку calculate. Когда кнопка нажата, выполняется следующий блок кода.
const operation = document.querySelector(‘#operation’).value;: Получаем выбранную операцию из выпадающего списка.
const num1 = parseFloat(document.querySelector(‘#num1’).value);: Преобразуем значение первого поля ввода в число с плавающей точкой.
const num2 = parseFloat(document.querySelector(‘#num2’).value);: То же самое для второго поля ввода.
if (!operations.hasOwnProperty(operation)) {…}: Проверяем, существует ли операция в объекте operations. Если нет, показываем сообщение об ошибке.
try {…} catch (e) {…}: Используем блок try-catch, чтобы обработать возможные ошибки при выполнении операций (например, деление на ноль).
const result = operations[operation](num1, num2);: Выполняем выбранную операцию над числами.
document.querySelector(‘#result’).innerText = result.toString();: Выводим результат в элемент с ID result.
Загрузка расширения в браузер
После того как все файлы готовы, можно загрузить расширение в браузер. Для этого выполните следующие шаги:
1. Откройте настройки вашего браузера.
2. Найдите раздел «Расширения» или «Дополнения».
3. Включите режим разработчика.
4. Нажмите кнопку «Загрузить распакованное расширение» и выберите папку с вашим проектом.
Теперь ваше расширение появится на панели инструментов браузера. При нажатии на иконку откроется окно с калькулятором.
Мы создали простое браузерное расширение — калькулятор, используя HTML, CSS и JavaScript. Это отличное начало для изучения разработки браузерных приложений и расширения возможностей вашего браузера.