<hyper-frame> — an iframe that can frame any website.

Install via npm:

npm i --save @browserbox/hyper-frame

<script type="module" src="https://hyper-frame.art/hyper-frame.js"></script>
<hyper-frame
  id="bbx"
  login-link="https://example.com:9999/login?token=your_login_link"
  embedder-origin="https://app.example.com"
  ui-visible="false"
  allow-user-toggle-ui="false"
  width="100%"
  height="600">
</hyper-frame>

Before starting a self-hosted BrowserBox instance set the allowed embedder origins:

export ALLOWED_EMBEDDING_ORIGINS="https://your-site.example.com https://other-embedder.example.com"
bbx stop
bbx setup -p 8888
bbx start
cat ~/.config/dosaygo/bbpro/login.link

const bbx = document.querySelector('hyper-frame');
await bbx.whenReady();

await bbx.page.navigate('https://example.com');
const tabs = await bbx.tabs.list();
const firstTab = tabs[0];
if (firstTab?.id) {
  await bbx.tabs.activate(firstTab.id);
}

await bbx.click('a.my-link');
await bbx.waitForSelector('.result');
const title = await bbx.evaluate('document.title');

const screenshot = await bbx.capture.frame({ format: 'jpeg', quality: 80 });

await bbx.frameCapture(true);
const frame = await bbx.getFrame();

await bbx.cleanSlate('https://example.com');

first-load-cleanse runs once for each login-link. Use a non-empty URL to close existing tabs and open that replacement tab. Use an empty value, such as first-load-cleanse="", to close existing tabs without opening a replacement. The firstLoadCleanse(url?) method follows the same rule: a non-empty string opens that URL, and an empty string performs the delete-only cleanse.

Access via the element (bbx.tabs.list()) or via bbx.session facade.

API failures use stable BrowserBoxError codes: ERR_NOT_READY, ERR_POLICY_DENIED, ERR_TIMEOUT, ERR_TRANSPORT, ERR_UNSUPPORTED, ERR_INVALID_ARGUMENT, ERR_NOT_FOUND, ERR_CONFLICT, ERR_INTERNAL.

AGPL-3.0-or-later