Gloss — 選んだところに、訳が流れてくる

動いているところ

下は実際の拡張と同じスタイルシート・同じマークアップで描いています。訳文は台本を読んでいるだけで、通信は行いません。

example.com/reading-in-a-second-language

Reading in a language you are still learning

Marguerite Osei · 8 min read

Most tools hand you a finished block of text. A translation that arrives all at once is a translation you wait for. One that arrives as it is written is one you read. The difference sounds small until you have spent an afternoon in a language you are still learning.

It is not really about speed. It is about whether the translation shows up where you were already looking.

このデモはページの中だけで動きます。ブリッジにも CLI にもつながっていません。

できること

選んだところに、その場で

テキストを選ぶと末尾に小さなボタンが出て、押すとその場からパネルが開きます。ページは開いたまま、読んでいた場所も動きません。

翻訳先は手元の CLI

ローカルの Codex か Claude Code に投げます。どちらも手元の認証をそのまま使うので、翻訳のために API キーを預ける先が増えません。

1 文ずつの解説

訳だけでは足りないときは解説モードへ。文ごとに訳・文法・単語が並ぶので、読めなかった理由まで戻れます。

要約と学習チップス

長い文章には要約が付き、拾っておきたい語には短い解説が付きます。どちらも翻訳と同じリクエストで返るので、呼び出しは増えません。

ページ全体もまとめて

右端の Drawer に本文だけを抽出して順に翻訳します。訳文のブロックを押すと、元のページの該当箇所へ戻れます。

外に出ていかない

外部の翻訳 API は使いません。通信先は自分で起動した 127.0.0.1 のブリッジだけです。

仕組み

ブラウザは必ず Origin を送るので、拡張から codex app-server へ直接つなぐことはできません。あいだに立つのが Rust の小さなブリッジです。

content script 選択を検知してボタンを出す
background ポート経由で翻訳を依頼する
bridge (Rust) 接続ごとに CLI を起動し、行単位で中継する
Codex / Claude Code 訳文を delta で返す

ブリッジが通すのは chrome-extension:// 系のオリジンだけで、Web ページからの接続はハンドシェイクの時点で弾きます。起動できるのもファイル名が codex / claude のプログラムに限られます。

使い方

Chrome ウェブストアには未公開です。手元でビルドして読み込みます。

1
ブリッジを起動する

依存のない Rust の単一バイナリです。CLI 側は自分で起動する必要はありません。
```
pnpm bridge          # ws://127.0.0.1:8791 で待ち受け
```
2
拡張をビルドして読み込む

chrome://extensions →「デベロッパーモード」→「パッケージ化されていない拡張機能を読み込む」で、出力ディレクトリを選びます。
```
pnpm install
pnpm build   # apps/extension/build/chrome-mv3-prod
```
3

選んで、押す

設定画面でエンジン（Codex / Claude Code）と翻訳先の言語を選べば準備完了です。