ПОЧЕМУ И КАК Я РАЗРАБОТАЛ ХРОМИРОВАННОЕ РАСШИРЕНИЕ ДЛЯ УМЕНЬШЕНИЯ ЗРЕНИЯ ДЕФЕКТОВ, РАЗВИВАЕМЫХ ПОСЛЕ ДЛИТЕЛЬНОЙ РАБОТЫ ПЕРЕД ЭКРАНОМ КОМПЬЮТЕРА

Я заметил, что иногда у меня глаза напрягаются или слезятся после нескольких часов работы за компьютером, и иногда бывает больно.

Люди, которые часто работают с экраном компьютера, могут в долгосрочной перспективе снизить продуктивность зрения, и это происходит из-за воздействия на глаза ультрафиолетовых лучей, которые проецируются с экранов.

«ПОЧЕМУ»

Лучи УФ-А могут повредить ваше центральное зрение и могут повредить желтое пятно, часть сетчатки в задней части глаза.

Лучи УФ-В поглощаются передней частью глаза (роговица и хрусталик), поглощает большую часть УФ-В-лучей, но эти лучи могут нанести даже больший вред вашим глазам, чем УФ-А. лучи.

УФ-лучи также приводят к другим глазным заболеваниям, таким как дегенерация желтого пятна, катаракта, птеригиум, солнечный ожог роговицы и даже рак кожи.

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

Очки с антибликовым фильтром работают, но не на 100%, затем я прочитал о правиле 20–20–20, которое популяризировал доктор Джефф Аншелл, специалист по «эргономике зрения». Идея заключалась в том, чтобы отводить взгляд от экрана каждые 20 минут нахождения перед компьютером, смотреть на что-то на расстоянии 20 футов в течение 20 секунд, это также помогает моргать столько раз, сколько вы можете во время упражнения.

Именно тогда мне пришла в голову блестящая идея написать программу, которая могла бы напоминать мне выполнять это упражнение каждые 20 минут, а также проводить меня через всю процедуру упражнения.

Я создал это расширение Chrome, используя Vanilla JavaScript и API уведомлений Chrome https://developer.chrome.com/apps/notifications

«КАК» - настройка проекта

Первое, что нужно сделать, это создать файл manifest.json. Все расширения должны иметь этот файл, чтобы сообщить браузеру Chrome всю основную информацию о вашем расширении.

Ключевые поля, на которых нужно сосредоточиться, - это browser_action, permissions и background.

Наш файл popup.html simple включает в себя базовое содержимое пользовательского интерфейса, такое как правило 20–20–20, которое пользователь может просматривать при нажатии на значок, и некоторые ссылки на социальные сети.

Когда файл manifest.json готов, нам действительно нужно сосредоточиться на концепциях, которые происходят под капотом, который реализован в нашем background.js, это простая концепция, позволяющая заставить хромированные API работать в соответствии с необходимым результатом. .

Во-первых, необходимо создать объект параметров, который будет принимать информацию, которую нам нужно создать при отображении нашего Chrome-уведомления (что-то вроде схемы).

Затем создайте функцию chrome.notifications.create, которая принимает объект параметров в качестве аргумента. Оберните функцию chrome.notifications.create функцией JavaScript setInterval с указанием времени отображения 20 минут, переданного в качестве второго аргумента (в миллисекундах), это будет отображать наше уведомление каждые 20 минут.

Последним шагом в background.js является создание события щелчка для нашего уведомления, это событие щелчка вызывает функцию chrome.tabs.create, которая перенесет вас на новую вкладку в Chrome, которая проведет вас через процесс упражнения. (очень просто).

Как видите, на странице упражнения.html работает таймер обратного отсчета, а также инструкция для пользователя по выполнению упражнения. Когда время остановится и изменится на «Exercise Complete», ваше упражнение будет завершено, и вы сможете закрыть вкладку и снова получить уведомление в следующие 20 минут от расширения.

На этом я завершаю простые шаги, необходимые для создания расширения для Chrome, и это действительно помогает мне.

Вы можете проверить его в интернет-магазине Chrome, а также установить, если хотите увидеть его в действии, я буду очень признателен за обзор и отзывы. Https://chrome.google.com/webstore/detail/blink-alert/ecdcckdocbdegecfpmdgblfaiaplggob?hl=en-US

Вы также можете проверить исходный код на github https://github.com/obayomi96/blinkalert

Если вам нравится создавать собственное расширение и делать с ним много удивительных вещей, вы можете обратиться к API-интерфейсам расширения Chrome https://developer.chrome.com/extensions/api_index

Я открыт для вопросов и других комментариев, которые могут у вас возникнуть.

Спасибо за чтение, ура !.