Merge pull request #29 from vivek-nexus/v2.3.1

v2.3.1

Author: vivek-nexus

README.md

@@ -3,7 +3,7 @@ Simple Google Meet transcripts. Private and open source.
 
 ![marquee-large](/assets/marquee-large.png)
 
-Extension status: 🟢 OPERATIONAL (v2.3.0)
+Extension status: 🟢 OPERATIONAL (v2.3.1)
 
 <br />
 <br />

extension/background.js

@@ -35,22 +35,24 @@ chrome.tabs.onRemoved.addListener(function (tabid) {
 
 function downloadTranscript() {
     chrome.storage.local.get(["userName", "transcript", "chatMessages", "meetingTitle", "meetingStartTimeStamp"], function (result) {
-        if (result.userName && result.transcript && result.chatMessages) {
+        if (result.userName && (result.transcript.length > 0 || result.chatMessages.length > 0)) {
             // Create file name if values or provided, use default otherwise
             const fileName = result.meetingTitle && result.meetingStartTimeStamp ? `TranscripTonic/Transcript-${result.meetingTitle} at ${result.meetingStartTimeStamp}.txt` : `TranscripTonic/Transcript.txt`
 
             // Create an array to store lines of the text file
             const lines = []
 
-            // Iterate through the transcript array and format each entry
-            result.transcript.forEach(entry => {
-                lines.push(`${entry.personName} (${entry.timeStamp})`)
-                lines.push(entry.personTranscript)
-                // Add an empty line between entries
+            if (result.transcript.length > 0) {
+                // Iterate through the transcript array and format each entry
+                result.transcript.forEach(entry => {
+                    lines.push(`${entry.personName} (${entry.timeStamp})`)
+                    lines.push(entry.personTranscript)
+                    // Add an empty line between entries
+                    lines.push("")
+                })
                 lines.push("")
-            })
-            lines.push("")
-            lines.push("")
+                lines.push("")
+            }
 
             if (result.chatMessages.length > 0) {
                 // Iterate through the chat messages array and format each entry

extension/content.js

@@ -20,6 +20,7 @@ overWriteChromeStorage(["userName"], false)
 // Transcript array that holds one or more transcript blocks
 // Each transcript block (object) has personName, timeStamp and transcriptText key value pairs
 let transcript = []
+overWriteChromeStorage(["transcript"], false)
 // Buffer variables to dump values, which get pushed to transcript array as transcript blocks, at defined conditions
 let personNameBuffer = "", transcriptTextBuffer = "", timeStampBuffer = undefined
 // Buffer variables for deciding when to push a transcript block
@@ -162,7 +163,7 @@ function meetingRoutines(uiType) {
       const transcriptTargetNode = document.querySelector('.a4cQT')
       // Attempt to dim down the transcript
       try {
-        transcriptTargetNode.childNodes[1].style.opacity = 0.2
+        transcriptTargetNode.childNodes[1].setAttribute("style", "opacity:0.2")
       } catch (error) {
         console.error(error)
       }
@@ -183,7 +184,7 @@ function meetingRoutines(uiType) {
         chatMessagesButton.click()
         // CRITICAL DOM DEPENDENCY. Grab the chat messages element. This element is present, irrespective of chat ON/OFF, once it appears for this first time.
         try {
-          const chatMessagesTargetNode = document.querySelectorAll('div[aria-live="polite"]')[0]
+          const chatMessagesTargetNode = document.querySelector('div[aria-live="polite"].Ge9Kpc')
 
           // Create chat messages observer instance linked to the callback function. Registered irrespective of operation mode.
           chatMessagesObserver = new MutationObserver(chatMessagesRecorder)
@@ -193,7 +194,7 @@ function meetingRoutines(uiType) {
           console.error(error)
           showNotification(extensionStatusJSON_bug)
         }
-      }, 500)
+      }, 1000)
 
       // Show confirmation message from extensionStatusJSON, once observation has started, based on operation mode
       chrome.storage.sync.get(["operationMode"], function (result) {
@@ -389,7 +390,7 @@ function chatMessagesRecorder(mutationsList, observer) {
   mutationsList.forEach(mutation => {
     try {
       // CRITICAL DOM DEPENDENCY. Get all people in the transcript
-      const chatMessagesElement = document.querySelectorAll('div[aria-live="polite"]')[0]
+      const chatMessagesElement = document.querySelector('div[aria-live="polite"].Ge9Kpc')
       // Attempt to parse messages only if at least one message exists
       if (chatMessagesElement.children.length > 0) {
         // CRITICAL DOM DEPENDENCY. Get the last message that was sent/received.
@@ -461,11 +462,9 @@ function overWriteChromeStorage(keys, sendDownloadMessage) {
   chrome.storage.local.set(objectToSave, function () {
     if (sendDownloadMessage) {
       // Download only if any transcript is present, irrespective of chat messages
-      if (transcript.length > 0) {
-        chrome.runtime.sendMessage({ type: "download" }, function (response) {
-          console.log(response);
-        })
-      }
+      chrome.runtime.sendMessage({ type: "download" }, function (response) {
+        console.log(response);
+      })
     }
   })
 }

extension/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "TranscripTonic",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "manifest_version": 3,
   "description": "Simple Google Meet transcripts. Private and open source.",
   "action": {

extension/popup.html

@@ -8,7 +8,7 @@
     @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
 
     body {
-      width: 640px;
+      width: 520px;
       padding: 3rem;
       background: #071f29;
       color: #2A9ACA;
@@ -19,12 +19,12 @@
       background-size: cover;
     }
 
-    hr {
-      border-color: #2A9ACA;
+    h1 {
+      font-size: 2rem;
     }
 
     .get-started {
-      padding: 0.5rem 1rem;
+      padding: 1rem;
       background-color: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(4px);
       border-radius: 8px;
@@ -45,9 +45,22 @@
       border-radius: 96px;
     }
 
+    .radio-item {
+      display: flex;
+      gap: 0.5rem;
+      align-items: start;
+      margin-bottom: 2rem;
+    }
+
+    .sub-text {
+      font-size: 1rem;
+    }
+
     input {
+      margin-top: 0.5rem;
       accent-color: #2A9ACA;
       width: 18px;
+      height: 18px;
     }
 
     label {
@@ -69,7 +82,7 @@
   <div>
     <div style="margin-bottom: 2rem;">
       <div style="display: flex; gap: 1rem; align-items: center;">
-        <img src="./icon.png" width="48px" height="48px" alt="" />
+        <img src="./icon.png" width="48px" height="48px" alt="Extension icon" />
         <div>
           <h1 style="margin: 0px;">TranscripTonic</h1>
           <p style="margin: 0px;">
@@ -79,30 +92,31 @@ <h1 style="margin: 0px;">TranscripTonic</h1>
       </div>
     </div>
 
-    <hr style="margin-bottom: 2rem;" />
 
-    <div style="display: flex; gap: 0.25rem;">
-      <input type="radio" name="mode" id="auto-mode" />
-      <label><b>Auto</b> (records transcripts for all meetings)</label>
-    </div>
-    <div style="margin-bottom: 2rem; display: flex; gap: 0.25rem;">
-      <input type="radio" name="mode" id="manual-mode" />
-      <label><b>Manual</b> (switch on transcript as needed) </label>
-    </div>
     <div class="get-started">
-      <h2>How to use TranscripTonic?</h2>
-      <p>In both modes, transcript will be automatically downloaded as a text file at the end of each meeting. <b>Avoid
-          closing the meeting tab.</b></p>
-      <ul>
-        <li><b>Auto mode:</b> Automatically records transcripts for all meetings</li>
-        <li><b>Manual mode:</b> Switch on TranscripTonic by clicking on captions icon in Google Meet (CC icon)</li>
-      </ul>
+      <div class="radio-item">
+        <input type="radio" name="mode" id="auto-mode" />
+        <label for="auto-mode"><b>Auto mode</b>
+          <br /><span class="sub-text">Records transcripts for all
+            meetings</span>
+        </label>
+      </div>
+      <div class="radio-item">
+        <input type="radio" name="mode" id="manual-mode" />
+        <label for="manual-mode"><b>Manual mode</b> <br />
+          <span class="sub-text">Switch on transcript as needed using the CC icon in
+            Google Meet</span>
+        </label>
+      </div>
+      <p style="margin-bottom: 0rem;">In both modes, transcript will be downloaded as a text file at the end
+        of each meeting.</p>
     </div>
+
     <div>
       <div style="margin-bottom: 2.75rem">
         <a href="" id="last-meeting-transcript">Download last meeting transcript</a>
         &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp;
-        <a href="https://github.com/vivek-nexus/transcriptonic#readme" target="_blank">Get more help</a>
+        <a href="https://github.com/vivek-nexus/transcriptonic#readme" target="_blank">Get help</a>
         &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp;
         <a href="https://github.com/vivek-nexus/transcriptonic/issues" target="_blank">Report a bug</a>
       </div>