Fix Volumio startup and online updates

toggle-ext/bg.js

@@ -1,16 +1,45 @@
-// Aktiviert den bestehenden Tab mit Ziel-URL (ohne Reload). Falls nicht offen, wird er geöffnet.
+const ANALYZER_URL = 'http://localhost:8088/';
+const VOLUMIO_URL = 'http://localhost:3000/';
+
+function matchingTabs(tabs, url) {
+  return tabs.filter(tab => tab.url && tab.url.startsWith(url));
+}
+
+// Keep one Analyzer and one Volumio tab. Chromium starts on Analyzer, so
+// Volumio can load in the background without delaying the first visible UI.
+function ensureDualTabs() {
+  chrome.tabs.query({ currentWindow: true }, tabs => {
+    const analyzerTabs = matchingTabs(tabs, ANALYZER_URL);
+    const volumioTabs = matchingTabs(tabs, VOLUMIO_URL);
+    const duplicates = [...analyzerTabs.slice(1), ...volumioTabs.slice(1)]
+      .map(tab => tab.id)
+      .filter(id => Number.isInteger(id));
+
+    if (duplicates.length > 0) chrome.tabs.remove(duplicates);
+    if (analyzerTabs.length === 0) chrome.tabs.create({ url: ANALYZER_URL, active: true });
+    if (volumioTabs.length === 0) chrome.tabs.create({ url: VOLUMIO_URL, active: false });
+  });
+}
+
+// Activate an existing application tab without reloading it.
 function activateOrCreate(url) {
-  chrome.tabs.query({}, tabs => {
-    const t = tabs.find(tt => tt.url && tt.url.startsWith(url));
-    if (t) { chrome.tabs.update(t.id, {active: true}); }
-    else   { chrome.tabs.create({url}); }
+  chrome.tabs.query({ currentWindow: true }, tabs => {
+    const tab = matchingTabs(tabs, url)[0];
+    if (tab) chrome.tabs.update(tab.id, { active: true });
+    else chrome.tabs.create({ url, active: true });
   });
 }
 
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
-  if (msg && msg.cmd === 'toggle') {
-    if (msg.from === 'volumio') activateOrCreate('http://localhost:8088/');
-    else                        activateOrCreate('http://localhost:3000/');
-    sendResponse({ok:true});
+  if (!msg) return;
+  if (msg.cmd === 'bootstrap') {
+    ensureDualTabs();
+    sendResponse({ ok: true });
+    return;
+  }
+  if (msg.cmd === 'toggle') {
+    if (msg.from === 'volumio') activateOrCreate(ANALYZER_URL);
+    else activateOrCreate(VOLUMIO_URL);
+    sendResponse({ ok: true });
   }
 });

toggle-ext/content.js

@@ -1 +1,40 @@
-(function(){try{const e="3000"===location.port,t=document.createElement("button");function o(){chrome.runtime.sendMessage({cmd:"toggle",from:e?"volumio":"analyzer"},(()=>{}))}t.textContent=e?"Analyzer":"Volumio",Object.assign(t.style,{position:"fixed",right:"10px",top:"10px",zIndex:999999,font:"bold 14px ui-monospace,monospace",padding:"6px 10px",background:"#0b0b12",color:"#ddd",border:"1px solid #333",borderRadius:"8px",cursor:"pointer",opacity:"0.85"}),t.onmouseenter=()=>t.style.opacity="1",t.onmouseleave=()=>t.style.opacity="0.85",t.onclick=o,document.body.appendChild(t),window.addEventListener("keydown",(t=>{"t"===t.key.toLowerCase()&&(t.preventDefault(),o())}),{capture:!0})}catch(e){}})();
+(function () {
+  try {
+    const isVolumio = location.port === '3000';
+    const button = document.createElement('button');
+    const toggle = () => {
+      chrome.runtime.sendMessage(
+        { cmd: 'toggle', from: isVolumio ? 'volumio' : 'analyzer' },
+        () => {},
+      );
+    };
+
+    chrome.runtime.sendMessage({ cmd: 'bootstrap' }, () => {});
+
+    button.textContent = isVolumio ? 'Analyzer' : 'Volumio';
+    Object.assign(button.style, {
+      position: 'fixed',
+      right: '10px',
+      top: '10px',
+      zIndex: 999999,
+      font: 'bold 14px ui-monospace,monospace',
+      padding: '6px 10px',
+      background: '#0b0b12',
+      color: '#ddd',
+      border: '1px solid #333',
+      borderRadius: '8px',
+      cursor: 'pointer',
+      opacity: '0.85',
+    });
+    button.onmouseenter = () => { button.style.opacity = '1'; };
+    button.onmouseleave = () => { button.style.opacity = '0.85'; };
+    button.onclick = toggle;
+    document.body.appendChild(button);
+    window.addEventListener('keydown', event => {
+      if (event.key.toLowerCase() === 't') {
+        event.preventDefault();
+        toggle();
+      }
+    }, { capture: true });
+  } catch (_) {}
+})();