The Chrome Extension (Visual Builder)

The RTILA X Chrome Extension is the Visual Builder — the tool you use to construct your automations directly on the web page. It runs inside your browser as a side panel and gives you full visual control over commands, datasets, selectors, and data extraction. You never need to write code. You point, click, and watch the live preview update in real time.

The extension is installed and configured automatically by RTILA X when you open a project in the Visual Builder. You do not need to install it manually from the Chrome Web Store.

---

Opening the Visual Builder

To open the Visual Builder for a project:

1. Go to Automation Projects in the sidebar.
2. Select the project you want to edit.
3. Click Builder in the ribbon toolbar.

RTILA X launches a new browser window with the RTILA extension loaded. The side panel appears on the right side of the browser window.

Note: If this is the first time opening the Visual Builder, RTILA X may take a moment to unpack the extension files. You will see a brief loading screen while this happens.

---

Side Panel Layout

The side panel has a top navigation bar with two tabs:

Tab	Icon	Purpose
Data Extraction	Radio button	Define datasets, select elements, and preview extracted data
Web Automation	Radio button	Build command sequences that interact with the page

Above the tabs, the top navigation bar also includes:

Button	Action
Power off (left)	Closes the Visual Builder and returns to the project list
Save (right)	Saves the current project configuration
Zoom (right)	Opens appearance options (UI scale, dark/light theme toggle)

---

Data Extraction Tab

The Data Extraction tab is where you define what data to scrape. It contains three main sections arranged vertically: the dataset list, the property configuration area, and the live preview table.

Dataset List

At the top of the Data Extraction tab, you will see a horizontal scrollable list of all datasets in your project. Each dataset appears as a small pill-shaped button.

Action	How
Select a dataset	Click its name in the list
Add a new dataset	Click the + button to the right of the list
Clone a dataset	Click the copy icon badge on the selected dataset pill
Delete a dataset	Click the trash icon badge on the selected dataset pill
Configure a dataset	Click the gear icon next to the list to open the Dataset Settings modal

Tip: When you select a dataset, its item_selector is highlighted on the page with a green overlay so you can visually verify your selection.

Dataset Settings

Clicking the gear icon opens the Dataset Settings modal with these fields:

Setting	Description
Selector for Each Item’s Container	The CSS/XPath selector that identifies each repeating item on the page
Parent Dataset	Links this dataset to a parent dataset for data inheritance
Required Fields	Comma-separated list of property names that must have values

Properties List

Below the dataset list, you will see a second horizontal list showing the properties (columns) of the selected dataset. Each property defines one piece of data to extract from each item.

Action	How
Select a property	Click its name in the list
Add a new property	Click the + button to the right of the properties list
Clone a property	Click the copy icon badge on the selected property pill
Delete a property	Click the trash icon badge on the selected property pill
Reorder properties	Drag properties left or right in the list

When you select a property, its configuration panel appears below, showing:

Field	Description
Name	The column name in your output data
Selector	The selector to find this data within each item (with element picker)
Type	What to extract: text, html, attribute, property, count, page_url, selector_path, list, index
Attribute	(For attribute type) Which attribute to read (e.g., href, src)
Property	(For property type) Which DOM property to read
Download	Checkbox to download files if the value is a URL
Transformations	Button to open the transformation editor

Element Picker

Next to the selector input field, you will see a pointer icon button. This is the element picker — it lets you visually select elements on the page instead of typing CSS selectors manually.

See Element Picker for a complete guide on using the element picker.

Live Preview Table

At the bottom of the Data Extraction tab, you will see a live preview table that shows the data currently extracted from the page. This updates in real time as you modify selectors.

Column	Content
Column headers	Match your property names exactly
Cells	Show the extracted value (truncated to 50 characters)
Empty cells	Show “(Empty Required)” in red if the property is required
Scripted values	Show “(Scripted value)” in italics if a script transformation is applied
Variable values	Show “(Variable value)” in italics if using a variable selector

Note: Cells that use script transformations or variable selectors cannot be previewed because their values depend on runtime state. They display placeholder text instead.

Missing Required Fields Warning

If your dataset has required fields configured but the corresponding properties are missing from the dataset, a red warning banner appears above the preview table:

⚠️ Warning: The following required fields are missing from properties: title, price

This warning helps you catch configuration errors before running your automation.

AI Extraction (Wand Icon)

On the Data Extraction tab, you will see a floating wand button (✨) in the bottom-right corner. Clicking it triggers AI Visual Extraction:

1. The extension takes a full-page screenshot.
2. The AI analyzes the screenshot and identifies data structures.
3. Datasets and properties are generated automatically.
4. Commands for automation are also generated.

See AI Vision Analysis for more details.

Refresh Preview Button

A refresh button (🔄) is also available as a floating button. Click it to re-run the extraction on the current page state. Use this after:

• Navigating to a different page
• Modifying selectors
• Adding or removing properties

---

Web Automation Tab

The Web Automation tab is where you build the sequence of actions your automation will perform. It displays your commands as a vertical list that you can edit, reorder, and nest.

Command List

Your commands appear as a vertical list of expandable cards. Each card shows:

