Built by: Yash Sharma (connect@yashsharma.ai) Organization: Yash, Yash_Personal_openSource Copyright: © 2025 Yash (Yash_Personal_openSource). All rights reserved.

This Chrome extension enables visual web element recording for Snowboard RPA Studio. It highlights elements on hover and captures their CSS selectors when clicked.

✨ Visual Highlighting - See exactly what element you're selecting with a blue border and tooltip 🎯 Smart Selector Generation - Automatically generates optimal CSS selectors (ID, name, class, xpath) 🔴 Recording Indicator - Always know when recording is active 💬 Native Messaging - Communicates with Snowboard Studio in real-time ⚡ Fast & Lightweight - Minimal performance impact on web pages 🔐 Fixed Extension ID - Same ID on all systems (bnmmibpojeaadjmaijopfpcbokiblcbm) - no manual configuration!

1. Run the installer:

   .\install.ps1

2. Follow the on-screen instructions to load the extension in Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" (toggle in top-right corner)
3. Click "Load unpacked"
4. Select this folder: C:\Users\yashs\Documents\SnowBoard\ChromeExtension
5. ✅ Done! The extension has a fixed ID (bnmmibpojeaadjmaijopfpcbokiblcbm) that works on all systems

Note: The extension uses a cryptographic key to ensure the same Extension ID on every system. No manual configuration needed!

1. Click the Snowboard extension icon in Chrome toolbar
2. Click "🔴 Start Recording"
3. Hover over elements on the page - they will highlight in blue
4. Click elements to record them
5. Click "⏹ Stop Recording" when done

1. Open Snowboard Studio
2. Click "Start Recording" button
3. Switch to Chrome and interact with your web page
4. Elements will be recorded automatically
5. Click "Stop Recording" in Studio

┌─────────────────┐         ┌──────────────────┐         ┌──────────────────┐
│  Chrome Page    │ ──────> │  Content Script  │ ──────> │  Background.js   │
│  (Website)      │         │  (Highlighter)   │         │  (Event Handler) │
└─────────────────┘         └──────────────────┘         └──────────────────┘
                                                                    │
                                                                    │ Native
                                                                    │ Messaging
                                                                    ▼
                                                          ┌──────────────────┐
                                                          │  Snowboard.      │
                                                          │  NativeMessaging │
                                                          │  (Bridge)        │
                                                          └──────────────────┘
                                                                    │
                                                                    ▼
                                                          ┌──────────────────┐
                                                          │  Snowboard       │
                                                          │  Studio          │
                                                          └──────────────────┘

The extension generates selectors in this priority order:

1. ID - #elementId (highest priority, most stable)
2. Name attribute - input[name="username"]
3. Class combinations - button.primary.submit
4. Type attribute - input[type="email"]
5. ARIA label - button[aria-label="Submit"]
6. Data attributes - div[data-testid="login"]
7. XPath with nth-child - div > form > button:nth-child(2)

ChromeExtension/
├── manifest.json           # Extension configuration
├── content.js              # Page interaction & highlighting
├── content.css             # Highlight styles
├── background.js           # Event handling & native messaging
├── popup.html              # Extension popup UI
├── popup.js                # Popup logic
├── icons/                  # Extension icons
├── install.ps1             # Automated installer
├── com.Yash.snowboard.recorder.json  # Native messaging manifest
└── README.md               # This file

• Make sure recording is started (red indicator should show)
• Refresh the web page after starting recording
• Check Chrome console for errors (F12 → Console tab)

• Verify the manifest path in Registry:

  HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.Yash.snowboard.recorder
  

• Run .\setup-native-host.ps1 to register the native messaging host
• The Extension ID is fixed: bnmmibpojeaadjmaijopfpcbokiblcbm (same on all systems)
• Check logs at: %LOCALAPPDATA%\Snowboard\Logs\native-messaging.log

• Check that Snowboard Studio is running
• Verify native messaging host is built: Snowboard.NativeMessaging.exe
• Review extension console: right-click extension icon → "Inspect popup"

To modify the extension:

1. Edit the source files
2. Go to chrome://extensions/
3. Click the reload icon for Snowboard RPA Recorder
4. Test your changes

• ✅ All data stays local (no external communication)
• ✅ Only active when explicitly recording
• ✅ Requires user permission to access web pages
• ✅ Native messaging uses stdio (secure channel)
• ✅ Built with enterprise security in mind

Proprietary and Confidential Copyright © 2025 Yash (Yash_Personal_openSource). All rights reserved.

This software is the property of Yash (Yash_Personal_openSource) and is protected by copyright law. Unauthorized copying, distribution, modification, or use is strictly prohibited.

Author: Yash Sharma Title: Sr AI/ML Engineer Organization: Yash, Yash_Personal_openSource Email: connect@yashsharma.ai