Advanced Patterns — Build reliable flows

<script>
const ADMIN_ORIGIN='admin', EXT_ORIGIN='extension';
let _seq=0, _waiters=new Map();

addEventListener('message', (e) => {
  const d=e.data; if(!d||typeof d!=='object') return;
  if(d.origin!==EXT_ORIGIN) return;
  if(d.requestId && _waiters.has(d.requestId)){ _waiters.get(d.requestId)(d); _waiters.delete(d.requestId); }
});

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>

const Circuit={ fail:0, openUntil:0 };
async function guarded(step){
  const now=Date.now();
  if (Circuit.openUntil > now) throw new Error('CIRCUIT_OPEN');
  try{
    const out = await step(); Circuit.fail=0; return out;
  }catch(e){
    if (++Circuit.fail >= 3){ Circuit.openUntil = now + 15000; }
    throw e;
  }
}
// Usage
await guarded(()=>ask('navigate', { url:'https://app.example.com', focus:false }));

await ask('runJs', { code:`(function(){
  const s=document.querySelector('select#status'); if(!s) return false;
  if (s.value!=='active'){ s.value='active'; s.dispatchEvent(new Event('change',{bubbles:true})); }
  return true;
})()`, tabKey:'main' });

await waitUntil(()=>
  ask('runJs', { code:`(function(){
    const t=document.querySelector('table.data');
    return !!(t && t.tBodies[0] && t.tBodies[0].rows.length);
  })()`, tabKey:'main' }).then(r=>!!(r.ok && r.data)),
  30000, 600
);

await ask('runJs', { code:`(function(){
  const host=document.querySelector('my-input'); if(!host||!host.shadowRoot) return false;
  const input=host.shadowRoot.querySelector('input'); if(!input) return false;
  input.value='hello'; input.dispatchEvent(new Event('input',{bubbles:true}));
  return true;
})()`, tabKey:'main' });

const pages=['/a','/b','/c'].map(x=>'https://example.com'+x);
for (const url of pages){
  await askBackoff('navigate', { url, focus:false, tabKey:'qa' }, 4, 250);
  await askBackoff('waitFor', { selector:'body', timeoutMs:12000, tabKey:'qa' }, 3, 300);
  const h1 = await ask('runJs', { code:'(document.querySelector("h1")||{}).textContent||""', tabKey:'qa' });
  console.log('Visited:', url, 'Title:', (h1.ok?h1.data:''));
  await new Promise(r=>setTimeout(r, 600)); // polite throttle
}