Browser Extension
The Exekra Browser Extension is a Chrome extension that enables element selection, interaction recording, and table extraction for browser automation workflows. It pairs with Exekra Studio on the same machine.
Installation
Load the extension as an unpacked extension in Chrome from the Hub's browser-extension directory. Chrome will display the permissions the extension requests; accept them when prompted. Host permissions cover all URLs so the extension can support automation across any website.
Selector Capture Model
When the user activates element selection from Exekra Studio, the extension generates multiple selector candidates for the target element using a priority-based strategy:
| Priority | Strategy | Description |
|---|---|---|
| 1 | ID Selector | Uses element ID (deprioritized if dynamic-looking: UUIDs, numeric suffixes) |
| 2 | Data Attributes | data-* attributes with unique values |
| 3 | Name Attribute | Form input name attributes |
| 4 | Type + Placeholder | Input elements with placeholder text |
| 5 | Text Content (XPath) | Dynamic XPath based on visible text |
| 6 | ARIA Label | Accessibility label attributes |
| 7 | Role Attribute | ARIA role attribute |
| 8 | Classes | CSS class selectors (all or first class) |
| 9 | Path Fallback | Structural CSS selector with nth-of-type |
Each generated selector is validated against the DOM. Selectors are classified as valid (exactly one match), multiple (more than one match), or invalid (no matches). The extension returns a primary selector, fallback alternatives, and the complete candidate list.
Anchor Detection
When a primary selector is ambiguous (matches multiple elements), the user can select an anchor element to disambiguate. The extension detects the spatial relationship between the target and anchor elements:
| Relationship | Description |
|---|---|
| nextSibling | Target is the next sibling of the anchor |
| previousSibling | Target is the previous sibling of the anchor |
| firstChild | Target is the first child of the anchor |
| lastChild | Target is the last child of the anchor |
| descendant | Target is a descendant of the anchor |
| parent | Target is the parent of the anchor |
Anchors are captured with their type (aria-label, text, or label) and text content, providing a stable reference point for element location during replay.
Recording Mode
The recording mode captures user interactions on a target website and converts them into workflow activities. Exekra Studio initiates recording by specifying a target URL. The extension opens or activates the target tab and begins capturing events.
Captured action types:
| Action | Trigger |
|---|---|
| click | User clicks an element |
| type | User enters text in an input field |
| selectDropdown | User changes a dropdown selection |
| navigate | Page navigation via URL change or popstate |
| keydown | Enter or Tab key press (form submission) |
Each recorded action includes the complete selector data (CSS, XPath, attributes, anchors, frame path), the action value, page URL, page title, and timestamp. Actions are relayed in real time from the target tab back to the Exekra Studio canvas.
Password Masking
When the recorder detects interaction with a password field (input type="password"), the actual value is replaced with the placeholder string {{credential}} before transmission. The original password value is never captured, stored, or transmitted. A boolean flag marks the action as password-related for the workflow engine to handle credential injection at runtime.
Frame and Iframe Handling
The extension traverses the window hierarchy from the current frame to the top-level document, building an array of selectors for each iframe in the path. This frame path is included in the selector data, enabling the runner to navigate through nested iframes during workflow execution. Cross-origin frame exceptions are handled gracefully.
Table Extraction
The extension detects and extracts structured data from tables on the page. Supported table types:
| Type | Detection Method |
|---|---|
| HTML Table | Standard <table> element |
| ARIA Table | Elements with role="table" |
| ARIA Grid | Elements with role="grid" or role="treegrid" |
| Div-based Table | Div containers with role="row" or class="row" |
Extracted data includes the table selector, row selector pattern, column definitions with header and cell selectors, a preview of the first 5 rows, and total row/column counts.
Was this page helpful?
A quick signal helps us prioritise improvements.