Codex Browser Bridge
Extension này mở một cửa sổ Chrome/Edge do Playwright điều khiển và tạo cầu nối context giữa browser với Codex chat, Codex CLI hoặc ChatGPT CLI. Có thể lấy element chuyên sâu (HTML/CSS/attributes/selector), ghi chú, console logs, network results, ảnh toàn trang và ảnh một vùng.
Đây không phải là tính năng Integrated Browser có sẵn của VS Code. Thanh công cụ Integrated Browser trong ảnh là UI nội bộ của VS Code; hiện không có extension API công khai để extension bên thứ ba thêm nút vào thanh đó. Vì vậy extension này dùng một cửa sổ trình duyệt riêng và render toolbar Codex trong trang.
Yêu cầu
- VS Code desktop (không hỗ trợ VS Code chạy trên web).
- Node.js và npm, chỉ cần khi build extension.
- Google Chrome hoặc Microsoft Edge. Không cần tải Chromium nếu dùng một trong hai trình duyệt này.
Dùng bản VSIX đã build
Từ thư mục project, build và đóng gói:
npm install
npm run compile
npm run package
Lệnh trên tạo file codex-browser-bridge-0.2.0.vsix.
Cài hoặc cập nhật extension bằng:
code --install-extension ./codex-browser-bridge-0.2.0.vsix --force
Gỡ cài đặt extension bằng CLI:
code --uninstall-extension bigof4.codex-browser-bridge
Hoặc trong VS Code mở Extensions, tìm Codex Browser Bridge, chọn biểu tượng bánh răng → Uninstall, rồi chạy Developer: Reload Window.
Sau đó, trong VS Code chạy Command Palette (Ctrl+Shift+P) và chọn Developer: Reload Window. Phải đóng cửa sổ Chrome cũ trước khi mở lại browser từ extension để nhận toolbar bản mới.
Bạn cũng có thể cài bằng giao diện VS Code: Extensions → ... → Install from VSIX... → chọn file VSIX.
Chạy extension
Chạy manual browser bằng yarn dev
Để mở Extension Development Host và tự động mở browser với URL cần test:
yarn install
yarn dev http://localhost:3100
Hoặc test một URL khác:
yarn dev https://example.com
Lệnh này compile extension rồi mở trực tiếp browser app bằng Playwright, không mở VS Code. Có thể thử chọn element, comment, page context, console/network, screenshot và area screenshot. File kết quả manual được lưu trong .codex-browser-dev/.
Nếu cần test chính extension bên trong VS Code Extension Development Host, dùng:
yarn dev:extension http://localhost:3000
Nếu lệnh VS Code trên máy có tên khác, đặt CODE_BIN trước khi chạy yarn dev:extension.
Trong cửa sổ development, dùng Command Palette để chạy các lệnh bắt đầu bằng Codex Browser Bridge. Đóng cửa sổ development hoặc chạy Close Browser để dừng phiên test.
Mở Command Palette (Ctrl+Shift+P).
Chạy Codex Browser Bridge: Open Browser.
Nhập URL, ví dụ http://localhost:3100/.
Cửa sổ Chrome/Edge mới sẽ mở. Ở góc trên bên phải nội dung trang có toolbar:
- Add Element to Codex: chọn một phần tử; extension copy HTML, CSS và ảnh phần tử.
- Comment: chọn phần tử rồi nhập nhận xét.
- Logs: copy các console logs đã thu thập.
- Network: copy request/response/status và request lỗi.
- Screenshot: chụp toàn trang.
- Area: kéo chuột chọn vùng cần chụp.
Dán bằng Ctrl+V vào Codex/ChatGPT chat composer, hoặc đọc file context được tạo trong global storage của extension.
Giao tiếp với Codex CLI và ChatGPT CLI
Mỗi lần capture, extension luôn tạo một file Markdown portable và cập nhật latest-context.json trong thư mục global storage. Đây là giao thức hand-off chung, không phụ thuộc vào extension chat nào. Context text cũng được copy vào clipboard để dùng thủ công.
Nếu muốn tự động chuyển file cho CLI, đặt các setting sau:
"codexBrowserBridge.cliCommand": "codex",
"codexBrowserBridge.cliArguments": ["exec", "--file", "${file}"]
Có thể thay codex bằng executable của ChatGPT CLI hoặc script riêng. Extension gọi executable trực tiếp, không qua shell. Placeholder hỗ trợ ${file}, ${image} và ${url}; biến môi trường CODEX_CONTEXT_FILE và CHATGPT_CONTEXT_FILE cũng được cung cấp cho CLI. Để CLI tự theo dõi capture mới, đọc file latest-context.json.
Mặc định bản hiện tại dùng integratedBrowserCodex.browserMode = "app": Playwright mở Chrome app không có tab/address bar/menu. Click chuột phải vào vùng nội dung trang sẽ mở menu Codex tùy chỉnh. Menu gồm:
- Back, Forward, Reload: điều hướng và tải lại trang.
- Inspect hoặc Add Element to Codex: bật chế độ chọn element; di chuột để highlight rồi click vào element cần gửi cho Codex.
- Comment on Element: chọn element và nhập nhận xét trước khi gửi.
- Console Logs, Network Results: gửi log console hoặc kết quả network đã thu thập.
- Screenshot: chụp toàn trang.
- Area Screenshot: kéo chuột để chọn vùng cần chụp.
Menu chuột phải được hiển thị ở vị trí con trỏ. Click ra ngoài menu để đóng menu; nhấn Esc để hủy chế độ chọn element hoặc chọn vùng. Nếu trang có menu chuột phải riêng, menu Codex sẽ thay thế menu đó trong cửa sổ browser của extension.
Khi chạy lệnh Open Browser, modal chọn host hiển thị các URL/host đã dùng trước đó và có thể lọc bằng cách gõ trực tiếp; nhập URL mới rồi nhấn Enter để lưu vào lịch sử (tối đa 20 mục).
Để Codex/automation/CLI mở browser theo URL lấy từ nội dung chat, dùng command
Codex Browser Bridge: Open URL from Chat và truyền vào URL hoặc cả đoạn text có URL.
Extension cũng nhận deep-link:
vscode://bigof4.codex-browser-bridge/open?url=https%3A%2f%2fexample.com%2fpage%3Fa%3D1
Deep-link này sẽ mở browser trực tiếp, không hiện Quick Pick. Client vẫn cần gọi command/deep-link
(extension không thể tự đọc nội dung chat nếu client không truyền URL cho nó). Scheme cũ integrated-browser-codex vẫn được nhận để tương thích.
Với phần tử <canvas>, context còn bao gồm kích thước CSS/nội tại, loại context 2D/WebGL và data URL PNG giới hạn kích thước. Khi Codex Link được cài, context Markdown và ảnh element được thêm trực tiếp vào thread bằng command của Codex Link.
Bản đồ tính năng Add Element và schema gửi cho AI
Luồng Add Element được chia thành ba phần để dễ bảo trì và để AI xác định đúng nguồn dữ liệu:
| Tính năng |
File / vị trí |
Form dữ liệu gửi đi |
| Nút chọn element, hover highlight, click capture |
src/injectedScript.ts — setPicking, onMouseMove, onClick |
JSON payload gồm url, tag, id, classes, outerHTML, computedStyle, selector, attributes, textContent, parentHTML, rect |
| Chọn bằng Command Palette / toolbar |
src/browserManager.ts — togglePicker; src/extension.ts — command addElementToCodex |
Kích hoạt picker trong page, không tạo payload riêng |
| Phân tích selector từ webview |
src/webviewBrowser.ts — modal #selector; src/browserManager.ts — analyzeSelector |
Cùng schema element, với thêm selector người dùng nhập |
| Phân tích canvas và các layer động |
src/injectedScript.ts — canvas tracker, collectLayers |
canvas gồm kích thước, context, layerId, zIndex, opacity, blendMode, transform, layers[], drawOperations[], dataUrl |
| Chuẩn hóa context cho Codex |
src/browserManager.ts — handleCapturedElement |
Markdown có các block html, css, json, Canvas layer manifest và đường dẫn screenshot |
| Đưa context và ảnh vào chat |
src/browserManager.ts — sendToCodex, copyScreenshotImageToClipboard |
Mỗi lần chụp chỉ thêm một .md vào thread; PNG được copy vào clipboard dưới dạng image/png để Ctrl+V tạo preview ảnh inline |
layers[] liệt kê các <canvas>, <svg> và phần tử có dấu hiệu là overlay/layer (position, class hoặc id chứa layer), sắp xếp theo z-index rồi thứ tự DOM. Với project canvas động, tracker được cài ở document-start để ghi tối đa 250 thao tác vẽ gần nhất như drawImage, fillRect, clearRect, useProgram, drawArrays và drawElements; lịch sử dài hơn sẽ có cờ drawOperationsTruncated: true. Dữ liệu này là manifest hỗ trợ AI suy luận cấu trúc scene, không phải khẳng định canvas có layer native.
Khi thêm một loại element mới, nên cập nhật theo thứ tự: tạo dữ liệu trong src/injectedScript.ts, thêm type/format Markdown tại src/browserManager.ts, rồi cập nhật bảng schema này trong README.md.
Nếu toolbar không thấy, đảm bảo bạn đã cài đúng VSIX phiên bản hiện tại, đã chạy Developer: Reload Window, đã đóng browser cũ, rồi chạy lại lệnh Open Browser.
Các lệnh có trong Command Palette
- Codex Browser Bridge: Open Browser
- Codex Browser Bridge: Open URL from Chat
- Codex Browser Bridge: Add Element to Chat/CLI
- Codex Browser Bridge: Comment on Element
- Codex Browser Bridge: Add Console Logs to Chat/CLI
- Codex Browser Bridge: Add Screenshot to Chat/CLI
- Codex Browser Bridge: Add Area Screenshot to Chat/CLI
- Codex Browser Bridge: Send Page Context to Chat/CLI — title, metadata, headings, links, visible text và HTML giới hạn kích thước.
- Codex Browser Bridge: Copy Current URL
- Codex Browser Bridge: Clear Console and Network Buffers
- Codex Browser Bridge: Open Latest Context
- Codex Browser Bridge: Close Browser
Chọn trình duyệt
Mặc định extension dùng Chrome đã có trên máy. Trong VS Code Settings, cấu hình:
"integratedBrowserCodex.channel": "chrome"
Có thể chọn "msedge". Nếu muốn Chromium do Playwright tải và quản lý, chạy:
npx playwright-core install chromium
Sau đó đặt "integratedBrowserCodex.channel": "chromium".
Tại sao dùng Playwright?
Webview/Integrated Browser của VS Code bị giới hạn bảo mật và không cung cấp API để extension khác thao tác DOM hoặc gắn công cụ vào giao diện nội bộ của nó. Playwright điều khiển browser thật, nên extension có thể inject picker và lấy DOM/ảnh của các trang khác origin, sau đó chuyển ngữ cảnh đó sang Codex qua clipboard.
