Пишем хром плагин оповещения в телеграм

Беда, товарищи!

Дети (~10 лет) перешли на удаленное обучение, расселись по комнатам с компьютерами и не могут сосредоточиться на уроках!

Они добавлены в google families, microsoft family, время за компьютером ограничено, а взрослые сайты убраны через opendns. Но чуть что — и даже прямо во время zoom-конференции урока ребенок начинает смотреть youtube. А потом училка дает домашнее задание — посмотреть видео и написать сочинение. И видео — тоже на youtube. Без ручной модерации не обойтись.

Под катом пишем волшебный пендаль, а именно chrome plugin, который отправляет каждый открываемый сайт в telegram злому родителю, работающему в соседней комнате.

Бот

Сначала сделаем telegram-бота и канал, в который будут приходить ссылки.

1. Открываем BotFather, пишем /newbot, получаем botId (комбинацию из ~50 символов).
2. Создаем новый канал, добавляем нашего бота туда как администратора.
3. Пишем что-нибудь в канал, открываем ссылку https://api.telegram.org/botbotId/getUpdates, находим там result->channel_post->chat->id.

В итоге имеем botId и chatId.

Плагин

1. Делаем папку, в ней будет 2 файла — manifest.json и index.js.
2. Создаем chrome plugin manifest, по минимуму это:
   
   

   {
     "manifest_version": 2,
     "name": "Url Telegram Logger",
     "version": "1.0.0",
     "content_scripts": [
       {
         "matches": [
           "<all_urls>"
         ],
         "js": ["index.js"]
       }
     ]
   }
   

   
   Здесь написано, что на любую страницу (matches: all urls) будет внедряться скрипт index.js.
3. Пишем сам плагин. Так как сайты сейчас часто SPA, будем отслеживать изменение document.location.href. Это можно сделать через MutationObserver. А можно просто проверять по таймауту. Так же будем отправлять сообщение, когда сайт закрывается (жопу пореже от стула отрывать, хулиганье непослушное растет). В последнем случае мы не можем отправлять обычный асинхронный запрос (сайт закрывается, запрос отменяется). Поэтому будем использовать синхронный navigator.sendBeacon:
   
   

   const settings = {
     botId: '...',
     chatId: '...',
     userName: 'Matvey',
     pollingInterval: 10000
   }
   
   const mutedUrls = [
     'https://gmail.com',
     'https://www.eduka.lt',
     // ..все остальное, что всегда можно..
   ]
   
   const sendMessage = (type, href) => {
     if (mutedUrls.find(url => href.startsWith(url))) { return false }
     const data = new FormData()
     data.append('chat_id', settings.chatId)
     data.append('text', `${settings.userName} ${type} ${document.title} ${href}`)
     navigator.sendBeacon(
       `https://api.telegram.org/bot${settings.botId}/sendMessage`, 
       data
     )
   }
   
   let latestHref = null
   let timeout = 0
   
   const run = () => {
     if (window.location.href !== latestHref) {
       latestHref = window.location.href
       sendMessage('opened', latestHref)
     }
     timeout && clearTimeout(timeout)
     timeout = setTimeout(run, settings.pollingInterval)
   }
   
   window.addEventListener('load', run)
   window.addEventListener('unload', () => sendMessage('closed', latestHref))
   

4. Ставим плагин в хром на компьютер жертвы (перейти на chrome://extensions/, включить Developer mode, появится кнопка Load unpacked).

Заключение

20 минут потрачено, теперь можно потратить еще 20 часов, написать бекенд, настроить прием входящих команд (/mute url, /mute 2h url etc), добавить регистрацию, платные ежемесячные подписки, slack и hangouts ботов, а потом огрести за какие-нибудь права детей и персональных данных. Эти удовольствия оставляю читателю, у меня все.