Initial app

popup.js

@@ -0,0 +1,110 @@
+let startTime = 0;
+let endTime = 0;
+let messagesCount = 0;
+let showMessages = false;
+
+async function init() {
+  const data = await chrome.storage.local.get(['startTime', 'endTime']);
+  if (data?.endTime > 0) {
+    startTime = data.startTime;
+    endTime = data.endTime;
+    document.getElementById('reset-button').style.display = 'block';
+  } else if (data?.startTime > 0) {
+    startTime = data.startTime;
+    document.getElementById('start-button').style.display = 'none';
+    document.getElementById('end-button').style.display = 'block';
+  }
+  const startButton = document.getElementById('start-button');
+  startButton.onclick = startContest; 
+  const endButton = document.getElementById('end-button');
+  endButton.onclick = endContest; 
+  const resetButton = document.getElementById('reset-button');
+  resetButton.onclick = resetData; 
+  const messagesButton = document.getElementById('messages-button');
+  messagesButton.onclick = switchMessages; 
+  update();
+}
+
+async function fetchMessages() {
+  const data = await chrome.storage.local.get('messages');
+  if (data.messages && data.messages.length > messagesCount) {
+    const messagesEl = document.getElementById('messages');
+    let html = messagesEl.innerHTML;
+    for (let i = messagesCount; i < data.messages.length; i++) {
+      const {displayTime, completionTime, name, text} = data.messages[i];
+      html += `<div message><span time>${displayTime}</span><span name>${name}</span><span text>${text}</span></div>`
+    }
+    messagesEl.innerHTML = html;
+    messagesCount = data.messages.length;
+  }
+}
+
+function sendMessage(message, callback) {
+  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+    tabs.forEach(tab => chrome.tabs.sendMessage(tab.id, message, callback));
+  });
+}
+
+function startContest() {
+  startTime = Date.now();
+  endTime = 0;
+  chrome.storage.local.set({ startTime: startTime, endTime: 0, messages: [] });
+  document.getElementById('start-button').style.display = 'none';
+  document.getElementById('end-button').style.display = 'block';
+  document.getElementById('reset-button').style.display = 'none';
+  document.getElementById('messages').innerHTML = '';
+  if (showMessages) switchMessages();
+}
+
+function endContest() {
+  endTime = Date.now();
+  chrome.storage.local.set({ endTime: endTime });
+  document.getElementById('start-button').style.display = 'block';
+  document.getElementById('end-button').style.display = 'none';
+  document.getElementById('reset-button').style.display = 'block';
+}
+
+function resetData() {
+  chrome.storage.local.set({ startTime: 0, endTime: 0, messages: [] });
+  startTime = 0;
+  endTime = 0;
+  document.getElementById('time').innerHTML = '0:00:00';
+  document.getElementById('reset-button').style.display = 'none';
+  document.getElementById('messages').innerHTML = '';
+  if (showMessages) switchMessages();
+}
+
+function switchMessages() {
+  const messagesEl = document.getElementById('messages');
+  const messagesButtonEl = document.getElementById('messages-button');
+  if (showMessages) {
+    messagesEl.style.display = 'none';
+    messagesButtonEl.innerHTML = 'show messages';
+  } else {
+    messagesEl.style.display = 'block';
+    messagesButtonEl.innerHTML = 'hide messages';
+  }
+  showMessages = !showMessages;
+}
+
+function dis(n) {
+  if (n < 10) return "0" + n;
+  return n.toString();
+}
+
+function update() {
+  // Update the display time in the popup.
+  let displayTime = '0:00:00';
+  if (startTime != 0) {
+    let rawTime = Math.floor((Date.now() - startTime) / 1000);
+    if (endTime > 0) rawTime = Math.floor((endTime - startTime) / 1000);
+    displayTime = `${Math.floor(rawTime / 3600)}:${dis(Math.floor((rawTime % 3600) / 60))}:${dis(rawTime % 60)}`;
+  }
+  document.getElementById('time').innerHTML = displayTime;
+  setTimeout(update, 1000);
+
+  // Fetch and save new messages.
+  fetchMessages();
+}
+
+setTimeout(init, 20);