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