All audio tabs playing started

home.html

@@ -130,6 +130,12 @@ <h1 class="text-white text-center text-xl ">Not in Production Yet.</hi>
         </div> 
     -->
 
+    <div class="text-white text-center " id="tabList">
+
+      <p>test 1</p>
+      <!--<p>test 2</p>-->
+
+    </div>
 
     <!-- Suggestion Box -->
     <!--<div class="w-full mb-1 mt-11" id="removeElement" style="display: none;">-->
@@ -154,6 +160,8 @@ <h4 class="text-lg flex-1 text-indigo-400 update"><b>Suggestions?</b></h4>
         </div>
     </div>
 
+
+
 </body>
 
 

src/css/output.css

@@ -617,6 +617,10 @@ video {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-1 {
   height: 0.25rem;
 }

src/js/popup.js

@@ -27,6 +27,24 @@ document.addEventListener('DOMContentLoaded', async () => {
     let tabMutedAllButton = document.getElementById("signalToggleMuteAllButton");
     let tabUnmuteAllIcon = document.getElementById("tabUnmuteAllIcon");
     let tabUnmutedAllButton = document.getElementById("signalToggleUnmuteAllButton");
+    let tabList = document.getElementById("tabList");
+
+    // Update UI to list the 4 tabs that are currently playing audio
+   function updateUITabList(tabs) {
+    if (tabs.length === 0 ) {
+        tabList.hidden = true;
+        return;
+    }
+    tabList.hidden = false;
+    for (let tab of tabs) {
+        let el = document.createElement('p');
+        el.textContent = tab;
+        tabList.append(el);
+    }
+
+   }
+
+
 
     // Sender
     function sendMessagePromise(message) {
@@ -53,6 +71,24 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     }
 
+    async function getTabDataFromReceiver() {
+        try {
+            const response = await sendMessagePromise({type: "get-tabs"});
+            console.log("Received response:", response);
+            if (response && response.data) {
+                processData(response.data);
+            }
+        } catch (error) {
+            console.error("Error:", error);
+        }
+    }
+
+    function processTabsData(tabs){
+      for (let tab of tabs) {
+        console.log("!!Tab: ", tab);
+      }
+    }
+
     function processData(data) {
         console.log("Processing data tabid: ", data);
         return data