Skip to main content

Flow Table Extractor

For EndChrome Users

This Chromestep-by-step extensionguide extractsshows tablesyou fromhow websitesto install and uploadsuse them tothe Flow Immersive,Table withExtractor optional Claude AI smart parsing for complex tables.extension.

✨
Key

📥 Features

  • 🔍 Automatically detects all tables on any webpage
  • 📊 One-click extraction and upload to Flow
  • 🤖 Optional Claude AI smart parsing for multi-row headers
  • 🔐 Secure credential storageInstallation (enterOne-Time once, use everywhere)
  • 🔄 Dataset versioning (same title = new version)
Setup)

🚀 Quick Start (5 Minutes)

Step 1: Download the Extension

  1. Download flow-table-extractor.zip
  2. Unzip the file to a folder on your computer
  3. Remember where you saved it!

Step 2: Install Browserin ExtensionChrome

Open Chrome Extensions Page:

  1. Open Chrome andbrowser
    2. go
  2. Type toin address bar: chrome://extensions/
  3. Press Enter

![Extensions Page](Or navigate: Menu (⋮) → Extensions → Manage Extensions)

Enable Developer Mode:

  1. Look at the top-right corner
  2. Find the toggle switch "Developer mode"
  3. Turn it ON (toggleit inshould top-right)turn blue)

Load the Extension:

  1. Click "Load unpacked" button (top-left)
  2. SelectNavigate to the flow-table-extractor folder you unzipped
  3. LookClick for"Select Folder"

Success!

You should see the Flow Table Extractor card appear:

  • Green "FT" icon
  • Name: "Flow Table Extractor"
  • Status: ON (blue toggle)

Step 3: Pin the Extension (Recommended)

  1. Click the puzzle piece icon (🧩) in Chrome toolbar
  2. Find "Flow Table Extractor"
  3. Click the pin icon (📌) next to it
  4. The green "FT" icon will now appear in your toolbar

⚙️ Configuration (One-Time Setup)

Step 4: Configure Your Credentials

Open the Extension:

  1. Click the green "FT" icon in your Chrome toolbar
  2. The Flow Table Extractor popup opens

Step 2:

Configure Credentials (One Time!)

Credentials:

  1. Click the "FT"button: extension icon
  2. Click "Configure Flow Credentials"
  3. A form appears with three fields

Fill in the Form:

┌─────────────────────────────────────┐
│ Flow Username:                      │
│ [your-flow-username____________]    │
│                                     │
│ Flow Password:                      │
│ [••••••••••••••••••••••••••]       │
│                                     │
│ Claude API Key (optional):          │
│ [sk-ant-api-key-here__________]    │
│ For smart table parsing...          │
│                                     │
│ [Save All Credentials]              │
│ [Cancel]                            │
└─────────────────────────────────────┘

Field 1: Flow Username

  • Enter your Flow Immersive username
    • and
  • Use your USERNAME, not email
  • Example: john (not john@company.com)

Field 2: Flow Password

  • Enter your Flow Immersive password
  • This is the password you use to login at a.flow.gl

Field 3: Claude API Key (Optional)

Enter
  • Leave blank if you don't have one
  • Or enter your Claude API key for smart table parsing
  • Example: sk-ant-api03-abc123...
  • Get one at: https://console.anthropic.com/

Save:

  1. Click "Save All Credentials"
  2. Done!You Nevershould see: "✓ All credentials saved securely!"
  3. Credentials are saved and you'll never need to enter againthem ✓

Step 3: Extract Your First Table

  1. Go to any website with tables (try Wikipedia!)
  2. Click the "FT" extension icon
  3. Select a table from the dropdown
  4. Enter a dataset title
  5. Click "Extract & Upload to Flow"
  6. Check Flow to see your data!again!

🔐What Securityis &Claude PrivacyAPI Key?

WhereClaude areAI credentialshelps stored?parse complex tables with:

  • Multi-row headers
  • Merged cells
  • Nested structures

Do you need it?

  • Browser:❌ Chrome'sNo encrypted- syncfor storagesimple tables (most tables)
  • Backend:✓ LocalYes file (~/.flow_extractor_config.json) with restricted permissions

Is it secure?

  • ✅ Chrome automatically encrypts stored credentials
  • ✅ File permissions prevent other users from reading
  • ✅ Communication is localhost-only or HTTPS
  • ✅ No third-party access to your credentials

See SECURITY.md- for detailed information.

🤖 Claude AI Smart Parsing (Optional)

