1) Installation
Install the extension, then keep it enabled. The extension requests tab access and host access; you still control what can be automated via the Allow-list.
No. Everything runs locally in your browser. Your page talks to the extension through a safe
postMessage bridge (no proxies, no cookies interception).
2) Detect the Extension
Use the official helper API (RTOForm) and handle EXT_NOT_DETECTED gracefully.
Minimal detect (v7.11.2+)
<script src="/RTO_helpers/RTO_form_api.js"></script>
<script>
// Show a friendly banner if the extension is missing.
RTOForm.detect({ timeout: 2000 })
.then(function (info) {
if (!info || info.ready !== true) throw { code: 'EXT_NOT_DETECTED' };
console.log('RTO OK', info.version || '');
})
.catch(function (err) {
var code = (err && err.code) ? err.code : 'EXT_NOT_DETECTED';
console.warn('RTO not available:', code);
});
</script>
3) Allow-list (required)
- You must explicitly allow the target host(s) in the extension UI.
- If a host is not allow-listed, commands are rejected with
DOMAIN_NOT_ALLOWED. - Tip: show an “Allow-list this domain” CTA and retry once the user confirms.
4) Remote Tab Control
Use tabKey to consistently target a named tab across your flow.
Open → Navigate → Focus
<script src="/RTO_helpers/RTO_form_api.js"></script>
<script>
var tabKey = 'auth';
RTOForm.openTab({ tabKey: tabKey, url: 'https://example.com/login' })
.then(function () {
return RTOForm.waitForNavigation({ tabKey: tabKey, timeout: 15000 });
})
.then(function () {
return RTOForm.focusTab({ tabKey: tabKey });
})
.then(function () {
return RTOForm.getUrl({ tabKey: tabKey });
})
.then(function (res) {
console.log('Current URL:', (res && res.ok && res.data) ? res.data.url : '');
})
.catch(function (err) {
console.warn('Tab flow failed:', (err && err.code) || err);
});
</script>
If you see NO_CONTROLLED_TAB, the tab is not available (closed, not adopted, or not on an allow-listed host).
5) Named DOM actions
DOM actions run inside the target tab via a content script. Prefer stable selectors and wait before acting.
Fill a login form safely
<script src="/RTO_helpers/RTO_form_api.js"></script>
<script>
var tabKey = 'auth';
// Wait for an element to exist, then type + click.
RTOForm.waitForSelector({ tabKey: tabKey, selector: '#email', timeout: 10000 })
.then(function () {
return RTOForm.setValue({ tabKey: tabKey, selector: '#email', value: 'user@example.com' });
})
.then(function () {
return RTOForm.setValue({ tabKey: tabKey, selector: '#password', value: '***' }); // never log real passwords
})
.then(function () {
return RTOForm.click({ tabKey: tabKey, selector: 'button[type="submit"]' });
})
.catch(function (err) {
var code = (err && err.code) || 'ERROR';
if (code === 'ELEMENT_NOT_FOUND') {
console.warn('Selector not found — update the selector or wait longer.');
} else {
console.warn('DOM action failed:', code);
}
});
</script>
6) Errors & fixes
| Error | Meaning | Common fix |
|---|---|---|
EXT_NOT_DETECTED |
Extension is not installed / disabled / not responding. | Show install/enable CTA; retry RTOForm.detect(). |
DOMAIN_NOT_ALLOWED |
Target host is not in the Allow-list. | Ask the user to add the host in the extension UI, then retry. |
NO_CONTROLLED_TAB |
No tab matching tabKey is under control. |
Open/adopt the tab again; verify it’s on an allow-listed host. |
ELEMENT_NOT_FOUND |
Selector didn’t match any element. | Use a more stable selector; call waitForSelector first. |
TIMEOUT |
Wait exceeded the configured time. | Increase timeout; confirm navigation actually happens; add intermediate waits. |
7) Privacy & Security
- Local-only: commands and results stay in your browser.
- Deny-by-default: the Allow-list is required for cross-domain control.
- No arbitrary code execution: only documented tab and DOM commands.
8) Best practices
- Always start with
detect, then show a clear status UI. - Keep
tabKeystable per workflow (auth, monitor, ops). - Prefer
waitForSelectorbeforeclick/setValue. - Never print secrets to logs; treat form inputs as sensitive.