Dobby AI

Select text or screenshot any region on the web — get instant AI answers right where you are.

Zero tab-switching · Inline AI responses · Visual intelligence · Smart content detection

---

Dobby AI is a Chrome extension that brings AI directly into your browsing workflow. Select text to get instant explanations, or long-press anywhere to screenshot a region and ask AI about what you see — charts, diagrams, code, error messages, anything on screen. All responses appear in a frosted glass bubble right next to your selection, no tab-switching required.

Why Dobby AI?

Visual intelligence is built in: long-press anywhere on a page for 1 second, drag to select a region, and ask AI about what you see. Answers appear inline, without copy-pasting or tab switching.

Features

Visual Intelligence

• Screenshot any region — long-press 1s anywhere, drag to select, ask AI about charts, diagrams, UI designs, error screenshots, math equations, or anything on screen
• Right-click any image — ask AI about it directly via context menu
• Image selection — select text that contains images and both text + images are sent to AI

Text Intelligence

• Inline AI responses — frosted glass bubble right next to your selection, no tab-switching
• Current-tab context — Dobby extracts useful page headings, nearby text, and main content by default so short selections make sense in context
• Streaming responses — see the AI's answer as it's generated, with live markdown rendering
• Smart content detection — automatically detects code, errors, math, emails, data, foreign languages and suggests relevant presets
• Language-aware — responds in the same language as your selected text
• Follow-up conversations — ask follow-up questions within the same bubble, with full chat history
• Preset prompts — one-click actions like "Explain", "Debug", "Summarize", "Translate"
• Custom instructions — click the pencil icon to type any prompt inline

UX

• Pin & drag — pin the chat bubble and drag it anywhere on the page
• Resize — drag the corner handle to resize the bubble
• Chat history — browse and resume past conversations
• Light/dark theme — matches your OS preference
• Shadow DOM isolation — bubble UI won't conflict with page styles

Quick Start

Chrome Web Store

Install from the Chrome Web Store — one click and you're ready.

Manual Installation

git clone https://github.com/Duobi-AI/dobby-ai.git
cd dobby-ai
npm install
npm run build

1. Open chrome://extensions in Chrome
2. Enable Developer mode (toggle top-right)
3. Click Load unpacked → select the dist directory
4. Go to the extension's Options page to set your OpenAI API key (optional — 30 free questions/day without one)

Usage

Text Selection

Select text → Click floating trigger → Pick a preset → AI responds inline

Screenshot Mode

Long-press 1s → Drag to select region → Capture → AI analyzes the image

Context Menu

Right-click any image → "Dobby AI" → AI describes/analyzes the image

Architecture

Built with TypeScript and React, bundled with esbuild. The extension and its Cloudflare proxy are kept in separate source trees.

dobby-ai/
├── src/                            # Extension TypeScript/React source
├── proxy/src/                      # Cloudflare Worker source
├── tests/                          # Unit tests
├── e2e/                            # Playwright browser tests
├── manifest.json                   # Chrome extension manifest (MV3)
└── esbuild.config.js              # Build config — src/ → dist/

Development

npm install           # Install dependencies
npm run typecheck     # Run strict TypeScript checks
npm run build         # Build the extension → dist/
npm run dev           # Watch mode — auto-rebuilds on file changes
npm test              # Run tests
npm run test:e2e      # Build and run Playwright extension tests
npm run test:watch    # Run tests in watch mode

After building, load dist/ as an unpacked extension in Chrome. With npm run dev, the extension auto-rebuilds on file changes — just reload the extension in Chrome to pick up changes.

Production extension and proxy modules are TypeScript and must pass strict mode with noUncheckedIndexedAccess. The esbuild-only tsconfig.build.json disables the emit-only alwaysStrict option because esbuild bundles the extension as IIFEs and enabling it would change the shipped runtime output. Before submitting a change, run:

npm run typecheck
npm run build
npm test
npm run test:e2e

Smart Detection

When you select text, the detection engine analyzes it to suggest relevant presets:

Content Type	Detection	Example Presets
JavaScript	const, let, =>, console.log	"Explain this JavaScript", "Convert to TypeScript"
Python	def, self, elif, True/False/None	"Explain this Python", "Add type hints"
Rust	fn, let mut, impl, println!	"Explain this Rust", "Optimize"
Chinese/Japanese/Korean	Unicode character ranges	"Summarize", "Translate to English"
Error/Stack trace	Error:, Traceback, at file:line	"Explain error", "Suggest fix"
Email	Dear/Hi + Regards/Best	"Draft reply", "Summarize email"
Math formula	LaTeX patterns, math operators	"Solve this", "Explain formula"
Images	Screenshot or right-click	"Explain this image", "Extract text"

CI/CD

Workflow	Purpose
ci.yml	Extension build/tests, proxy tests, manifest linting, Playwright E2E, and packaging on every push/PR
coverage.yml	Main and PR coverage reporting with an 80% threshold
security.yml	Root and proxy npm audit, dangerous pattern scan, and manifest permission audit
pr-preview.yml	Built extension artifact from dist/, plus PR preview comment and permission diff
permission-guard.yml	Fails PRs that add extension permissions until they are reviewed
auto-label.yml	Applies PR labels based on changed files
release.yml	Tag-based build, GitHub Release, and Chrome Web Store publish
version-bump.yml	Manual version bump branch and release PR creation
token-count.yml	Updates the repository token-count badge
deploy-proxy.yml	Tests and dry-runs proxy changes on PRs; deploys the Worker after a merged PR or confirmed manual dispatch

E2E tests run inside ci.yml; there is no separate e2e.yml workflow.

Cloudflare proxy deployment

The deploy-proxy.yml workflow is limited to changes under proxy/. Pull requests run proxy tests and wrangler deploy --dry-run without Cloudflare credentials. A push to the protected main branch (the repository's PR-only workflow) runs the same validation before deploying the production Worker. Manual production deployment is available through workflow_dispatch, but requires checking the deployment confirmation and using the main branch. The deploy job uses the production GitHub environment and queues concurrent deployments instead of cancelling an in-flight production run.

Before enabling deployment, configure these secrets on the production GitHub environment:

• CLOUDFLARE_ACCOUNT_ID — the account containing dobby-ai-proxy.
• CLOUDFLARE_API_TOKEN — a custom Cloudflare token using the Edit Cloudflare Workers template, scoped only to that account and the resources needed by this Worker. Do not use a global API key or commit the token.

Add required reviewers or other protection rules to the production environment if deployments need an explicit human approval. See the Cloudflare GitHub Actions guide and GitHub deployment environments for the provider setup details.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feat/your-feature)
3. Write tests for your changes
4. Run npm run build && npm test to verify
5. Submit a pull request

Privacy

Dobby AI does not collect accounts, cookies, advertising identifiers, prompts, page content, or API keys. It sends one daily anonymous usage event with aggregate request and outcome counters split between free-proxy and own-key mode, a random installation ID, and the extension version. See PRIVACY.md for details.

License

No license file is currently included in this repository.

---

Built with a dislike for copy-pasting and tab-switching