ora/src/client/index.js

import browser from 'webextension-polyfill'

let wrapper
let lastReported = 0

function init() {
  wrapper = window.document.createElement('div')
  wrapper.classList.add('ora--wrapper')
  wrapper.classList.add('hidden')

  const inner = window.document.createElement('div')
  inner.innerHTML = `
    <h1>Overtime ⏱</h1>
    <p>You have no time left on this website 🥺</p>
  `
  wrapper.appendChild(inner)
  window.document.body.appendChild(wrapper)
}

async function check() {
  if (window.document.hidden) return
  const isBlocked = await browser.runtime.sendMessage({
    type: 'check',
    host: window.location.host,
  })
  wrapper.style.display = isBlocked ? 'initial' : 'none'
}

init()
check()
setInterval(check, 2000)

function logActivity() {
  const now = Date.now()
  // Limit reports to once every second
  if (now - lastReported < 1000) return
  lastReported = now
  browser.runtime.sendMessage({
    type: 'report',
  })
}

window.document.addEventListener('mousemove', logActivity, false)
window.document.addEventListener('keydown', logActivity, false)
window.document.addEventListener('scroll', logActivity, false)