Getting started

A guided first project: detect → allow-list → open tab → run a DOM action.
Docs updated: 2025-12-17

Setup checklist

  1. Place the helpers into /RTO_helpers/ (see Downloads).
  2. Serve your page from a normal web origin (https://… or http://…).
  3. Make sure the RTO extension is installed and enabled.
  4. Allow-list the host(s) you want to control (Allow-list docs).
No secrets in logs
Avoid printing passwords, tokens, or personal data into the console or your page logs.

Full minimal example

Copy this file into your project and open it in the browser (adjust paths if needed):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>RTO demo</title>
</head>
<body>
  <h1>RTO demo page</h1>

  <!-- Optional status banner container -->
  <div id="rtoStatus"></div>

  <button id="btnDetect">Detect extension</button>
  <button id="btnAllow">Allow this host</button>
  <button id="btnOpen">Open tab</button>
  <button id="btnRead">Read H1 text</button>

  <pre id="log" style="background:#111;color:#fff;padding:12px;border-radius:8px;white-space:pre-wrap;"></pre>

  <!-- 1) Load helpers -->
  <script src="../RTO_helpers/RTO_form_api.js"></script>
  <script src="../RTO_helpers/RTO_DOM_actions.js"></script>
  <script src="../RTO_helpers/RTO_domainList.js"></script>
  <script src="../RTO_helpers/RTO_status_ui.js"></script>

  <script>
    const tabKey = "demoTab";
    const targetUrl = "https://example.com";

    const logEl = document.getElementById("log");
    function log(...args){
      logEl.textContent += args.map(x => (typeof x==="string" ? x : JSON.stringify(x,null,2))).join(" ") + "\n";
    }

    // Optional: mount status banner
    RTOStatusUI.mount({ containerId: "rtoStatus" });

    async function detect(){
      await RTOForm.detect(1500);
      log("✅ Extension detected");
    }

    async function allowThisHost(){
      const host = location.host;
      const ok = await RTOAllowlist.add(host, 4000);
      log(ok ? "✅ Host allowed: "+host : "❌ Could not allow host: "+host);
    }

    async function openTab(){
      await RTOForm.openTab({ tabKey, url: targetUrl, focus:true}, { timeoutMs: 15000 });
      log("✅ Opened tab", { tabKey, url: targetUrl });
    }

    async function readH1(){
      await RTOForm.waitForSelector({ tabKey, selector: "h1" }, { timeoutMs: 8000 });
      const data = await RTOForm.getText({ tabKey, selector: "h1" }, { timeoutMs: 8000 });
      log("H1 text:", (data.text || data.value || data));
    }

    document.getElementById("btnDetect").addEventListener("click", () => detect().catch(e => log("❌", e)));
    document.getElementById("btnAllow").addEventListener("click", () => allowThisHost().catch(e => log("❌", e)));
    document.getElementById("btnOpen").addEventListener("click", () => openTab().catch(e => log("❌", e)));
    document.getElementById("btnRead").addEventListener("click", () => readH1().catch(e => log("❌", e)));
  </script>
</body>
</html>

Run it

  • Click Detect extension. If it fails, see Errors.
  • Click Allow this host (this adds location.host to the allow-list).
  • Click Open tab to create a controlled tab.
  • Click Read H1 text to run a DOM action.

Next