opencode-annotate 1.2.0
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.
- package/LICENSE +674 -0
- package/README.md +105 -0
- package/dist/plugin.js +619 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# <img src="https://raw.githubusercontent.com/jodusnodus/opencode-chrome-annotation/main/icon.svg" width="60" align="center" /> OpenCode Chrome Annotation
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.com/package/opencode-annotate)
|
|
4
|
+
> Fork of [JodusNodus/opencode-chrome-annotation](https://github.com/JodusNodus/opencode-chrome-annotation), published as `opencode-annotate`. GPL-3.0.
|
|
5
|
+
[](https://github.com/jodusnodus/opencode-chrome-annotation/blob/main/LICENSE)
|
|
6
|
+
|
|
7
|
+
Annotate any page in Chrome and send the screenshot, selected element metadata, and your instruction directly into [OpenCode](https://opencode.ai).
|
|
8
|
+
|
|
9
|
+
> **This is a fork** of [jodusnodus/opencode-chrome-annotation](https://github.com/jodusnodus/opencode-chrome-annotation) with quality-of-life and routing changes described below. The upstream npm package and Chrome Web Store listing serve the original; this repo's `main` is self-contained and not published to npm.
|
|
10
|
+
|
|
11
|
+
## What's different in this fork
|
|
12
|
+
|
|
13
|
+
- **Annotation queue.** Pick mode stays on after each annotation so you can batch feedback, then send everything in one click. The connection bar shows a queue badge with a panel to review, remove, clear, or send all. The queue survives service worker restarts (`chrome.storage.session`).
|
|
14
|
+
- **Element screenshots.** Each queued annotation crops the captured viewport to the selected element instead of shipping the full page.
|
|
15
|
+
- **Chat locking.** Annotations now go to the chat you picked, always. Sub-agent sessions can no longer hijack routing, placeholder sessions are rejected with a clear message instead of silently rerouting, and prompts are delivered to the target session's own project directory.
|
|
16
|
+
- **All chats, grouped.** The picker lists every open chat (not just the most recent one), grouped under project headers, with a Linked badge and a refresh button. The bar shows which chat you are linked to; clicking its name switches chats.
|
|
17
|
+
- **Security.** The local server no longer reflects arbitrary web origins into `Access-Control-Allow-Origin`, so random web pages cannot read your chat titles over the localhost port.
|
|
18
|
+
- **Robustness and restyle.** 10s timeout on screenshot capture (it can hang when a tab navigates mid-annotation), and a white/black/pastel UI.
|
|
19
|
+
|
|
20
|
+
## Install (this fork)
|
|
21
|
+
|
|
22
|
+
1. Clone and build:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
git clone https://github.com/eagleeyejack/opencode-chrome-annotation
|
|
26
|
+
cd opencode-chrome-annotation
|
|
27
|
+
bun install
|
|
28
|
+
bun run build
|
|
29
|
+
bun run build:extension
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
2. Point your OpenCode config at the built plugin (absolute path to `dist/plugin.js`):
|
|
33
|
+
|
|
34
|
+
```json
|
|
35
|
+
{
|
|
36
|
+
"$schema": "https://opencode.ai/config.json",
|
|
37
|
+
"plugin": ["/path/to/opencode-chrome-annotation/dist/plugin.js"]
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
3. Load the generated `extension/` directory unpacked from `chrome://extensions`.
|
|
42
|
+
|
|
43
|
+
If you would rather run the original upstream instead: add `opencode-chrome-annotation@latest` to your OpenCode config and install the extension from the Chrome Web Store:
|
|
44
|
+
|
|
45
|
+
https://chromewebstore.google.com/detail/abeihanpaeioklkhioiigklonbomhjfd
|
|
46
|
+
|
|
47
|
+
## How It Works
|
|
48
|
+
|
|
49
|
+
1. Start OpenCode in your project.
|
|
50
|
+
2. Click the extension button in Chrome.
|
|
51
|
+
3. Connect the current tab to a specific OpenCode chat from the in-page picker (grouped by project, with the linked chat badged).
|
|
52
|
+
4. Click **Annotate** in the in-page pill.
|
|
53
|
+
5. Select an element, write your instruction, then **Add to queue** (keep going) or **Add & finish**.
|
|
54
|
+
6. Open the queue from the bar and hit **Send all to OpenCode** when you are done.
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
### What Gets Sent
|
|
58
|
+
|
|
59
|
+
- Your written instruction.
|
|
60
|
+
- The current page URL and title.
|
|
61
|
+
- Selected element metadata such as selector, tag, text, role, aria label, and bounds.
|
|
62
|
+
- A screenshot saved locally by the plugin and referenced in the OpenCode prompt.
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
### Troubleshooting
|
|
66
|
+
The plugin runs a local HTTP server bound to `127.0.0.1` on ports `39240-39260`. The extension discovers the active OpenCode plugin instance over localhost.
|
|
67
|
+
|
|
68
|
+
- The extension can't start a new session, you need to be in an active OpenCode session to connect.
|
|
69
|
+
- If the extension can't find any session, ask your agent to run `chrome_status` that should give a detailed report.
|
|
70
|
+
- Make sure OpenCode and your Chromium browser exist in the same localhost network (not in seperate containers).
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
## Development
|
|
74
|
+
|
|
75
|
+
### Plugin
|
|
76
|
+
|
|
77
|
+
The OpenCode plugin source lives in `src/plugin.ts`. The published package entrypoint is generated at `dist/plugin.js`.
|
|
78
|
+
|
|
79
|
+
Install dependencies:
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
bun install
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Build the plugin:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
bun run build
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Extension
|
|
92
|
+
|
|
93
|
+
The Chrome extension source lives in `extension-src/`. The loadable extension output is generated into `extension/` and is not tracked by git.
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
bun run build:extension
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Then load the generated `extension/` directory from `chrome://extensions`.
|
|
100
|
+
|
|
101
|
+
To create the Chrome Web Store upload zip:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
bun run build:zip
|
|
105
|
+
```
|