browser-annotations 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +94 -18
  2. package/dist/.vite/manifest.json +1 -1
  3. package/dist/manifest.json +1 -1
  4. package/package.json +6 -3
package/README.md CHANGED
@@ -1,30 +1,106 @@
1
- # browser-annotations
1
+ # Browser Annotations
2
2
 
3
- Annotate elements and send them to your agents right from your Chrome DevTools.
3
+ Select elements in the Chrome DevTools, write feedback, and send it to your coding agent.
4
4
 
5
- ## Install
5
+ Install the [Chrome extension](#chrome-extension) and use it with [pi](#pi) or [Claude Code](#claude-code).
6
6
 
7
- ```bash
8
- pnpm install -g browser-annotations
9
- ```
7
+ ![Sending feedback from the Chrome DevTools to pi.](docs/screenshot.png)
8
+
9
+ ## Features
10
+
11
+ - **Annotate elements** – Select any element and write your feedback
12
+ - **Live agent collaboration** – Send feedback directly to your [pi](#pi) or [Claude Code](#claude-code) session
13
+ - **Complete context** – Includes an element's selector, position, size, viewport, device info, and a screenshot
14
+ - **Source mapping** – Links elements to React and Svelte source code during development
15
+ - **Batch annotations** – Combine feedback across multiple elements and pages
16
+ - **Works everywhere** – Lives in your DevTools, works on any website
17
+ - **Clipboard mode** – Copy feedback as markdown for any workflow
18
+
19
+ ## Installation
20
+
21
+ ### Chrome extension
22
+
23
+ 1. Install with `pnpm install -g browser-annotations`
24
+ 2. Open `chrome://extensions` and enable **Developer mode**
25
+ 3. Click **Load unpacked** and select `~/browser-annotations/chrome`
26
+
27
+ **Updates:** Run `pnpm update -g browser-annotations` and reload the extension in `chrome://extensions`
28
+
29
+ ### pi
30
+
31
+ 1. Install with `pi install git:github.com/wiebekaai/browser-annotations`
32
+ 2. Start pi with `pi`
33
+ 3. Run `/browser-annotations`
34
+
35
+ **Updates:** Run `pi update` in pi
36
+
37
+ ### Claude Code
10
38
 
11
- Open `chrome://extensions`, enable **Developer mode**, click **Load unpacked**, and select:
39
+ 1. Start Claude Code with `claude`
40
+ 2. Add the marketplace with `/plugin marketplace add wiebekaai/browser-annotations`
41
+ 3. Install the plugin with `/plugin install claude@browser-annotations`
42
+ 4. Restart with `claude --dangerously-load-development-channels plugin:claude@browser-annotations`
12
43
 
13
- - `~/browser-annotations/chrome` — created automatically during install
14
- - or the `dist` folder in your package manager's global directory, if you prefer no symlink
44
+ **Updates:** Run `/plugin update claude@browser-annotations` in Claude Code
15
45
 
16
46
  ## Usage
17
47
 
18
- 1. Use the Chrome DevTools to select an element
19
- 2. Write your feedback in the `Feedback` tab
20
- 3. Use `Add` to batch annotations
21
- 4. Hit `Submit` to notify your agent or copy to clipboard
48
+ 1. Choose your mode
49
+ - **Webhook on** — Send feedback directly to your agent (see [pi](#pi) or [Claude Code](#claude-code) setup)
50
+ - **Webhook off** — Copy feedback as markdown to your clipboard
51
+ 2. Select an element in the Chrome DevTools
52
+ 3. Write your feedback in the <img src="docs/feedback-tab.png" alt="Feedback tab" height="20" /> tab (drag this tab to the left so it's easily accessible)
53
+ 4. Use <img src="docs/icon-add.svg" alt="Add" /> to batch annotations. Annotations persist per website, so your feedback can span multiple pages
54
+ 5. Hit <img src="docs/icon-send.svg" alt="Send" /> to send to your agent, or <img src="docs/icon-copy.svg" alt="Copy" /> to copy as markdown
22
55
 
23
- ## Agent integration
56
+ > [!TIP]
57
+ > Even when using a webhook, <kbd><kbd>⌘</kbd> <kbd>X</kbd></kbd> / <kbd><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>X</kbd></kbd> copies to clipboard. Handy for quick sharing.
24
58
 
25
- For sending feedback straight to your agent, see the [pi](https://browser-annotations.dev/) and [Claude Code](https://browser-annotations.dev/) setup guides.
59
+ ### Keyboard shortcuts
26
60
 
27
- ## Links
61
+ | Action | Shortcut |
62
+ | --------------- | ----------------------------------------------------- |
63
+ | Inspect element | <kbd><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>C</kbd></kbd> |
64
+ | Add | <kbd><kbd>⌘</kbd> <kbd>Enter</kbd></kbd> |
65
+ | Submit | <kbd><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>Enter</kbd></kbd> |
66
+ | Copy current | <kbd><kbd>⌘</kbd> <kbd>X</kbd></kbd> |
67
+ | Copy all | <kbd><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>X</kbd></kbd> |
68
+ | Clear current | <kbd><kbd>⌘</kbd> <kbd>K</kbd></kbd> |
69
+ | Clear all | <kbd><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>K</kbd></kbd> |
70
+ | Cancel / Reset | <kbd>Esc</kbd> |
28
71
 
29
- - [Documentation](https://browser-annotations.dev/)
30
- - [GitHub](https://github.com/wiebekaai/browser-annotations)
72
+ ### Example output
73
+
74
+ ```md
75
+ # Feedback
76
+
77
+ Please refine the homepage
78
+
79
+ ## 1. `div:nth-of-type(4) > h2.section-title`
80
+
81
+ Title should be 24px
82
+
83
+ ![Screenshot](/tmp/browser-annotations/screenshot-1.png)
84
+
85
+ - **Page:** [http://localhost:5173/](http://localhost:5173/)
86
+ - **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36`
87
+ - **Viewport:** 1497×879
88
+ - **Device pixel ratio:** 2
89
+ - **Position:** X 407, Y 206
90
+ - **Size:** 684×36
91
+ - **Source:** [`pages/index.tsx:42`](pages/index.tsx)
92
+
93
+ ## 2. `p.docs-button > a[href="/packages"]`
94
+
95
+ This should open the sidepanel with packages
96
+
97
+ ![Screenshot](/tmp/browser-annotations/screenshot-2.png)
98
+
99
+ - **Page:** [http://localhost:5173/](http://localhost:5173/)
100
+ - **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36`
101
+ - **Viewport:** 1497×879
102
+ - **Device pixel ratio:** 2
103
+ - **Position:** X 407, Y 616
104
+ - **Size:** 159×48
105
+ - **Source:** [`components/DocsButton.tsx:8`](components/DocsButton.tsx)
106
+ ```
package/dist/.vite/manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "../../../../../../@crx/manifest": {
3
- "file": "assets/crx-manifest.js-C7Uo5mdi.js",
3
+ "file": "assets/crx-manifest.js-sKtwFxJ8.js",
4
4
  "name": "crx-manifest.js",
5
5
  "src": "../../../../../../@crx/manifest",
6
6
  "isEntry": true
package/dist/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "manifest_version": 3,
3
3
  "name": "Browser Annotations",
4
4
  "description": "Capture feedback from the Chrome DevTools.",
5
- "version": "1.0.3",
5
+ "version": "1.0.5",
6
6
  "icons": {
7
7
  "16": "icon.png",
8
8
  "32": "icon.png",
package/package.json CHANGED
@@ -1,10 +1,13 @@
1
1
  {
2
2
  "name": "browser-annotations",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Annotate elements and send them to your agents right from your Chrome DevTools.",
5
- "homepage": "https://browser-annotations.dev/",
5
+ "homepage": "https://browser-annotations.dev",
6
6
  "license": "MIT",
7
- "repository": "wiebekaai/browser-annotations",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/wiebekaai/browser-annotations.git"
10
+ },
8
11
  "files": [
9
12
  "README.md",
10
13
  "dist",