翻訳用の Chrome 拡張を作った

「選択してそのまま右クリック」で即翻訳できる自分用のChrome拡張を作った話。品質より操作と表示の速さを優先し、Chrome内蔵のTranslator API／LanguageDetectorで端末内翻訳・APIキー不要を実現しました。

Transcript

1. 翻訳用の Chrome 拡張を作った 海外の記事やドキュメントを読むための、自分用の拡張 01
2. 作ったきっかけ 記事の一部分の意味を、すぐに確認したかった 自分の読書用途では、翻訳の品質よりも 操作と結果表示の速さを優先したかった 02
3. DeepL との違い 選択 → 翻訳ボタン／ショートカット。操作ステップ数はほぼ同じ 品質は良いが、自分の用途では待ち時間が気になった 03
4. 選択から、そのまま右クリックで翻訳 1. 左ドラッグでテキストを選択 2. 左ボタンを離さず、そのまま右クリック 3. 選択位置の近くに日本語訳を表示 この一連の動作で、自分にとって最速の操作感を目指した 04
5. デモ 左ドラッグで選択し、左を押したまま右クリック 05
6. 処理の流れ 01 02 03 04 ジェスチャ 言語検出 翻訳 バブル表示 左押下中の右クリック 選択テキストを判定 日本語へ変換 選択位置の近くへ ジェスチャ成立時だけ contextmenu を抑制 06
7. 英語以外の言語にも対応 中国語や韓国語でも、同じ操作で日本語に翻訳 LanguageDetector で言語を自動判定 判定した言語から日本語へ翻訳 検出できない場合は en にフォールバック 07
8. 使用している API Translator API LanguageDetector Chrome 138+ ／ 端末内で翻訳 ／ APIキー不要 初回は言語モデルをダウンロード 待っている間は、進捗を表示 08
9. 実装の構成 Manifest V3 content script 中心 background なし・権限ほぼなし バブルは Shadow DOM でページ CSS と隔離 09
10. 実装時の注意点 contextmenu との競合 ジェスチャ成立時に通常のメニューを抑制 動作しないページ iframe や chrome:// では動かないことがある 標準翻訳メニューの UI は呼べない 結果は自前のバブルで表示 10
11. まとめ 左ドラッグで選択し、そのまま右クリックで翻訳 品質よりも、操作と結果表示の速さを重視 英語以外にも、同じ操作で使える 11