Get the FREE Ultimate OpenClaw Setup Guide →

firefox-browser

npx machina-cli add skill aiskillstore/marketplace/firefox-browser --openclaw
Files (1)
SKILL.md
7.8 KB

Firefox Browser Agent Bridge

Control the user's actual Firefox browser session via WebSocket. This uses their real browser with existing logins and cookies - not a headless browser.

Quick Start

# 0. If Firefox isn't running, start it first
nohup firefox &>/dev/null &

# 1. Check connection
browser ping

# 2. See what tabs are open
browser listTabs '{}'

# 3. Start a new session (recommended)
browser newSession '{"url": "https://example.com"}'

# 4. Read the page with interactable elements marked
browser getContent '{"format": "annotated"}'

Client Usage

browser <action> '<json_params>'

Actions Reference

Session & Tab Management

ActionDescriptionKey Params
listTabsList all open tabs across windows-
newSessionCreate new tab to work inurl (optional)
setActiveTabSwitch which tab agent works ontabId, focus
getActiveTabGet current tab info-

Navigation & Page Info

ActionDescriptionKey Params
navigateGo to URL in current taburl, wait, newTab
getContentGet page contentformat: annotated, text, html
getInteractablesList clickable elements and inputsselector (optional scope)
screenshotCapture visible area as PNGfilename (optional)

Interaction

ActionDescriptionKey Params
clickClick elementselector, text, or x/y coords
typeType into focused/selected inputselector, text, submit, clear
fillFormFill form fields (inputs, textareas, selects)fields[] array with selector/value
waitForWait for element/textselector, text, timeout

fillForm - The Right Way to Fill Forms

IMPORTANT: There is no fill command. Use fillForm with a fields array:

# Fill a single field
browser fillForm '{"fields": [{"selector": "#email", "value": "test@example.com"}]}'

# Fill multiple fields at once (text inputs, textareas, AND select dropdowns)
browser fillForm '{"fields": [
  {"selector": "#name", "value": "John Doe"},
  {"selector": "#email", "value": "john@example.com"},
  {"selector": "#subject", "value": "support"},
  {"selector": "#message", "value": "Hello world"}
]}'

Works with: <input>, <textarea>, <select>, checkboxes, radio buttons.

Control Flow

ActionDescriptionKey Params
forkDuplicate tab into multiple pathspaths[] with name + commands
killForkClose a forkfork (name)
listForksList active forks-
tryUntilTry alternatives until one succeedsalternatives[], timeout
parallelRun commands on multiple URLsbranches[] with url + commands

Authentication

ActionDescriptionKey Params
getAuthContextDetect login pages, available accounts-
requestAuthRequest user approval for authreason
configureAuthSet auth preferencesauthMode, setSiteRule, domain

Recommended Workflow

1. Start by Inspecting Available Tabs

browser listTabs '{}'

Returns:

{
  "activeTabId": 123,
  "windows": [
    {
      "windowId": 1,
      "focused": true,
      "tabs": [
        {"tabId": 123, "url": "https://...", "title": "...", "active": true}
      ]
    }
  ],
  "totalTabs": 5
}

2. Start Fresh or Pick Existing Tab

# Start fresh
browser newSession '{"url": "https://amazon.com"}'

# Or switch to existing tab
browser setActiveTab '{"tabId": 456}'

3. Read Page with Annotated Format (Recommended)

browser getContent '{"format": "annotated"}'

Returns content with interactive elements marked inline:

Product Name Here
$4.99
[button: "Add to cart" | selector: #add-btn]
[input:text: "search" | value: "" | selector: #search-box]
[link: "View details" | href: /product/123 | selector: a.details-link]

This shows what's clickable and where it is in context.

4. Interact Using Selectors

# Click using selector from annotated output
browser click '{"selector": "#add-btn"}'

# Or by text (prefers visible elements)
browser click '{"text": "Add to cart"}'

# Type into input
browser type '{"selector": "#search-box", "text": "query", "submit": true}'

Fork: Speculative Parallel Execution

When you're not sure which path is right, fork the tab and try both:

# Create forks
browser fork '{
  "paths": [
    {
      "name": "google-auth",
      "commands": [{"action": "click", "params": {"text": "Sign in with Google"}}]
    },
    {
      "name": "email-auth",
      "commands": [{"action": "click", "params": {"text": "Sign in with Email"}}]
    }
  ]
}'

Returns:

{
  "forked": true,
  "sourceTabId": 123,
  "forks": [
    {"name": "google-auth", "tabId": 456, "url": "...", "commandResults": [...]},
    {"name": "email-auth", "tabId": 789, "url": "...", "commandResults": [...]}
  ]
}

Work on specific fork:

browser getContent '{"format": "annotated", "fork": "google-auth"}'
browser click '{"text": "Continue", "fork": "google-auth"}'

Kill the wrong path:

browser killFork '{"fork": "email-auth"}'

TryUntil: Handle Uncertain UI

When the exact button varies (cookie banners, A/B tests):

browser tryUntil '{
  "alternatives": [
    {"action": "click", "params": {"selector": "#accept-cookies"}},
    {"action": "click", "params": {"text": "Accept All"}},
    {"action": "click", "params": {"selector": ".cookie-dismiss"}}
  ],
  "timeout": 3000
}'