ForWikipedia-style complex tables

  • ✓ Yes - for financial reports with multi-rowgrouped headers (like Wikipedia population tables), enable Claude AI:

    Setup:

    1. Get API key from https://console.anthropic.com/columns
    2. Enter it in "Configure Flow Credentials" (or set as environment variable)
    3. Check ☑️ "Use Claude AI for smart table parsing"

    Cost: ~$0.01-0.03 per table (1-3 cents)

    WhatHow itto does:get one:

    1. Go to https://console.anthropic.com/
    2. Sign up (free)
    3. Go to "API Keys"
    4. Click "Create Key"
    5. Copy the key (starts with sk-ant-)
    6. Paste into the extension

    🚀 Using the Extension

    Step 5: Navigate to a Page with Tables

    Examples of good pages:

    • IntelligentlyWikipedia combinesdata multi-row headerstables
    • HandlesFinancial merged cells properlyreports
    • CreatesProduct clearcomparison column namespages
    • PerfectAny forpage complexwith Wikipedia/financialHTML tables

    See CLAUDE_SETUP.md for details.Example:

    📖 Documentation

    • START_HERE.md - Welcome guide
    • QUICKSTART.md - 5-minute setup
    • SECURITY.md - Credential storage explained
    • CLAUDE_SETUP.md - Claude AI setup
    • README.md - Complete documentation
    • VISUAL_GUIDE.md - Step-by-step walkthrough

    🧪 Test Files

    • test-page.html - Simple tables for testing
    • test-complex-tables.html - Complex multi-row header tables

    💡 Tips

    1. DescriptiveGo titles:to Use clear dataset names like "Q4 Sales 2024"Wikipedia
    2. VersionSearch control:for Re-upload"List of countries by population"
    3. You'll see tables with same title creates new versiondata

    Step 6: Open the Extension

    Click the green Claude"FT" foricon complex:in Onlyyour usetoolbar.

    The popup shows:

    ┌─────────────────────────────────────────┐
│ [FLOW] Table Extractor    [📖 Docs]    │
├─────────────────────────────────────────┤
│                                         │
│  Select Table: [Table 1: Country... ▼] │
│  3 table(s) found                       │
│                                         │
│  Dataset Title: [My Dataset_______]    │
│                                         │
│  ☐ Use Claude AI for multi-rowsmart headerparsing     tables
    • │
  • Keep│ backend│ running:│ Leave[Extract python& server.pyUpload to Flow] │ │ [Configure Flow Credentials] │ │ │ ├─────────────────────────────────────────┤ │ Flow Immersive, Inc. │ └─────────────────────────────────────────┘ running in background

    • 🐛Step Troubleshooting7: Select a Table

    "ConnectionTable error: Failed to fetch"Dropdown: → Backend isn't running. Start python server.py

    "Flow

      credentials
    • Shows not configured" → Click "Configure Flow Credentials" and save them

      "Noall tables found on thisthe page"page

    • Preview format: "Table 1: FirstColumn, SecondColumn... (X rows)"
    • Click dropdown to see all available tables
    • Select the table you want to extract

    No tables found?

    →
      Page
    • The page doesn't have HTML <table> elements
    • Try a different page

    Step 8: Enter Dataset Title

    In the "Dataset Title" field:

    • Enter a descriptive name for your data
    • Examples:
      • Country Population 2024
      • Q4 Sales Data
      • Product Comparison
    • Make it clear and memorable!

    Version Control:

    • If you use the same title again, Flow creates a new version
    • Useful for tracking changes over time

    Step 9: Choose Parsing Mode (Optional)

    Checkbox: "Use Claude AI for smart table parsing"

    TablesWhen extractedto incorrectlycheck this box:

    →
      Try
    • ☑️ enablingTable "has multi-row headers
    • ☑️ Table has merged cells
    • ☑️ Complex Wikipedia-style tables
    • ☑️ Financial reports with nested columns

    When to leave unchecked:

    • ☐ Simple tables (one header row)
    • ☐ You don't have a Claude AIAPI smartkey
      • parsing"
    • ☐ forYou complexwant fastest extraction

    Example tables that need Claude:

    Simple table (no Claude needed):
┌──────────┬──────────┬──────────┐
│ Country  │ Population│ Area    │
├──────────┼──────────┼──────────┤
│ USA      │ 331M     │ 9.8M    │
└──────────┴──────────┴──────────┘

Complex table (use Claude):
┌──────────┬──────────────────────┐
│ Country  │     Statistics       │
│          ├──────────┬───────────┤
│          │ 2023     │ 2024      │
│          ├────┬─────┼────┬──────┤
│          │Pop │Area │Pop │Area  │
├──────────┼────┼─────┼────┼──────┤
│ USA      │331M│9.8M │334M│9.8M  │
└──────────┴────┴─────┴────┴──────┘

    Step 10: Extract!

    Click the big green button: "Extract & Upload to Flow"

    MoreWhat helphappens:

    Status message appears:

    • Without Claude: "Uploading to Flow..."
    • With Claude: "Analyzing table with Claude AI..."

    Processing time:

    • Simple tables: 2-5 seconds
    • With Claude AI: 5-10 seconds

    Success message:

    ✓ Success! Uploaded 150 rows to Flow 
dataset "Country Population 2024"

    Error message (if something goes wrong):

    See
    README.md
    🔐 Flow Authentication Failed

