Favor DOM Selectors for Browser Tools Clicks

.github/workflows/build.yml

@@ -0,0 +1,128 @@
+name: Build Extension
+
+on:
+  # Allow manual trigger from Actions tab with environment selection
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Environment to build'
+        required: true
+        type: choice
+        options:
+          - dev
+          - test
+          - prod
+
+run-name: Build Extension - ${{ github.event.inputs.environment }}
+
+jobs:
+  build:
+    name: Build Extension - ${{ github.event.inputs.environment }}
+    runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.environment }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build for ${{ github.event.inputs.environment }}
+        run: npm run build
+        env:
+          BUILD_ENV: ${{ github.event.inputs.environment }}
+
+      - name: Create distribution package
+        run: |
+          # Determine the artifacts subdirectory based on environment
+          case "${{ github.event.inputs.environment }}" in
+            dev)
+              ARTIFACTS_DIR="artifacts/Dev"
+              ;;
+            test)
+              ARTIFACTS_DIR="artifacts/Test"
+              ;;
+            prod)
+              ARTIFACTS_DIR="artifacts/Prod"
+              ;;
+          esac
+
+          # Check if artifacts directory exists
+          if [ ! -d "$ARTIFACTS_DIR" ]; then
+            echo "❌ Error: $ARTIFACTS_DIR not found"
+            echo "Available directories:"
+            ls -la artifacts/ || echo "No artifacts directory found"
+            exit 1
+          fi
+
+          # Create a clean distribution directory
+          mkdir -p dist
+
+          # Create ZIP file for easy distribution
+          cd "$ARTIFACTS_DIR"
+          zip -r "../../dist/extension-${{ github.event.inputs.environment }}.zip" .
+          cd ../..
+
+          # Copy unzipped files as well
+          cp -r "$ARTIFACTS_DIR" "dist/extension-${{ github.event.inputs.environment }}"
+
+          echo "✅ Created distribution package"
+          ls -lh dist/
+
+      - name: Upload ZIP artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-${{ github.event.inputs.environment }}-v${{ github.run_number }}
+          path: dist/extension-${{ github.event.inputs.environment }}.zip
+          retention-days: 90
+
+      - name: Upload unzipped artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-${{ github.event.inputs.environment }}-unzipped-v${{ github.run_number }}
+          path: dist/extension-${{ github.event.inputs.environment }}/
+          retention-days: 90
+
+      - name: Build summary
+        run: |
+          echo "### 🎉 Build completed successfully!" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Environment:** \`${{ github.event.inputs.environment }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "**Version:** \`1.2.3\`" >> $GITHUB_STEP_SUMMARY
+          echo "**Build Number:** \`#${{ github.run_number }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "---" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### 📦 Download Artifacts" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "Two artifact types are available:" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "1. **ZIP Package** - \`extension-${{ github.event.inputs.environment }}-v${{ github.run_number }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "   - Ready to distribute, single file download" >> $GITHUB_STEP_SUMMARY
+          echo "   - Extract and load in Chrome via \`chrome://extensions/\`" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "2. **Unzipped Extension** - \`extension-${{ github.event.inputs.environment }}-unzipped-v${{ github.run_number }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "   - Direct folder structure" >> $GITHUB_STEP_SUMMARY
+          echo "   - Load directly in Chrome as unpacked extension" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "---" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### 📋 Installation Instructions" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "1. Download the artifact from the **Artifacts** section above" >> $GITHUB_STEP_SUMMARY
+          echo "2. Extract the ZIP file (if using ZIP package)" >> $GITHUB_STEP_SUMMARY
+          echo "3. Open Chrome and go to \`chrome://extensions/\`" >> $GITHUB_STEP_SUMMARY
+          echo "4. Enable **Developer mode** (top right)" >> $GITHUB_STEP_SUMMARY
+          echo "5. Click **Load unpacked**" >> $GITHUB_STEP_SUMMARY
+          echo "6. Select the extracted extension folder" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "---" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Retention:** Artifacts are kept for 90 days" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -30,3 +30,4 @@ Thumbs.db
 # Logs
 *.log
 npm-debug.log*
+artifacts/

README.md

@@ -1,37 +1,62 @@
-<div align="center">
+# ANS Browser Extension
 
-![Banner](./assets/banner.png)
+AI-powered browser automation with GoDaddy Agent Naming System (ANS) integration.
 
-# Open ChatGPT Atlas
+## Features
 
-Open Source and Free Alternative to ChatGPT Atlas.
+- **◉ Browser Tools Mode**: AI-powered browser automation with clicks, typing, scrolling, and navigation
+- **🤖 ANS Integration**: GoDaddy Agent Naming System (ANS) support for trusted A2A agents
+- **Sidebar Chat Interface**: Clean, modern React-based chat UI accessible from any tab
+- **Direct Browser Automation**: No backend required - all API calls made directly from extension
+- **Visual Feedback**: Blue border overlay and element highlighting during automation
+- **Multi-Environment Builds**: Separate Dev, Test, and Prod environment configurations
+- **🔧 Composio Support**: Optional Tool Router mode for Gmail, Slack, GitHub, and 500+ integrations
 
-![Atlas Demo](./atlas.gif)
+## Getting Started
 
-<a href="https://github.com/composiohq/open-chatgpt-atlas"><img alt="Star" src="https://img.shields.io/badge/⭐%20Star%20Us-GitHub-yellow?style=for-the-badge"></a>
+### For GoDaddy Employees (ANS Extension)
 
+#### Prerequisites
+- Chrome or Edge browser (Manifest V3 support)
+- GoDaddy VPN access
+- GoCode API key
+- ANS credentials
 
-</div>
+#### Installation Steps
 
-## Features
+1. **Connect to VPN**
+   - Log into GoDaddy VPN
 
-- **🔧 Tool Router Mode**: Composio's intelligent tool routing for accessing Gmail, Slack, GitHub, and 500+ integrations
-- **◉ Browser Tools Mode**: Gemini 2.5 Computer Use for visual browser automation with screenshots, clicks, typing, scrolling, and navigation
-- **Sidebar Chat Interface**: Clean, modern React-based chat UI accessible from any tab
-- **Direct Browser Automation**: No backend required - all API calls made directly from extension
-- **Visual Feedback**: Blue click indicators and element highlighting during automation
-- **Safety Features**: Confirmation dialogs for sensitive actions (checkout, payment, etc.)
+2. **Authenticate ANS Access**
+   - Sign into [www.dev-godaddy.com](https://www.dev-godaddy.com) in Chrome
+   - This step is required to access ANS services
 
-## Getting Started
+3. **Download and Install Extension**
+   - Download the extension zip file from the latest release
+   - Unzip into a folder named `dist`
 
-### Prerequisites
+4. **Load Extension in Chrome**
+   - Open Chrome and navigate to `chrome://extensions/`
+   - Enable "Developer mode" in the top right corner
+   - Click "Load unpacked"
+   - Select the `dist` folder
+
+5. **Configure API Keys**
+   - Click the Settings (⚙️) icon in the extension
+   - Add the following base URL:
+     ```
+     https://caas-gocode-prod.caas-prod.prod.onkatana.net
+     ```
+   - Get your GoCode API key: [https://caas.godaddy.com/gocode/my-api-keys](https://caas.godaddy.com/gocode/my-api-keys)
+   - Get your ANS credentials: [https://api.ote-godaddy.com/v1/agents](https://api.ote-godaddy.com/v1/agents)
 
+### For Developers (Building from Source)
+
+#### Prerequisites
 - Node.js 18+ and npm
 - Chrome or Edge browser (Manifest V3 support)
-- Google API key for Gemini (required)
-- Composio API key (optional, for Tool Router mode)
 
-### Installation
+#### Build and Install
 
 1. Clone this repository
 2. Install dependencies:
@@ -41,15 +66,22 @@ npm install
 
 3. Build the extension:
 ```bash
-npm run build
+# Build for Dev environment
+BUILD_ENV=dev npm run build
+
+# Build for Test environment
+BUILD_ENV=test npm run build
+
+# Build for Prod environment
+BUILD_ENV=prod npm run build
 ```
 
 4. Load the extension in Chrome:
    - Open Chrome and navigate to `chrome://extensions/`
    - Enable "Developer mode" in the top right
    - Click "Load unpacked"
-   - Select the `dist` folder
-   - Open Settings (⚙️ icon) to configure your API keys
+   - Select the `artifacts/Dev` (or `artifacts/Test` or `artifacts/Prod`) folder
+   - Configure your API keys in Settings (⚙️ icon)
 
 ### Running the Electron Browser
 
@@ -72,21 +104,7 @@ npm run electron:dev
 
 The Electron browser will launch with the full Atlas functionality integrated, allowing you to use browser tools and tool routing directly from the desktop application.
 
-### Configuration
-
-#### Required Setup
-
-1. **Google API Key** (Required)
-   - Get your key from [Google AI Studio](https://aistudio.google.com/app/apikey)
-   - Add it in Settings under "Google API Key"
-   - Supports: Gemini 2.5 Pro, Flash, and Flash Lite
-
-2. **Composio API Key** (Optional - for Tool Router mode)
-   - Get your key from [Composio Dashboard](https://app.composio.dev/settings)
-   - Add it in Settings under "Composio API Key"
-   - Enables access to 500+ app integrations
-
-#### Using Browser Tools (◉ Button)
+### Using Browser Tools
 
 1. Enable Browser Tools by clicking the ◉ button in the chat header
 2. The extension automatically uses Gemini 2.5 Computer Use Preview
@@ -98,17 +116,6 @@ The Electron browser will launch with the full Atlas functionality integrated, a
 - "Take a screenshot of this page"
 - "Click the first image on the page"
 
-#### Using Tool Router Mode
-
-1. Add your Composio API key in Settings
-2. Click ◉ to disable Browser Tools (or keep it off)
-3. Chat normally - the AI will automatically use Composio tools when needed
-
-**Example prompts:**
-- "Check my Gmail for unread messages"
-- "Create a GitHub issue titled 'Bug in login flow'"
-- "Send a Slack message to #general with 'Hello team!'"
-
 ### Development
 
 Run with hot reload:
@@ -118,16 +125,45 @@ npm run dev
 
 Then reload the extension in Chrome after each change.
 
+---
+
+## For Composio Users (Tool Router Mode)
+
+This extension also supports Composio's Tool Router for accessing Gmail, Slack, GitHub, and 500+ app integrations.
+
+### Prerequisites
+- Composio API key from [Composio Dashboard](https://app.composio.dev/settings)
+- Google API key from [Google AI Studio](https://aistudio.google.com/app/apikey)
+
+### Setup
+
+1. Open extension Settings (⚙️ icon)
+2. Add your Composio API key under "Composio API Key"
+3. Add your Google API key under "Google API Key"
+
+### Using Tool Router Mode
+
+1. Make sure Browser Tools is disabled (◉ button should be OFF)
+2. Chat normally - the AI will automatically use Composio tools when needed
+
+**Example prompts:**
+- "Check my Gmail for unread messages"
+- "Create a GitHub issue titled 'Bug in login flow'"
+- "Send a Slack message to #general with 'Hello team!'"
+
+### Composio Resources
+- [Composio Platform](https://composio.dev/?utm_source=Github&utm_medium=Youtube&utm_campaign=2025-11&utm_content=Atlas)
+- [Tool Router Documentation](https://docs.composio.dev/docs/tool-router/quick-start)
+- [Composio GitHub](https://github.com/composiohq)
+
 ## Documentation
 
 - **[FAQ](./FAQ.md)** - Frequently asked questions and quick troubleshooting
 - **[TROUBLESHOOTING.md](./TROUBLESHOOTING.md)** - Detailed troubleshooting guide for common issues
 
 ## References
 
-- [Composio Platform](https://composio.dev/?utm_source=Github&utm_medium=Youtube&utm_campaign=2025-11&utm_content=Atlas) - Intelligent tool routing for AI agents
-- [Composio Tool Router Documentation](https://docs.composio.dev/docs/tool-router/quick-start) - Learn how to use Tool Router to route tool calls across 500+ integrations
-- [Composio GitHub](https://github.com/composiohq) - Python and TS SDK
 - [ChatGPT Atlas](https://openai.com/index/introducing-chatgpt-atlas/) - OpenAI's browser automation AI agent
 - [Gemini Computer Use Model](https://blog.google/technology/google-deepmind/gemini-computer-use-model/) - Google's AI model for browser automation
 - [Gemini API Documentation](https://ai.google.dev/gemini-api/docs/computer-use) - Official documentation for Gemini Computer Use
+- [GoDaddy ANS Documentation](https://api.ote-godaddy.com/v1/agents) - ANS agent registration and credentials