Автор оригинала: Martins Obayomi.
Я заметил, что иногда у меня есть напряженные или водянистые глаза после работы на моем компьютере в течение нескольких часов, и иногда это больно.
Люди, которые часто работают с экраном компьютера, могут повредить продуктивность их прицеливания в долгосрочной перспективе, и это связано с воздействием глаз на ультрафиолетовые лучи, которые проецируются с экранов.
“ЗАЧЕМ”
УФ-лучи могут повредить вашему центральному видению, и он может повредить макулярную, часть сетчатки на задней части глаза.
УФ-б лучами поглощаются передней частью вашего глаза (роговица и объектив) поглощает большинство лучей UV-B, но эти лучи могут привести к еще большему повреждению ваших глаз, чем ультрафиолетовые лучи.
Ультрафиолетовые лучи также приводят к другим заболеваниям глаз, такие как дегенерация желтого цвета, катаракта, птегий, ожоги роговицы и даже рак кожи.
После того, как мне осознал все это, я был убрал, поэтому я начал смотреть на решения о том, как эти проблемы могут быть предотвращены или, по крайней мере, это возможно, поскольку компьютеры в основном я работаю в моей повседневной жизни как разработчик и для моей повседневной жизни Многие люди там, как я, который часто использует компьютеры.
Противокаченые фильтровальные очки работают, но не на 100%, затем я читаю на правиле 20-20-20, который был популярен доктором Джеффом Аншельком, специалистом по «эргономике видения». Идея состояла в том, чтобы заглянуть от вашего экрана каждые 20 минут быть перед компьютером, посмотрите на что-то в 20 футах на 20 секунд, он также помогает мигать столько раз, сколько вы можете во время упражнений.
Это было, когда эта блестящая идея пришла ко мне о написании программы, которая может помочь напомнить мне, чтобы принять это упражнение каждые 20 минут, а также ведущим мне всю процедуру упражнений.
Я построил это расширение Chrome с помощью Vanilla JavaScript и API-уведомлений Chrome API https://developer.chrome.com/apps/notifications
«Как» настроек
Первое, что нужно сделать, это создать maineest.json file. Все расширения должны иметь этот файл для информирования Chrome браузера всей базовой информации, которой необходимо знать о вашем расширении.
{
"manifest_version": 2,
"name": "Blink Alert",
"description": "A reminder for a computer user to take the 20-20-20 blinking exercise every 20 minutes",
"version": "1.0.0",
"icons": {
"19": "images/eyeIcon.png",
"128": "images/eyeIcon_128.png"
},
"browser_action": {
"default_icon": "images/eyeIcon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [
"js/background.js"
]
},
"permissions": [
"tabs",
"activeTab",
"notifications"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Основные поля для фокусировки на Browser_action, разрешения и фона.
Наш файл POPUP.HTML Simple включает в себя базовое содержимое пользовательского интерфейса, такое как правило 20-20-20 для пользователя для просмотра, когда значок нажат, а некоторые ссылки на социальные сети.
// // Chrome notification API
const options = {
type: "basic",
title: "Blink Alert! - Its been 20 minutes!",
message:
"Look Away From Your Computer, Look at something 20 feets away for 20 seconds. (CLICK HERE TO TAKE EXERCISE)",
iconUrl: "images/eyeIcon_128.png"
};
// Create notifications every 20 minutes 1200000 millisecons
setInterval(function() {
chrome.notifications.create(options)
}, 1200000);
// Create a new tab onclick of notification
chrome.notifications.onClicked.addListener(function() {
chrome.tabs.create({url: "exercise.html"});
});
С помощью Mainesest.json файл готов, что нам действительно нужно сосредоточиться на том, являются концепции, которые происходят под капотом, который реализован на нашем фоне .j, это простой концепция, чтобы сделать работу API Chrome в соответствии с результатом Отказ
Во-первых, необходимо создать объект параметров для получения информации, необходимой для создания, когда отображается наше уведомление Chrome (вроде как схема).
Затем создайте функцию Chrome.Notifications.create, которая вынимает объект параметров в качестве аргумента. Оберните Chrome.Notifications.Create Функция с функцией Setinterval JavaScript с функцией отображения 20 минут, передаваемых в качестве второго аргумента в него (в миллисекундах), это отобразит наше уведомление каждые 20 минут.
Последний шаг на Background.js – создать событие Click для нашего уведомления, этот клик Event вызывает функцию Chrome.tabs.reate, которая приведет вас к новой вкладке в Chrome, которая приводит вас к процессу упражнения. (очень просто).
// 20 minutes countdown timer
function countdown(elementName, minutes, seconds) {
let element, endTime, hours, mins, msLeft, time;
// Make countdown double digits when less that 10
function twoDigits(n) {
return n <= 9 ? "0" + n : n;
}
// Timer counter update
function updateTimer() {
msLeft = endTime - +new Date();
if (msLeft < 1000) {
element.innerHTML = "Exercise Complete";
} else {
time = new Date(msLeft);
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML =
(hours ? "0" + ":" + twoDigits(mins) : mins) +
":" + twoDigits(time.getUTCSeconds());
setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
}
} // updateTimer function end
element = document.getElementById(elementName);
endTime = +new Date() + 1000 * (60 * minutes + seconds) + 500;
updateTimer();
} // countdown function end
countdown("countdown-timer", 0, 20);
Как видите, есть таймер обратного отсчета, работающий на странице «Упражнение». Когда-то время останавливается и изменяется на «упражнение полным» ваше упражнение, и вы можете закрыть вкладку и снова получать уведомления в течение следующих 20 минут по расширению.
Это завершает простые шаги, которые мне нужно было сделать мой хромированный расширение, и это действительно помогает мне.
Вы можете добраться проверить это в The Chrome Web Store, а также установить его, если вы хотели бы увидеть его в действии, я буду очень признателен за обзор и отзыв.
Вы также можете проверить исходный код на Github https://github.com/obayomi96/blinkalert
Если вы будете любить построить расширение своих собственных и делать много удивительных веществ с помощью него, вы можете ссылаться на хромированные усилительные API на https://developer.chrome.com/extensions/api_index
Я открыт для вопросов и других комментариев, которые вы могли бы иметь.
Спасибо за чтение, ура!.