• The command name (e.g., “Click Element”)
• The command type in parentheses (e.g., “click”)
• Action buttons for managing the command

Add Command Button

Click Add at the bottom of the command list to open the Command Selector Modal. This modal displays all available commands with descriptions. Search by name or browse by category.

Record Button

The Record button toggles recording mode:

• While not recording: Click to start recording. Your browser actions will be captured as commands.
• While recording: The button turns red and says “Stop”. Click to stop recording.

See Auto-Recording for the complete recording guide.

Help Button

A floating help button (?) appears in the bottom-right corner of the Web Automation tab. Click it to open the Commands Help Modal, which explains:

• Variable substitution syntax
• Server-side vs. browser commands
• Selector syntax
• Control flow and nesting
• Example workflows

Clear Commands

Click the trash button next to the Add/Record buttons to delete all commands in the project. A confirmation dialog appears before deletion.

Warning: Clearing commands cannot be undone unless you have saved a previous version. Use the project’s Version History feature to recover.

---

Command Editing

Click any command card to expand it and reveal its configuration panel.

Expanding and Collapsing

• Click the command header to expand or collapse it.
• When expanded, you see all configurable parameters for that command type.
• The display name is shown in bold at the top.

Editing Parameters

Each command type has its own set of parameters. Common parameters include:

Parameter	Description
Selector	Element to interact with (with element picker)
Value	Text to type, URL to visit, etc.
Timeout	How long to wait (in milliseconds)
Iframe	Iframe selector if the element is inside a frame

Command Action Buttons

Each command card has four action buttons in its header:

Button	Icon	Action
Add nested	➕	Add a command inside this command (for control flow)
Clone	📋	Duplicate this command
Toggle nested visibility	👁️	Show/hide nested command blocks
Delete	🗑️	Delete this command

Nested Commands

Some commands support nested blocks:

Command	Nested Blocks
if	then block and else block
while	do block
for_each	do block
repeat	do block
infinite_scroll	do block
try_catch	try block and catch block
Any command	then block (runs after this command)

When you click the toggle nested visibility button, the nested blocks collapse into a single header showing the block name (e.g., “Then”, “Else”, “Do”, “Try”, “Catch”).

---

Quick Preview Behavior

When you run a Quick Preview in the extension (by clicking Run in the Data Extraction tab), the extension executes your commands directly in the browser. However, some commands require the full RTILA engine and cannot run in the browser context.

Server-Side Commands (Skipped in Preview)

The following commands are skipped during Quick Preview because they require the desktop engine:

Command	Reason
file_operation	Requires file system access
process_image	Requires image processing libraries
save_as_pdf	Requires PDF generation engine
get_storage_state	Requires file system write
convert_data	Requires data conversion engine
audit_accessibility	Requires axe-core library
audit_links	Requires HTTP client
detect_tech_stack	Requires analysis engine
screenshot	Requires file system write
set_geolocation	Requires browser context API
set_viewport_size	Requires browser context API
context_set_offline	Requires browser context API
wait_for_download	Requires file system access
http_request	Requires network stack (simulated)
run_script (with export default)	Requires Deno module system

When these commands are encountered during preview, they are simulated — a log message is displayed but the command does not execute. Your UI interactions and data extraction commands still work normally.

---

Context Menu

When the extension is active, right-clicking on any page shows additional options:

Menu Item	Description
Auto-Extract Data with AI	Triggers AI Visual Extraction on the current page
Start Loop Recording	Begins recording a loop of actions
Stop Loop Recording	Stops the current loop recording session
Insert Variable →	Submenu showing all available variables for insertion

Insert Variable Submenu

When you right-click on an editable field (input, textarea, select, or contenteditable element), the Insert Variable submenu shows:

• All project variables
• All global variables
• All variables created by commands (e.g., set_variable, get_text)

For list variables containing CSV data, the submenu expands to show:

• Individual column options (e.g., “Column 1 (john)”)
• “Entire Line” option

Selecting a variable inserts the appropriate ${variable} syntax into the field and records the action.

---

Saving

Auto-Save

Your project is automatically saved when:

• You close the Visual Builder (click the power-off button)
• The browser tab is closed
• The browser window is closed

Manual Save

Click the Save button (💾) in the top-right corner of the side panel to save immediately. A success notification appears confirming the save.

Important: Always save before closing the browser if you have made changes. While auto-save handles most cases, saving manually ensures your work is preserved.

---

Extension Permissions

The RTILA extension requires the following browser permissions to function:

Permission	Purpose
sidePanel	Opens the side panel interface
tabs	Reads tab URLs and switches between tabs
storage	Stores project data and recording state
webNavigation	Detects page navigations for recording
contextMenus	Adds right-click menu items
<all_urls> (host)	Interacts with any web page you visit

Installation

The extension is automatically installed and managed by RTILA X. You do not need to:

• Download anything from the Chrome Web Store
• Manually enable developer mode
• Configure any settings

When you click Builder in RTILA X, the application:

1. Unpacks the extension files (first time only).
2. Launches a new browser window with the extension loaded.
3. Opens the side panel automatically.

Note: The extension is loaded as an unpacked extension. Your browser may show a notification about developer mode extensions. This is normal and expected. You can dismiss the notification.