じゅのぶろ

社内SEが自宅でSOC/CSIRTするために色々頑張っていきたいブログ 画像が見れない場合はjavascriptを有効にするかデスクトップからご覧下さい。

HTB Academy向けの翻訳Chrome拡張作ってみた。

HTB

（2026/6/27追記） HTB 公式からAI翻訳機能が出てましたね。この拡張はもう不要ですね。

拡張機能もこの記事もほとんどAIが作っています。利用は自己責任でお願いします。

HTB Academy をコードを壊さずに翻訳する Chrome 拡張を作った

HTB Academy のモジュールを進めていると、英語の長文を読んでいるだけで時間が溶けていくことがよくありました。気づいたら一日終わっている、みたいなやつです。

ブラウザの全体翻訳を使えば一応読めるんですが、今度は別の問題が出てきます。
ls -la が変な日本語になったり、/etc/passwd のパスが分解されたり、シェルの出力が崩れて「これ何の結果だっけ？」となったり。

もちろん最終的には英語のまま読めるのが理想だとは思っています。ただ、空き時間で進めていると「とりあえず内容だけ把握したい」という場面も普通にあるので、そのための割り切りです。

そこで、HTB Academy のモジュールページ専用で、コードやコマンド、シェル出力には触らない翻訳拡張を作りました。

リポジトリ:
https://github.com/jnox22/Unofficial-HTB-Academy-Translator

同じようなツールがすでにありそうな気もするんですが、自分が探した範囲では見つけられなかったので、とりあえず作っています。もし知っていたら教えてください。

ブラウザ標準の翻訳だと何が起きるか

これは見た方が早いので比較を置いています。

ブラウザ標準の翻訳だと、<code> ブロックの中まで翻訳対象になります。シンタックスハイライト用に細かく分割されている要素（キーワードや文字列など）単位で翻訳されるので、結果的にコードがバラバラになります。

そのまま実行できない「日本語混じりの何か」になることも珍しくありません。

スクリーンショットは、HTB Academy の無料 Tier 0 モジュール Windows Fundamentals を使っています。有料コンテンツは含まれていません。

Original: 元の英文

original


Before: ブラウザ標準の翻訳機能

before


After: HTB Academy Translator

after

After 側では、コードブロックはそのまま、本文だけ翻訳されているのが分かると思います。

どんな拡張か

やっていることはシンプルで、HTB Academy のモジュールページ
（https://academy.hackthebox.com/app/module/*/section/*）でアイコンを押すと、本文だけ翻訳されます。

特徴をざっくり挙げるとこんな感じです。

  • <pre> と <code> の中身は触らない
  • Chrome 138+ の Translator API（オンデバイス）を使用
  • API キー不要、追加コストなし
  • SPA のページ遷移に追従（Next / Previous など）
  • <a> や <strong> などの構造を壊さない
  • 29言語対応（デフォルトは日本語）

ChatGPT API を使う案も考えましたが、キー管理と従量課金が地味に面倒でやめました。
Chrome の Translator API はローカルで完結するので、この用途にはかなり合っていると思います。

使い方

chrome://extensions でデベロッパーモードをオンにして、リポジトリを読み込むだけです。

初回は設定ページが開くので、翻訳先言語を選んで保存します。
あとは対象ページでアイコンを押せば翻訳されます。

もう一度押すと元に戻ります。

内部の話（ざっくり）

細かいところはいろいろやっていますが、ポイントだけ。

  • ブロック単位で翻訳して二重処理を防ぐ
  • <code> や <a> をプレースホルダに置き換えてから翻訳して戻す
  • バッチ処理＋並列処理＋リトライで速度を確保
  • 出力崩壊っぽい結果は検知してフォールバック
  • スナップショットを持っておいていつでも戻せる
  • SPA の遷移をフックして自動再翻訳

このあたりは実装しないと地味に困る部分でした。

セキュリティについて

気になる人も多いと思うので、一応。

  • 外部通信はしていません
  • フォームや入力欄は触りません
  • 保存するのは言語設定だけ
  • 権限も最低限にしています

翻訳自体もオンデバイスなので、内容がどこかに送られることはありません。

既知の制限

まだ作りかけなので、いくつか制限があります。

  • 動的に追加されたコンテンツは翻訳されない
  • 拡張をリロードすると元に戻せなくなる（ページリロードで復帰）
  • リンクテキストは翻訳しない
  • デバイス非対応の言語は使えない

まとめ

翻訳ツールやブラウザ内 Copilot など、選択肢はいろいろ増えてきましたが、

  • 英語を読むのに毎回時間を取られる
  • APIキー管理や従量課金が面倒
  • 翻訳でコードが壊れるのがストレス

といったあたりに引っかかっている人には、そこそこハマると思います。

Chrome の Translator API はまだ新しめですが、「特定サイト専用の翻訳拡張」みたいな用途にはかなり相性がいい印象です。

ライセンスは MIT です。
Issue / PR / フィードバックなどあれば気軽にどうぞ。

あと、同じ用途のツールを知っていたらぜひ教えてください。