progress

src/client/index.css

@@ -0,0 +1,18 @@
+.ora--wrapper {
+  display: none;
+  position: fixed;
+  color: #111;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #eee;
+  z-index: 999999999;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ora--wrapper {
+    background-color: #000000;
+    color: #eee;
+  }
+}

src/client/index.js

@@ -1,20 +1,10 @@
 import browser from 'webextension-polyfill'
 
 let wrapper
+let lastReported = 0
 
 function init() {
   wrapper = window.document.createElement('div')
-  Object.assign(wrapper.style, {
-    display: 'none',
-    position: 'fixed',
-    color: '#000',
-    top: '0',
-    left: '0',
-    width: '100vw',
-    height: '100vh',
-    backgroundColor: '#ffffff',
-    zIndex: '999999999',
-  })
   wrapper.classList.add('ora--wrapper')
   wrapper.classList.add('hidden')
 
@@ -35,10 +25,27 @@ function init() {
 
 async function check() {
   if (window.document.hidden) return
-  const isBlocked = await browser.runtime.sendMessage(window.location.host)
+  const isBlocked = await browser.runtime.sendMessage({
+    type: 'check',
+    host: window.location.host,
+  })
   wrapper.style.display = isBlocked ? 'initial' : 'none'
 }
 
 init()
-setInterval(check, 2000)
 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)