Get best of the week

Écrire un plugin d'alerte de télégramme chrome



Le problème, camarades!

Les enfants (~ 10 ans) sont passés à l'enseignement à distance, assis dans des chambres avec des ordinateurs et ne peuvent pas se concentrer sur les cours!

Ils sont ajoutés aux familles Google , à la famille Microsoft , le temps passé devant l'ordinateur est limité et les sites pour adultes sont supprimés via opendns . Mais juste cela - et même pendant la conférence de zoom de la leçon, l'enfant commence à regarder YouTube. Et puis l'enseignant fait ses devoirs - pour regarder la vidéo et écrire un essai. Et la vidéo est également sur YouTube. La modération manuelle est indispensable.

Sous le chat, nous écrivons un pendule magique, à savoir un plugin chromé, qui envoie chaque site Web ouvert par télégramme à un parent maléfique travaillant dans la pièce voisine.

Bot


Nous allons d'abord créer un bot de télégramme et une chaîne vers laquelle des liens seront établis.

  1. Ouvrez BotFather , écrivez / newbot , obtenez botId (une combinaison de ~ 50 caractères).
  2. Nous créons une nouvelle chaîne, y ajoutons notre bot en tant qu'administrateur.
  3. Nous écrivons quelque chose sur la chaîne, ouvrons le lien https://api.telegram.org/bot botId / getUpdates , nous y trouvons result-> channel_post-> chat-> id.

En conséquence, nous avons botId et chatId .

Brancher


  1. Nous créons le dossier, il y aura 2 fichiers - manifest.json et index.js.
  2. Créez un manifeste de plugin Chrome , pour minimiser cela:

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

    Il indique ici que le script index.js sera intégré à n'importe quelle page (correspond à: toutes les URL).
  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 ont été consacrées, vous pouvez maintenant passer 20 heures supplémentaires, écrire un backend, configurer la réception des commandes entrantes (/ url muette, / url muette 2h, etc.), ajouter l'enregistrement, les abonnements mensuels payés, les robots slack et hangouts, puis ratisser pour tous les droits les enfants et les données personnelles. Je laisse ces plaisirs au lecteur, j'ai tout.

More articles:


All Articles