Get best of the week

Writing a chrome telegram alert plugin



The trouble, comrades!

Children (~ 10 years old) switched to distance learning, sat in rooms with computers and can not concentrate on lessons!

They are added to google families , microsoft family , time at the computer is limited, and adult sites are removed through opendns . But just that - and even right during the zoom conference of the lesson, the child begins to watch youtube. And then the teacher gives homework - to watch the video and write an essay. And the video is also on youtube. Manual moderation is indispensable.

Under the cat, we write a magic pendal, namely a chrome plugin, which sends every website that is opened in telegram to an evil parent working in the next room.

Bot


First we’ll make a telegram bot and a channel to which links will come.

  1. Open BotFather , write / newbot , get botId (a combination of ~ 50 characters).
  2. We create a new channel, add our bot there as an administrator.
  3. We write something to the channel, open the link https://api.telegram.org/bot botId / getUpdates , we find result-> channel_post-> chat-> id there.

As a result, we have botId and chatId .

Plugin


  1. We make the folder, there will be 2 files in it - manifest.json and index.js.
  2. Create a chrome plugin manifest , to minimize this:

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

    It says here that the index.js script will be embedded on any page (matches: all urls).
  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 minutes have been spent, now you can spend another 20 hours, write a backend, configure reception of incoming commands (/ mute url, / mute 2h url etc), add registration, paid monthly subscriptions, slack and hangouts bots, and then rake for any rights children and personal data. I leave these pleasures to the reader, I have everything.

More articles:


All Articles