popup-interact-js-snippets

JavaScript позволяет сделать всплывающее окно интерактивным. Даже без глубокого изучения JavaScript, можно добавить простую интерактивность, используя готовые сниппеты кода, которые можно найти в интернете и адаптировать.

Где искать готовые JavaScript сниппеты:

CodePen: Огромная коллекция JavaScript, CSS и HTML сниппетов (пенсов). Используйте поиск (например, "simple javascript clock", "javascript calculator").
JSFiddle: Аналогично CodePen, платформа для обмена и тестирования веб-кода.
GitHub Gist: Сервис для обмена фрагментами кода. Поиск по GitHub Gist может привести к полезным сниппетам.
Поиск в Google: Запросы типа "javascript code for simple clock", "javascript code for calculator", "javascript code for countdown timer" могут привести к блогам, статьям и форумам с готовыми решениями.

Пример: Добавляем простые часы во всплывающее окно.

Найдите сниппет часов на CodePen: Перейдите на CodePen и введите в поиск "simple javascript clock". Выберите подходящий сниппет.
Скопируйте JavaScript код: В выбранном пенсе найдите раздел "JS" и скопируйте JavaScript код.
Создайте popup.js: В папке вашего расширения создайте файл popup.js.
Вставьте код в popup.js: Вставьте скопированный JavaScript код в popup.js.
Адаптируйте HTML (если необходимо): Некоторые сниппеты могут требовать определенной HTML структуры. Проверьте HTML код в пенсе (раздел "HTML") и убедитесь, что ваш popup.html содержит необходимые элементы (например, div с определенным id, куда будут выводиться часы). Если нужно, добавьте или измените HTML в popup.html.
Подключите popup.js к popup.html: В конце <body> в popup.html добавьте строку: <script src="popup.js"></script>.

Пример popup.html для часов (может потребоваться адаптация в зависимости от сниппета):

<!DOCTYPE html>
<html>
<head>
  <title>Простые часы</title>
</head>
<body>
  <div id="clock"></div> <script src="popup.js"></script>
</body>
</html>

Пример popup.js (сниппет с CodePen, может потребоваться адаптация):

function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('clock').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}

startTime(); // Запуск часов при загрузке страницы

Важно:

Просматривайте код сниппетов: Перед использованием готового кода, постарайтесь понять, что он делает. Даже если вы не понимаете всего кода, посмотрите на названия функций и переменных, комментарии (если есть).
Тестируйте и адаптируйте: Готовые сниппеты могут требовать небольшой адаптации для работы в вашем расширении. Тестируйте код и, если нужно, немного изменяйте его, чтобы добиться желаемого результата.
Указание авторства (если требуется лицензией): Если лицензия сниппета требует указания авторства, не забудьте упомянуть автора и источник в описании расширения или в файле README.

Практическое задание:

Найдите на CodePen или JSFiddle сниппет для простого калькулятора на JavaScript.
Интегрируйте этот калькулятор во всплывающее окно вашего расширения, следуя шагам, описанным выше.
Стилизуйте калькулятор с помощью CSS (атрибут style в HTML), чтобы он выглядел лучше.
Попробуйте найти и интегрировать другие простые JavaScript сниппеты (например, таймер обратного отсчета, генератор случайных чисел, простой конвертер валют).