Harbor is an open-source Chrome extension that gives your browser real AI agent powers.
Automate tasks, navigate websites, and complete workflows — powered by the AI model you choose.

Get Started  ·  What is Harbor?  ·  Features  ·  How it works  ·  Docs  ·  Discord

---

What is Harbor?

Harbor is a Chrome extension that runs AI agents inside your browser. Instead of only answering questions, Harbor can control your browser to complete tasks end-to-end.

Tell Harbor what you want to do and it will:

• understand what's on the page (visual + DOM),
• decide the next action,
• click/type/navigate as needed,
• extract and summarize results,
• and keep going until the workflow is complete.

Note

Harbor is open-source and built with a privacy-first mindset. You choose the AI model/provider you want to use.

---

Features

Browser control (agent tools)

• Real browser automation (tabs, navigation, downloads, clipboard, and more)
• Visual perception via screenshots of your active tab
• DOM intelligence for structured page understanding and dynamic layouts
• Smart form handling (detects inputs and fills correctly)
• Self-healing retries when elements change

AI + interaction

• Real-time streaming so you can see progress as the agent works
• Optional context persistence (memory)
• Provider switching in settings
• Command Center (default: Ctrl+K)
• Custom profiles for different workflows

Privacy & security

• No telemetry / no usage analytics (open-source for auditing)
• Encrypted API key storage (stored on your machine)
• Granular permissions: you decide what the agent can access

---

Quick Start

Prerequisites

Before you begin, ensure you have:

• Node.js 18.0+ — Download here
  • Check: node --version
• npm 9.0+ — Comes with Node.js
  • Check: npm --version
• Git — Download here
  • Check: git --version
• Chrome, Brave, Edge, or any Chromium-based browser

Install Node.js by OS

Windows

1. Go to nodejs.org
2. Download the LTS version
3. Run the installer, accept defaults, click Install
4. Restart your computer
5. Open PowerShell and verify: node --version

macOS

# Option 1: Using Homebrew (easiest)
brew install node

# Option 2: Download from nodejs.org
# Download LTS, run the installer, follow prompts

# Verify:
node --version

Linux

# Ubuntu/Debian
sudo apt-get update
sudo apt-get install nodejs npm

# Fedora/CentOS
sudo dnf install nodejs npm

# Arch
sudo pacman -S nodejs npm

# Verify:
node --version

---

1) Install Harbor

Option A: From GitHub (Recommended)

All Platforms (Windows, macOS, Linux):

git clone https://github.com/owenawsong/Harbor-Extension.git
cd Harbor-Extension
npm install
npm run build

These commands work identically on:

• Windows (PowerShell or Git Bash)
• macOS (Terminal)
• Linux (Terminal/bash)

What happens:

1. git clone... downloads Harbor into a new Harbor-Extension folder
2. cd Harbor-Extension enters that folder
3. npm install installs all dependencies (takes 1-2 minutes)
4. npm run build creates the dist/ folder your browser will load

Verification: You should see a dist/ folder created in the Harbor-Extension directory.

Option B: From a Release

1. Download the latest release ZIP from Releases
2. Extract it to your desired location
3. Skip to Step 2 below

---

2) Load Into Your Browser

Harbor works on Chrome, Brave, Edge, and any Chromium-based browser.

Chrome / Chromium

1. Open chrome://extensions/ in your address bar
2. Toggle Developer Mode ON (top right)
3. Click Load unpacked
4. Select your Harbor-Extension/dist/ folder
5. The ⛵ Harbor extension appears in your extensions menu

📌 Pinning Harbor to Your Toolbar (Optional but Recommended):

• Click the puzzle icon 🧩 in your toolbar
• Find Harbor in the list
• Click the pin icon next to it
• Harbor will now appear directly in your toolbar for easy access

Brave Browser

1. Open brave://extensions/
2. Toggle Developer Mode ON (top right)
3. Click Load unpacked
4. Select your Harbor-Extension/dist/ folder
5. The Harbor extension appears in your toolbar

Microsoft Edge

1. Open edge://extensions/
2. Toggle Developer Mode ON (left sidebar)
3. Click Load unpacked
4. Select your Harbor-Extension/dist/ folder
5. The Harbor extension appears in your toolbar

Other Chromium Browsers (Vivaldi, Opera, etc.)

1. Open [browser-name]://extensions/
2. Enable Developer Mode
3. Click Load unpacked
4. Select the dist/ folder

---

3) Verify Installation

✅ Harbor is working if:

• The ⛵ Harbor icon appears in your toolbar
• Clicking it opens a side panel with Chat, Settings, and other tabs
• No errors in the browser console (F12 → Console)

❌ Troubleshooting:

Issue	Solution
dist/ folder not found	Run npm run build from Harbor-Extension directory
Extension doesn't appear	Refresh chrome://extensions/ or restart browser
"Load unpacked" button missing	Make sure Developer Mode is toggled ON
Extension crashes	Check F12 → Console tab for error messages
"Manifest error"	Ensure loading from dist/, not src/

---

4) Connect an AI Provider

1. Click the ⛵ Harbor icon in your toolbar
2. Click Settings ⚙️
3. Select your provider

Get API Keys:

• Claude: console.anthropic.com
• ChatGPT: platform.openai.com
• Gemini: aistudio.google.com
• Ollama: ollama.ai (local, no key needed)
• OpenRouter: openrouter.ai

4. Paste your API key and click Save

---

5) Try It

Open the Harbor side panel and give it a task:

"Find the best coffee makers under $50 with 4+ star reviews."
"Compare flight prices from NYC to London for March and summarize the best option."
"Fill this registration form using the info from my LinkedIn profile."

---

How it works (architecture)

Harbor is a Chrome Manifest V3 extension with a decoupled architecture:

┌──────────────────────────────────────┐
│         React Side Panel             │  ← UI, Settings, Chat Interface
└──────────────────┬───────────────────┘
                   │ Chrome Runtime Messages
┌──────────────────┴───────────────────┐
│      Service Worker (Background)     │  ← Agent Logic, API Orchestration
└──────────────────┬───────────────────┘
                   │ Content Bridge
┌──────────────────┴───────────────────┐
│           Content Script             │  ← DOM Manipulation, Screenshots
└──────────────────────────────────────┘

---

How it works (architecture)

Harbor is a Chrome Manifest V3 extension with a decoupled architecture:

┌──────────────────────────────────────┐
│         React Side Panel             │  ← UI, Settings, Chat Interface
└──────────────────┬───────────────────┘
                   │ Chrome Runtime Messages
┌──────────────────┴───────────────────┐
│      Service Worker (Background)     │  ← Agent Logic, API Orchestration
└──────────────────┬───────────────────┘
                   │ Content Bridge
┌──────────────────┴───────────────────┐
│           Content Script             │  ← DOM Manipulation, Screenshots
└──────────────────────────────────────┘

Hot Reload During Development

1. Run npm run dev (rebuilds on file changes)
2. Go to chrome://extensions/
3. Click the reload icon on Harbor

---

Contributing

Contributions are welcome: bugs, features, docs, and ideas.

1. Check existing issues
2. Open a new issue or pull request
3. Follow CONTRIBUTING.md

---

License

MIT — Free for personal and commercial use. See LICENSE for details.

---

Built with React, TypeScript, Vite, and Tailwind CSS.

Star on GitHub  ·  Get Started  ·  Join the Community