Detect the Extension — Step by Step

<script>
// Who talks to whom
const ADMIN_ORIGIN = 'admin';
const EXT_ORIGIN   = 'extension';

// Pair each request with a unique id and a waiter
let _seq = 0;
const _waiters = new Map();

// Listen for replies coming back from the extension
addEventListener('message', (e) => {
  const d = e.data; 
  if (!d || typeof d !== 'object') return;
  if (d.origin !== EXT_ORIGIN) return;       // ignore anything not from the extension
  if (d.requestId && _waiters.has(d.requestId)) {
    _waiters.get(d.requestId)(d);             // resolve the waiting Promise
    _waiters.delete(d.requestId);
  }
});

// Send a request and wait for the matching reply (or timeout)
function ask(action, args = {}, timeoutMs = 12000){
  const requestId = 'r' + (++_seq);
  postMessage({ origin: ADMIN_ORIGIN, type:'RTO_REQUEST', requestId, action, args }, '*');
  return new Promise((resolve, reject) => {
    const t = setTimeout(() => { 
      _waiters.delete(requestId); 
      reject(Object.assign(new Error('timeout'), { code:'TIMEOUT' })); 
    }, timeoutMs);
    _waiters.set(requestId, (resp) => { clearTimeout(t); resolve(resp); });
  });
}
</script>

<script type="module">
// Tiny UI helpers (status dot + text)
const dotEl = document.getElementById('rto-dot');
const txtEl = document.getElementById('rto-text');
const ui = {
  pending(){ dotEl.style.background = '#999'; txtEl.textContent = 'Checking…'; },
  ok(v){ dotEl.style.background = '#21a65b'; txtEl.textContent = v ? `Extension detected ✅ v${v}` : 'Extension detected ✅'; },
  err(m){ dotEl.style.background = '#c12f2f'; txtEl.textContent = m || 'Not detected ❌'; }
};

// Generate a simple unique id
function makeId(){
  const b = new Uint8Array(16); (crypto||window.crypto||{}).getRandomValues?.(b);
  return [...b].map((x,i)=>(i===6?(x&0x0f)|0x40:i===8?(x&0x3f)|0x80:x).toString(16).padStart(2,'0')).join('');
}

// Try modern + legacy detection, accept whichever answers first
function detectVersion(timeoutMs = 6000){
  const requestId = makeId();
  return new Promise((resolve) => {
    let detected = false, version = null;
    const t = setTimeout(() => { cleanup(); resolve({ ok: detected, version }); }, timeoutMs);

    function cleanup(){ clearTimeout(t); removeEventListener('message', onMsg); }
    function onMsg(ev){
      const msg = ev?.data || {};
      if (msg.origin !== 'extension') return;

      // Legacy: { type:'pong', version? }
      if (msg.type === 'pong' && typeof msg.version === 'string') {
        cleanup(); return resolve({ ok:true, version: msg.version });
      }

      // Modern: { type:'RTO_RESPONSE', requestId, ok, data:{version?} }
      if (msg.type === 'RTO_RESPONSE' && msg.requestId === requestId) {
        const v = (msg.ok && msg.data && typeof msg.data.version === 'string') ? msg.data.version : null;
        cleanup(); return resolve({ ok:true, version: v });
      }

      // Any valid message from the extension proves presence
      detected = true;
    }

    addEventListener('message', onMsg);
    // Send both probes
    postMessage({ origin:'admin', type:'RTO_REQUEST', requestId, action:'detect' }, '*'); // modern
    postMessage({ origin:'admin', type:'ping' }, '*');                                     // legacy
  });
}

(async function main(){
  ui.pending();
  try {
    const res = await detectVersion(6000);
    if (!res.ok) return ui.err('Not detected ❌');
    ui.ok(res.version || null);
  } catch {
    ui.err('Not detected ❌');
  }
})();
</script>

<script>
ask('getUrl', {}, 4000)
  .then(r => {
    if (r.ok) console.log('[RTO] remote URL =>', r.data?.url || '(none yet)');
    else console.warn('[RTO] getUrl error =>', r.error?.code, r.error?.message);
  })
  .catch(err => console.warn('Probe failed', err));
</script>

<script>
(async function(){
  // Quick boolean: do we get a 'detect' reply within 2.5s?
  const has = await (async()=>{
    try {
      const r = await ask('detect', {}, 2500);
      return !!r?.ok;
    } catch {
      return false;
    }
  })();
  document.documentElement.classList.toggle('rto-on', has);
})();
</script>

/* CSS idea:
:root .rto-only { display:none; }
:root.rto-on .rto-only { display:initial; }
*/