OpenCode Chrome Annotation：將瀏覽器標記直接轉化為代碼實作 / Bridge the Gap from Browser Annotations to Code Implementation

直覺地在 Chrome 中標記 UI 需求並同步至 OpenCode 會話，大幅提升前端開發效率。 / Intuitively annotate UI requirements in Chrome and sync them to OpenCode sessions to accelerate frontend development.

🔎 工具速覽 / AT A GLANCE

Category	Developer Productivity / IDE Plugin
Pricing	Free / Open Source
BestFor	Frontend Developers, UI/UX Engineers, Product Managers
GitHub Stars	⭐ 14

🚀 引言 / Introduction

OpenCode Chrome Annotation 是一款強大的開發者工具，它打破了瀏覽器與編輯器之間的壁壘。開發者可以直接在活頁面上選取 UI 元素並添加指令，將上下文即時傳送到 OpenCode 會話中，徹底消除重複描述需求的時間成本。 / OpenCode Chrome Annotation is a powerful developer tool that breaks the barrier between the browser and the editor. Developers can select UI elements on live pages and add instructions, sending the context instantly to an OpenCode session, eliminating the time cost of repetitive requirement descriptions.

🛠️ 核心功能 / Key Features

Direct Element Selection: Select any live UI element and capture its metadata instantly.

直接元素選取：能即時選取任何活頁面上的 UI 元素並捕捉其元數據。

Contextual Synchronization: Send comments, metadata, and screenshots directly to your active OpenCode session.

上下文同步：將評論、元數據及螢幕截圖直接發送到您當前啟動的 OpenCode 會話。

Intuitive In-Page UX: Features a draggable annotation pill and a seamless session picker for efficient workflow.

直覺的頁面內體驗：提供可拖動的標記懸浮窗與無縫的會話選擇器，優化工作流。

Local Setup Integration: Works via your local OpenCode configuration for secure and fast communication.

本地設置集成：通過本地 OpenCode 配置運行，確保通信安全且快速。

💡 技術亮點 / Tech Highlights

Visual-to-Code Pipeline: Transform visual feedback into actionable code context without leaving the browser.

視覺到代碼的管線：無需離開瀏覽器，即可將視覺反饋轉化為可執行的代碼上下文。

Reduced Communication Friction: No more manual screenshots and long descriptions; send the exact element and intent.

降低溝通摩擦：不再需要手動截圖和冗長的描述，直接發送精確的元素與意圖。

Developer-Centric Design: Includes keyboard shortcuts and a snap-to-edge UI to minimize distraction.

開發者中心設計：內建快捷鍵與邊緣吸附 UI，最大限度減少干擾。

📦 快速上手 / Quick Start

1. Install the plugin package in your OpenCode environment and add 'opencode-chrome-annotation' to your config.json.

1. 在 OpenCode 環境中安裝插件包，並將 'opencode-chrome-annotation' 添加至 config.json 配置中。

2. Install the OpenCode Chrome Annotation extension from the Chrome Web Store.

2. 從 Chrome 網路商店安裝 OpenCode Chrome Annotation 擴充功能。

3. Start OpenCode in your project and click the extension button in Chrome to connect the current tab.

3. 在項目中啟動 OpenCode，並點擊 Chrome 擴充功能按鈕連接當前分頁。

4. Click 'Annotate', select a UI element, write your instruction, and submit to implement the change.

4. 點擊 'Annotate'，選取 UI 元素，輸入指令並提交即可開始實作修改。

準備好試試 OpenCode Chrome Annotation：將瀏覽器標記直接轉化為代碼實作 / Bridge the Gap from Browser Annotations to Code Implementation 了嗎？

Ready to try OpenCode Chrome Annotation：將瀏覽器標記直接轉化為代碼實作 / Bridge the Gap from Browser Annotations to Code Implementation?

前往 GitHub 頁面 →