Menu
Browser extension that connects web context to local/remote Hermes Agent runtime via side panel
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Browser-based interface for viewing and filtering OpenClaw session tool call history with zero dependencies for local network deployment.
AI-powered quantitative research and backtesting platform with end-to-end workflow from research to strategy publication
Give your AI assistant a phone — OpenClaw plugin for real phone calls via Twilio + OpenAI Realtime API with in-call tools, transcripts, and call screening
Run multi-model consensus panels (Lite or Heavy) with your own agent backends—no hosted middleware, your models, your rules.
Build a multi-role JARVIS-style voice assistant with local ASR/TTS, OpenClaw LLM gateway, voice wake words, HUD effects, and speaker verification
Use 37 battle-tested marketing skills covering CRO, copywriting, SEO, paid ads, email, growth, and strategy with real data connectors for Google Ads, Search Console, Meta Ads, and X/Twitter
| name | hermes-browser-extension |
| description | Browser extension that connects web context to local/remote Hermes Agent runtime via side panel |
| triggers | ["install the hermes browser extension","set up hermes browser side panel","connect browser to hermes agent","configure hermes browser extension","use hermes with browser context","send webpage content to hermes","attach browser context to hermes","troubleshoot hermes browser extension"] |
Skill by ara.so — Hermes Skills collection.
Hermes Browser Extension is a Chrome/Edge/Chromium side panel that connects active web page context to a Hermes Agent runtime (local or remote). It is not a standalone chatbot—it's a browser interface for the real Hermes Gateway/API server, accessing your configured models, tools, skills, sessions, memory, and MCP servers.
Key capabilities:
http://127.0.0.1:8642) or remote Hermes API servergit clone https://github.com/abundantbeing/hermes-browser-extension.git
cd hermes-browser-extension
npm install
npm run build
The extension builds to dist/.
chrome://extensions or edge://extensionsdist/ folder (not repo root, not extension/)After code changes, run npm run build and click Reload on the extension card.
# Check that dist/ contains manifest.json with version 0.1.6+
cat dist/manifest.json | grep version
On the machine running Hermes, edit ~/.hermes/.env:
API_SERVER_ENABLED=true
API_SERVER_HOST=127.0.0.1
API_SERVER_PORT=8642
API_SERVER_KEY=your-secret-key-here
API_SERVER_CORS_ORIGINS=chrome-extension://your-extension-id
Find your extension ID at chrome://extensions (looks like abcdefghijklmnopqrstuvwxyz123456).
Start/restart Hermes Gateway:
hermes gateway run
Verify API server is reachable:
curl http://127.0.0.1:8642/health
curl -H "Authorization: Bearer your-secret-key-here" http://127.0.0.1:8642/v1/models
In the extension side panel:
http://127.0.0.1:8642API_SERVER_KEY or scoped browser tokenSummarize this page in one sentence.For remote Hermes (same LAN, Tailscale, VPN), bind to reachable interface:
API_SERVER_ENABLED=true
API_SERVER_HOST=0.0.0.0
API_SERVER_PORT=8642
API_SERVER_KEY=your-secret-key-here
API_SERVER_CORS_ORIGINS=chrome-extension://your-extension-id
Security: Use private network/VPN with HTTP, or put behind HTTPS reverse proxy. Never expose Hermes API server naked to public internet.
Example URLs:
http://192.168.1.50:8642
http://hermes-desktop.local:8642
https://hermes.example.com
In extension:
http:// or https://)If you only expose the OAuth-gated Hermes dashboard (no API server):
https:// URLLimitations: image attachments inline-only, skills/profiles unavailable (REST-only).
# Side panel captures active tab automatically
Summarize this page
Explain the main concept here
What are the key action items on this page?
The extension includes built-in quick commands:
/summarize - Summarize active page
/explain - Explain main concepts
/rewrite - Rewrite or improve content
/tabs - Analyze all open tabs
/action-items - Extract action items
Click the context menu in composer header to choose:
Click microphone icon in composer:
After each turn, expand "What Hermes saw" to inspect:
This is the exact context sent to Hermes.
// From a content script, send message to background
chrome.runtime.sendMessage({
type: 'HERMES_PROMPT',
payload: {
message: 'Summarize this page',
context: {
url: window.location.href,
title: document.title,
selectedText: window.getSelection().toString()
}
}
});
// From extension context (popup, side panel, background)
import { getSettings } from './lib/storage';
const settings = await getSettings();
console.log('Gateway URL:', settings.gatewayUrl);
console.log('Theme:', settings.appearance?.theme);
console.log('Context mode:', settings.browserBehavior?.contextScope);
// From content script (extension does this automatically)
const context = {
url: window.location.href,
title: document.title,
selectedText: window.getSelection().toString().trim(),
readableText: document.body.innerText.slice(0, 50000),
metadata: {
description: document.querySelector('meta[name="description"]')?.content,
author: document.querySelector('meta[name="author"]')?.content
},
headings: Array.from(document.querySelectorAll('h1, h2, h3')).map(h => ({
level: h.tagName,
text: h.textContent.trim()
})),
links: Array.from(document.querySelectorAll('a[href]')).slice(0, 50).map(a => ({
text: a.textContent.trim(),
href: a.href
}))
};
// Extension internal pattern
async function streamHermesResponse(sessionId, messages, signal) {
const response = await fetch(`${gatewayUrl}/v1/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
session_id: sessionId,
messages,
stream: true
}),
signal
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
buffer = lines.pop();
for (const line of lines) {
if (line.startsWith('data: ') && line !== 'data: [DONE]') {
const data = JSON.parse(line.slice(6));
const content = data.choices?.[0]?.delta?.content;
if (content) {
// Append to UI
yield content;
}
}
}
}
}
// Extension appearance settings
const themes = {
nous: { primary: 'rgb(79, 70, 229)', secondary: 'rgb(99, 102, 241)' },
midnight: { primary: 'rgb(59, 130, 246)', secondary: 'rgb(96, 165, 250)' },
ember: { primary: 'rgb(249, 115, 22)', secondary: 'rgb(251, 146, 60)' },
mono: { primary: 'rgb(71, 85, 105)', secondary: 'rgb(100, 116, 139)' },
cyberpunk: { primary: 'rgb(236, 72, 153)', secondary: 'rgb(244, 114, 182)' },
slate: { primary: 'rgb(100, 116, 139)', secondary: 'rgb(148, 163, 184)' }
};
// Apply theme
function applyTheme(themeName, colorMode) {
const theme = themes[themeName];
document.documentElement.style.setProperty('--color-primary', theme.primary);
document.documentElement.style.setProperty('--color-secondary', theme.secondary);
document.documentElement.classList.toggle('dark', colorMode === 'dark');
}
Extension does not use .env files directly. Configuration is stored in Chrome storage and managed via settings UI.
For Hermes Gateway API server (machine running Hermes):
# ~/.hermes/.env
API_SERVER_ENABLED=true
API_SERVER_HOST=127.0.0.1
API_SERVER_PORT=8642
API_SERVER_KEY=<use-env-var-or-secret-manager>
API_SERVER_CORS_ORIGINS=chrome-extension://<extension-id>
Never commit API keys. Use $(hermes auth token create --scope browser) to generate scoped tokens, or reference secrets from environment/vault.
dist/, not repo rootmanifest.json directlychrome://extensions shows version 0.1.6+# Verify API server is running and reachable
curl http://127.0.0.1:8642/health
# Check models endpoint with auth
curl -H "Authorization: Bearer your-key-here" http://127.0.0.1:8642/v1/models
Common issues:
API_SERVER_ENABLED=true not set in ~/.hermes/.envhermes gateway run)API_SERVER_KEY or extension API keyAPI_SERVER_CORS_ORIGINS)Browser cached old unpacked folder:
npm run build to generate fresh dist/chrome://extensionsdist/Extension cannot read restricted pages:
chrome:// or edge:// internal pageschrome-extension:// pagesOn normal https:// pages, check:
/v1/capabilities for STT supportHermes Browser Extension is read-only. It does not have browser control permissions (debugger, click, type, form submit).
For native computer use:
# On machine running Hermes
hermes tools list
hermes computer-use status
Computer use comes from Hermes Agent's computer_use toolset via cua-driver, not the browser extension.
Extension origin must be allowlisted on Hermes API server:
# ~/.hermes/.env
API_SERVER_CORS_ORIGINS=chrome-extension://your-extension-id-here
Find extension ID at chrome://extensions. Restart hermes gateway run after changing.
/api/sessions in Hermes to see active sessionsExtension auto-falls back to non-streaming if:
stream: trueCheck gateway logs for streaming errors. Non-streaming mode still works.
Extension is intentionally conservative:
debugger, nativeMessaging, cookies, history, downloads, bookmarks127.0.0.1:8642 unless you configure remoteSee repo docs: SECURITY.md, PERMISSIONS.md, DATA-FLOW.md, PRIVACY.md.
dist/ # Built extension (load this)
extension/
manifest.json # MV3 manifest with side_panel, activeTab, scripting
background.js # Service worker, message routing
sidepanel/
index.html # Side panel UI entry
app.jsx # Main React app
content/
content-script.js # Page context capture
lib/
hermes-client.js # Hermes API/WebSocket client
storage.js # Chrome storage wrapper
context-capture.js # DOM scraping logic
git clone https://github.com/abundantbeing/hermes-browser-extension.git
cd hermes-browser-extension
npm install
npm run build
# On Hermes machine, edit ~/.hermes/.env:
# API_SERVER_ENABLED=true
# API_SERVER_HOST=127.0.0.1
# API_SERVER_PORT=8642
# API_SERVER_KEY=<secret>
# API_SERVER_CORS_ORIGINS=chrome-extension://<id>
hermes gateway run
# In browser: chrome://extensions → Load unpacked → select dist/
# In side panel: Connect to Hermes → Local gateway → http://127.0.0.1:8642 → paste key → Test → Save
Settings → Localhost agent picker:
Port 8642 - Default gateway
Port 8643 - Dev gateway
Port 8644 - Testing gateway
Click to switch. Extension stores per-port settings.
# On remote Hermes machine
API_SERVER_HOST=0.0.0.0
API_SERVER_PORT=8642
API_SERVER_CORS_ORIGINS=chrome-extension://<id>
# In extension
# Remote gateway → http://100.x.y.z:8642 → paste key → Test → Save
In side panel:
/tabs
# Or manually:
List all my open tabs and summarize each one
Extension sends tab list (title, URL) for all open tabs to Hermes.
This skill covers: installation, local/remote configuration, context capture, voice dictation, quick commands, streaming, theming, security model, and troubleshooting for the Hermes Browser Extension.