Details: Invalid username or checkpassword.

💡 Suggestion: Update your Flow credentials 
in "Configure Flow Credentials".

    Step 11: View in Flow

    1. Go to Flow Immersive (a.flow.gl)
    2. Navigate to a Flow and your datasets via the terminalManage output

      Datasets button
    3. Find the dataset by the title you entered

    💡 Tips & Tricks

    📊Tip Usage1: ExamplesTest Your Credentials

    If you're getting authentication errors:

    WikipediaQuick Data:Test:

    1. Go to "List of countries by population"a.flow.gl
    2. EnableTry Claudelogging AIin with your credentials
    3. If it works there but not in the extension:
      • Make sure you're using USERNAME (multi-rownot headers!)email)
      • Re-enter credentials in the extension

    Tip 2: Documentation Button

    Click the blue "📖 Docs" button in the extension header to:

    • Read detailed documentation
    • See troubleshooting guides
    • Learn advanced features

    Tip 3: Multiple Tables

    If a page has many tables:

    1. Extract →them Uploadone toat Flowa time
    2. AnalyzeUse indifferent Flow!dataset titles
    3. Or use the same title for versions

    Tip 4: Complex Tables

    Wikipedia tables often have complex structures:

    1. Check "Use Claude AI"
    2. Takes a bit longer
    3. Much better results!

    YourExample: Company"List Dashboard:of largest companies" on Wikipedia

    🔧 Troubleshooting

    Problem: "Cannot connect to backend server"

    Solution: The backend server is hosted and should always be running. If you see this error:

    1. OpenWait dashboarda withmoment dataand tablestry again
    2. SelectCheck tableyour internet connection
    3. Upload toContact Flow forif analysis
      4. problem

    Financial Reports:

    1. Find tables on investor sites
    2. Enable Claude for grouped columns
    3. Extract clean datapersists

    🔄Problem: Updates"Flow Authentication Failed"

    ToCause: updateWrong credentials:username or password

    Solution:

    1. Click extension icon
    2. Click "Configure Flow Credentials"
    3. UpdateMake anysure fieldyou're using:
      • USERNAME (not email)
      • Correct password
    4. Test login at flowimmersive.com first
    5. Re-enter credentials and save

    Problem: Claude AI checkbox is grayed out

    Cause: No Claude API key configured

    Solution:

    1. Click "Configure Flow Credentials"
    2. Add your Claude API key
    3. Save
    4. Checkbox will become available

    Problem: Upload is slow

    ToNormal add/changespeeds:

    • Simple tables: 2-5 seconds
    • Claude AI parsing: 5-10 seconds
    • Very large tables: up to 30 seconds

    If slower:

    • Check your internet connection
    • Wait for timeout message
    • Try again

    📖 Common Workflows

    Workflow 1: Quick Wikipedia Data Extract

    1. Go to Wikipedia article with data
    2. Click "FT" icon
    3. Select table from dropdown
    4. Enter title: Wikipedia - [Topic Name]
    5. Leave Claude unchecked (try it first)
    6. Click "Extract & Upload to Flow"
    7. If table looks messy in Flow:
      • Try again with "Use Claude AI" checked

    Workflow 2: Complex Financial Table

    1. Navigate to financial report website
    2. Find the data table
    3. Click "FT" icon
    4. Select table
    5. Enter title: Q4 2024 Financial Report
    6. ✓ Check "Use Claude AI" (complex table!)
    7. Click "Extract & Upload to Flow"
    8. Wait 5-10 seconds
    9. View perfectly formatted data in Flow!

    Workflow 3: Regular Data Updates

    Same dataset, multiple versions:

    1. Extract table from website
    2. Use same dataset title each time
    3. Example: Weekly Sales Report
    4. Flow creates new version automatically
    5. Track changes over time!

    ✅ Setup Checklist

    Before using the extension:

    • Downloaded and unzipped extension
    • Installed in Chrome (chrome://extensions/)
    • Enabled Developer mode
    • Pinned extension to toolbar
    • Configured Flow credentials
    • (Optional) Added Claude API key: Same as above - it's in the credentials form.

      🎯 System Requirements

      • Browser: Chrome, Edge, or Bravekey
      • OS:Tested Windows,on Mac,a orsimple Linux
      • Internet: Required for Flow uploads and Claude AItable

      You're ready to extract tables! 🎉

      🎓 Pro User Tips

      Dataset Organization

      Use consistent naming:

      • Company - Data Type - Date
      • Example: Acme Corp - Sales - 2024-Q4

      Claude AI Usage

      Save money:

      1. Try without Claude first
      2. If table is messy → Use Claude
      3. Simple tables don't need it!

      Version Control

      Track data over time:

      1. Use same title weekly/monthly
      2. Flow creates versions automatically
      3. Compare changes in Flow

      EnjoyHappy smartTable table extraction!Extracting! 🚀📊✨

    Back to top