3 шага для реализации простого расширения Chrome для блокировки социальных сетей
Несколько дней назад я начал читать прекрасную книгу Кэла Ньюпорта Deep Work. В этой книге автор сравнивает глубокую работу с поверхностной работой.
И, к сожалению, я должен признать, что, даже не осознавая этого, большую часть своего дня я выполнял поверхностную работу.
Как инженер-программист, работающий полностью удаленно уже около 2 лет, я думал, что эти условия работы предоставят мне больше гибкости, больше времени для личных дел, что в конечном итоге окажет положительное влияние на мою производительность и так далее. Но, и вот к чему я постепенно прихожу, я начал отвлекаться на свой телефон, лежащий рядом со мной на моем столе, на какие-то уведомления, на рекомендованные интервью на Youtube или подкасты — мне это очень нравится — это переключали мой разум с одного занятия на другое и плохо влияли на мою работу. В конце концов, я так и не смог погрузиться в глубокую работу, но большую часть дня проводил за поверхностной работой.
Поэтому меня интересовали способы повышения продуктивности и некоторые стратегии тайм-менеджмента. В этой статье я поделюсь с вами пошаговым руководством по созданию собственного расширения для блокировки социальных сетей для Chrome, чтобы устранить (некоторые) отвлекающие факторы.
Давайте погрузимся в это вместе!
Что такое расширение Chrome?
Расширение Chrome — это программа, расширяющая функциональные возможности веб-браузера Google Chrome. Он позволяет пользователям настраивать и улучшать работу в Интернете, добавляя новые функции, изменяя существующие и интегрируясь с другими онлайн-сервисами.
Расширения Chrome разрабатываются с использованием таких веб-технологий, как HTML, CSS и JavaScript.
В манифесте версии 3 есть два ключевых файла, которые нам нужно отредактировать:
manifest.json
: Это основной файл, определяющий конфигурацию расширения, включая его имя, версию и разрешения.service_worker.js
: Этот файл содержит код, который работает в фоновом режиме расширения, даже когда пользователь не использует его активно.
ПРИМЕЧАНИЕ. Большинство расширений Chrome совместимы с Firefox, Edge, Brave…
Настройте manifest.json
Для начала вам нужно будет создать файл метаданных с именем manifest.json
, записанный в формате JSON. Этот файл содержит важные сведения, такие как имя вашего расширения, его описание, номер версии и многое другое. Через этот файл мы информируем Chrome о функциональности расширения и необходимых разрешениях, необходимых для его работы.
{ "name": "My Productivity Assistant", "version": "0.1", "manifest_version": 3, "description": "Get focus !", "background": { "service_worker": "service_worker.js" }, "permissions": [ "declarativeNetRequest", "declarativeNetRequestWithHostAccess" ], "host_permissions": ["<all_urls>"] }
Мы регистрируем наш service_worker.js
, который будет содержать нашу логику перенаправления, а также сообщаем пользователю, что нам потребуется разрешение на доступ к declarativeNetRequest — API, который мы будем использовать для блокировки/перенаправления URL-адресов —для ‹all_urls ›
Все еще там ? Отлично, давайте перейдем к следующему шагу!
Настройте правила для блокировки веб-сайтов
Выше мы упомянули файл service_worker.js
, этот последний будет выполнен, как только ваше расширение будет включено, и именно его мы и рассмотрим!
Чтобы сделать наше расширение более приятным, вместо того, чтобы просто блокировать страницу, мы будем перенаправлять на одну пользовательскую страницу, которую создадим на последнем шаге.
- Создайте новый файл
service_worker.js
- Давайте добавим веб-сайты, которые мы хотим заблокировать:
/** Add here the websites you want to block */ websiteListToBlock = ["||youtube.com", "||facebook.com"]
- Из этого списка мы генерируем правила:
/** * Generate the rules from the websites selected */ function generateRulesFromWebsiteList() { return websiteToBlock.map((website, index) => { return { id: index + 1, priority: 1, action: { type: "redirect", // This custom html page will be defined in the below section redirect: { url: chrome.runtime.getURL("default_page.html") }, }, condition: { urlFilter: website, resourceTypes: ["main_frame"], } } }) }
- Наконец, мы динамически включаем эти правила:
/** * Activates the rules for the above websites selected */ function activateRules() { rules = generateRulesFromWebsiteList(); chrome.declarativeNetRequest.updateDynamicRules( { addRules: rules, removeRuleIds: rules.map((value) => value.id), }, () => { console.log(`Rule(s) added`); } ); } // This function will be called automatically in background activateRules();
Отличная работа ! Наши manifest.json
и service_worker.js
готовы! Теперь нам просто нужно создать нашу пользовательскую HTML-страницу default_page.html
!
Настройка перенаправленной страницы
Давайте теперь создадим нашу страницу, на которую мы будем перенаправлены, если у вас возникнет соблазн перейти на один из ваших заблокированных веб-сайтов…
- Создайте новый файл
default_page.html
- Вот пустой HTML-шаблон для начала:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- Put here your HTML content --> </body> </html>
Теперь я позволяю вам положиться на свое творчество, чтобы создать нужный вам HTML-код, который будет мотивировать вас вернуться к работе!
Псс, если хотите, вот код сdefault_page.html
примером, который я взял с Youtube-канала PedroTech : https://github.com/EricDallAgnol/blocker_chrome_extension
Загрузите расширение в браузере
Наше расширение готово к использованию!
- Перейдите на страницу расширений вашего браузера — для Chrome это
chrome://extensions/
- Проверил режим разработчика
- Загрузить распакованное расширение
- Выберите папку, содержащую все файлы, реализованные
- Зарегистрировал слайдер, и вот мы здесь!
- Зайдите на youtube.com и посмотрите результат
Спасибо за ваше время и удачных сеансов Deep Work!
Полный код: https://github.com/EricDallAgnol/blocker_chrome_extension