OWL Grab

Select context for coding agents directly from your Odoo website.

Hover over any element in your Odoo UI, press Cmd+C or Ctrl+C, and get the OWL component name, tree, and HTML — ready to paste into Cursor, Claude Code, Copilot, or any coding agent.

Adapted from react-grab for Odoo OWL 2.x (Odoo 17+).

---

How It Works

OWL Grab walks the component tree from the root (odoo.__WOWL_DEBUG__) and matches DOM elements to their owning OWL components. When you copy an element, it produces context like:

<button class="btn btn-primary" name="action_confirm">
  Confirm
</button>
  in SaleOrderForm
  in FormView
  in ActionContainer

Paste this into any coding agent and it knows exactly which component to target.

---

Installation

Prerequisites: Node.js >= 18 and pnpm >= 8. Install pnpm with npm install -g pnpm if you don't have it.

All methods are read-only — OWL Grab only inspects the component tree and never modifies your Odoo instance. It runs independently of Odoo, so Odoo upgrades and patches won't affect it.

Method	Persists?	Best for
Console snippet	No	Quick one-off inspection
Odoo Addon	Yes	Day-to-day development
Browser Extension	Yes	Any Odoo instance, no server access needed

Console Snippet

Paste in your browser DevTools console (F12) on any Odoo page:

fetch("https://cdn.jsdelivr.net/gh/picoSols/owl-grab@main/packages/react-grab/dist/index.global.js")
  .then(r => r.text()).then(eval);

Clears on page refresh — leaves zero footprint on your Odoo instance.

Why eval? Odoo's Content Security Policy blocks external <script> tags and blob URLs. Code entered directly in DevTools is exempt from CSP, including eval calls initiated from the console. This won't work from page-level JS — for that, use the Browser Extension or Odoo Addon.

Bookmarklets don't work on Odoo pages due to CSP restrictions. Use the console snippet above, or install the browser extension for a one-click toggle.

Odoo Addon

Installs as a standalone Odoo module. Only activates in debug mode (?debug=1). Does not patch or modify any core Odoo code — safe to install alongside upgrades.

git clone https://github.com/picoSols/owl-grab.git
cd owl-grab
pnpm install && pnpm build
cd odoo_addon && ./sync.sh && cd ..

# Symlink into your addons path
ln -s "$(pwd)/odoo_addon/owl_grab" /path/to/odoo/addons/owl_grab

Then restart Odoo, update the apps list, and install OWL Grab.

To update: git pull && pnpm build && cd odoo_addon && ./sync.sh and restart.

Docker users: Symlinks don't work inside Docker volume mounts. Instead, mount the addon folder directly into a directory that is already on your addons_path (e.g. your extra-addons volume):

# docker-compose.yml
volumes:
  - ./owl-grab/odoo_addon/owl_grab:/mnt/extra-addons/owl_grab

Alternatively, copy the owl_grab/ folder into your custom-addons directory.

How the addon works

The addon places files in static/lib/ instead of static/src/ to avoid Odoo 18's automatic ES module transpilation. A small loader checks odoo.debug and injects the bundle as a plain <script> tag, bypassing the Odoo module system entirely.

Browser Extension

Works on any Odoo instance, including localhost. No server access needed. Runs entirely in the browser sandbox — nothing is installed on your Odoo server, and Odoo updates will never break it.

pnpm install && pnpm run extension:build

Then load in Chrome (or any Chromium browser):

1. Go to chrome://extensions
2. Enable Developer mode
3. Click Load unpacked and select packages/web-extension/dist

Click the extension icon to toggle OWL Grab on or off.

---

Usage

Shortcut	Action
Cmd+C / Ctrl+C	Copy element context to clipboard
Right-click	Context menu with additional actions
Arrow keys	Navigate between sibling and parent elements
Click + drag	Select multiple elements at once

Data Attributes

Attribute	Effect
data-owl-grab-ignore	Element is skipped during selection
data-owl-grab-frozen	Element state is frozen during inspection

---

Using with Odoo Customizations

OWL Grab is a read-only inspection tool. It helps you identify components and views but does not modify your Odoo instance.

To make changes that survive Odoo upgrades:

1. Grab the component context with OWL Grab
2. Paste it into your coding agent (Claude Code, Cursor, Copilot, etc.)
3. Write the change in a custom addon module

Always use Odoo's inheritance mechanisms in your custom addons:

• patch() for JS/OWL component overrides
• xpath for XML view and template changes
• Never modify core Odoo source files

---

Claude Code Bridge

Connect the browser UI directly to Claude Code. Select an element, describe the change, and Claude Code edits the file on your machine.

./bridge.sh /path/to/odoo/repo

This starts a WebSocket relay on port 4500 that receives context from the browser, runs Claude Code via @anthropic-ai/claude-agent-sdk, and streams progress back to the overlay.

Requires the claude CLI installed and authenticated, and Node.js 18+.

---

Plugins

Extend OWL Grab via the global API:

window.__OWL_GRAB__.registerPlugin({
  name: "my-plugin",
  hooks: {
    onElementSelect: (element) => console.log("Selected:", element.tagName),
  },
  actions: [
    {
      id: "my-action",
      label: "My Action",
      shortcut: "M",
      onAction: (ctx) => {
        console.log("Action on:", ctx.element);
        ctx.hideContextMenu();
      },
    },
  ],
});

window.__REACT_GRAB__ is also available for backward compatibility.

---

Building from Source

pnpm install                 # install dependencies
pnpm build                   # build core library
pnpm dev                     # development mode (watch)
pnpm run extension:build     # build browser extension

Requires Node.js >= 18 and pnpm >= 8.

---

Project Structure

odoo_addon/                  Installable Odoo module (debug-mode only)
packages/
  react-grab/                Core library (OWL-adapted)
  web-extension/             Browser extension (Chrome / Edge)
  grab/                      Bundled package (library + CLI)
  cli/                       CLI tool
  mcp/                       MCP server integration
  provider-cursor/           Cursor agent provider
  provider-claude-code/      Claude Code agent provider
  provider-copilot/          Copilot agent provider
  provider-codex/            OpenAI Codex agent provider
  provider-gemini/           Gemini CLI agent provider
deploy.sh                    Build + deploy helper
bridge.sh                    Claude Code bridge server

---

React Grab vs OWL Grab

	React Grab	OWL Grab
Framework	React (Fiber tree)	OWL 2.x (component tree)
Target	React apps	Odoo 17+ / 18 web client
Detection	__reactFiber$ on DOM nodes	Walk from odoo.__WOWL_DEBUG__ root
Source mapping	File paths via source maps	Component names (OWL has no runtime source info)
Install	npm / build plugin	Console, addon, or extension
Global API	window.__REACT_GRAB__	window.__OWL_GRAB__

---

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT

Originally based on react-grab by Aiden Bai. OWL framework adaptation and Odoo-specific features by picoSols.

Acknowledgements

• react-grab by Aiden Bai — the original project this fork is built on. Core architecture, UI overlay, plugin system, and agent integrations all originate from react-grab.
• Prism by Akshith Ambekar — inspiration for framework-agnostic component tree traversal techniques.