Don't display and save completion times when data is reset

scripts/content.js

@@ -38,21 +38,33 @@ function checkNewMessages() {
 
   // Check in-call messages.
   const messageElements = document.querySelectorAll("div[data-message-id] div[jscontroller]");
+  let newElements = false;
   for (let e of messageElements) {
     if (seenMessages.has(e)) continue;
+    newElements = true;
     seenMessages.add(e);
     let completionTime = Math.floor((Date.now() - startTime) / 1000);
 
     // If awaiting times are available, use them first (i.e. the messages section just got opened).
     if (awaitingTimes.length) completionTime = awaitingTimes.shift();
+
     const messageNode = e.parentNode.parentNode.parentNode.parentNode;
     const rootNode = messageNode.parentNode.parentNode;
     const name = rootNode.firstChild.firstChild.innerHTML;
     const dTime = displayTime(completionTime);
-    messages.push({completionTime: completionTime, name: name, text: e.innerHTML, displayTime: dTime});
+    if (startTime > 0) {
-    e.innerHTML = `<span style="color: red; margin-right: 5px;">${dTime}</span>${e.innerHTML}`
+      messages.push({completionTime: completionTime, name: name, text: e.innerHTML, displayTime: dTime});
+    
+      // Set timeout for rendering the completion time, required to avoid weird stuff.
+      setTimeout(() => {
+        e.innerHTML = `(<span style="color: red;">${dTime}</span>) ${e.innerHTML}`;
+      }, 20);
+    }
+  }
+  
+  if (newElements) {
+    chrome.storage.local.set({ messages: messages });
   }
-  chrome.storage.local.set({ messages: messages });
 
   // If awaiting messages are still present, but the messages section is opened with no new messages,
   // delete all awaiting messages (that should never happen though, there was an error somewhere).