Tries each until one succeeds.


Parallel: Multiple URLs at Once

Compare prices across sites:

browser parallel '{
  "branches": [
    {"url": "https://amazon.com/product", "commands": [{"action": "getContent", "params": {"format": "text"}}]},
    {"url": "https://walmart.com/product", "commands": [{"action": "getContent", "params": {"format": "text"}}]}
  ]
}'

Authentication

The bridge detects auth pages and leverages existing browser sessions:

# Check if on login page
browser getAuthContext '{}'

# Returns available accounts, OAuth options, etc.

Isolated Sessions (for Parallel Execution)

When running multiple tasks in parallel, use tabId to avoid conflicts:

# 1. Create isolated session - get a unique tabId
browser newSession '{"url": "https://example.com"}'
# Returns: {"tabId": 15, "url": "...", "windowId": 1}

# 2. Use that tabId in ALL subsequent commands
browser navigate '{"url": "https://example.com/page", "tabId": 15}'
browser getContent '{"format": "annotated", "tabId": 15}'
browser click '{"selector": "#btn", "tabId": 15}'
browser type '{"selector": "#input", "text": "hello", "tabId": 15}'

This lets multiple agents work in parallel without stepping on each other.

Tips

  1. Start with listTabs to see what's open
  2. Use newSession for a clean start
  3. Use tabId for parallel/isolated execution
  4. Use annotated format - shows content + clickable elements together
  5. Use selectors from annotated output - more reliable than text matching
  6. Fork when uncertain - try multiple paths, kill the wrong ones

Troubleshooting

  1. Firefox not running? Start it: nohup firefox &>/dev/null &
  2. Check connection: browser ping
  3. Connection refused? The extension may need to be reloaded in about:debugging
  4. Element not found? Use browser getContent '{"format": "annotated"}' to see what's on the page

Source

git clone https://github.com/aiskillstore/marketplace/blob/main/skills/1jehuang/firefox-browser/SKILL.mdView on GitHub

Overview

Firefox Browser Agent Bridge lets you drive the user s real Firefox session via WebSocket, preserving logins and cookies. It enables browsing as the user, interacting with authenticated pages, filling forms, clicking elements, taking screenshots, and extracting page content.

How This Skill Works

The agent communicates with the local Firefox process over WebSocket, using the live browser rather than a headless instance. It exposes commands like listTabs, newSession, navigate, getContent, click, type, fillForm, and screenshot to operate the user session while preserving existing logins and cookies.

When to Use It

  • Browse websites exactly as the user to access authenticated pages without signing in again
  • Interact with forms, buttons, and dynamic UI on live pages in the user s session
  • Fill multi field forms and submit them using fillForm with a fields array
  • Capture screenshots or extract page content from the user s active session
  • Manage and coordinate multiple tabs or forks to test or automate flows across real pages

Quick Start

  1. Step 1: Ensure Firefox is running, or start it with a command like nohup firefox &>/dev/null &
  2. Step 2: Connect and inspect the session with browser ping and browser listTabs '{}'
  3. Step 3: Start a new session to a target URL and fetch content, e.g. browser newSession '{"url": "https://example.com"}' and then browser getContent '{"format": "annotated"}'

Best Practices

  • Ensure Firefox is running before issuing commands
  • Use newSession to start work in a clean context while keeping the user s session intact
  • Prefer getContent with annotated format for structured element visibility
  • Use waitFor to handle dynamic content and asynchronous page updates
  • Leverage getAuthContext and configureAuth for handling login flows and permissions

Example Use Cases

  • Open a product page in the user s session and take a screenshot for a QA report
  • Fill a support form across multiple fields and submit using the fillForm workflow
  • Navigate to a protected account page and verify content without logging out
  • List current tabs, switch to a relevant one, and extract page HTML for data scraping
  • Run parallel branches to compare page layouts across different tabs in the same session

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers