はじめに
英語学習をする際のブラウザ機能拡張の定番といえばYouTube/Netflixなら「Language Reactor」、Amazon Prime Videoなら「Subtitles for Language Learning (SLL)」ですよね。
英語と日本語の字幕を同時で表示できるので大変便利です。
私もこれらには大変お世話になってきました。
しかし、日本最大級のラインナップを誇るU-NEXTで映画を楽しもうとしたとき、ふと思ったのです。
「U-NEXTでも同じように英語字幕を表示して、効率的に学習したい……！」
残念ながら、U-NEXTで動作する同様のツールが見当たらなかったため、拡張機能を自作することにしました。
英語の字幕ファイルをダウンロードして日本語字幕と同時に表示させます。
1. 作ったもの：Subtitle for U-NEXT
今回開発したのは、U-NEXTの動画プレイヤー上に、外部のSRT字幕ファイルを重ねて表示・同期させるChrome拡張機能です。
主な機能
- OpenSubtitles APIとの連携: 検索窓に作品名を入れるだけで、世界最大級の字幕サイトから最適な英語字幕を即座に取得できます。
- 同期マネージャー: 「字幕と音声が少しズレているな」と感じた際、セリフ一覧から選んでボタンを押すだけで、現在の再生位置にピタッと合わせることができます。
- リアルタイム設定: 字幕のサイズや表示位置（高さ）を、動画を再生したままリアルタイムに調整可能です。
- 動画ごとの設定保存: 一度設定した同期オフセットやフォントサイズは、動画ごとに自動保存されます。次に同じ作品を観るときも、設定の手間は一切ありません。
2. 技術的なポイント（Manifest V3対応）
この拡張機能は最新のManifest V3で構築しています。開発にあたって、少しこだわった（苦労した）ポイントをご紹介します。
ブラウザ特有の403 Forbidden制限をスマートに突破する
OpenSubtitles APIをブラウザのfetchで直接叩こうとすると、通常はCORS制限やUser-Agentの保護によって「403 Forbidden」エラーで弾かれてしまいます。
開発者ツール（Talend API Testerなど）からは通るのに、拡張機能からだと動かない……という、エンジニアなら誰もが一度は頭を抱える問題です。
今回は、declarativeNetRequest APIを使用して、リクエストがブラウザを出る瞬間にヘッダーを動的に書き換える処理を実装しました。
// background.js の実装イメージ
chrome.declarativeNetRequest.updateDynamicRules({
addRules: [{
id: 1,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [
{ header: "User-Agent", operation: "set", value: "FastSubtitleFinder" },
{ header: "Origin", operation: "remove" }
]
},
condition: {
urlFilter: "[https://api.opensubtitles.com/](https://api.opensubtitles.com/)*",
resourceTypes: ["xmlhttprequest"]
}
}]
});
これにより、サーバー側からは「信頼できるアプリケーションからのアクセス」として正しく認識されるようになり、ブラウザからの直接通信を安定させることができました。
3. セットアップ手順
現在は開発者・学習者向けのソースコード公開という形をとっています。以下の手順で、ご自身の環境に導入することが可能です。
① ソースコードのダウンロード
まずは、拡張機能の本体となるソースコード一式を準備しましょう。
- GitHubリポジトリにアクセスするか、以下のリンクから直接パッケージをダウンロードしてください。
- ダウンロードされたZIPファイルを右クリックし、**「すべて展開」**を選択します。
- 展開先を確認して「展開」ボタンを押し、デスクトップなどご自身の分かりやすい場所にフォルダを保存してください。
② APIキーの取得
本ツールは OpenSubtitles.com のAPIを利用して字幕を検索します。
-
公式サイトでアカウントを作成します。
右上の「登録」からアカウントを作成してください。
-
API Consumers ページから新しいConsumer（アプリ）を登録します。
-
重要： 登録時に 「Under dev」 にチェックを入れてください。これにより、個人利用の範囲内であれば1日100件まで無料で字幕をダウンロードできるようになります。
「Name」と「Descirption」は任意の値を入力してください。
-
発行された
API key(Appキー)と、登録したName(App Name)をメモしておいてください。
※下線は「60日以上ダウンロードを行っていないAPIは、自動的に削除される」という意味です。削除された場合は再度作成してください。
③ 拡張機能の読み込み
Google Chromeにこのツールを認識させます。
- Chromeのアドレスバーに chrome://extensions/ と入力して開きます。
- 右上にある 「デベロッパーモード」 をONにします。
- 表示された 「パッケージ化されていない拡張機能を読み込む」 ボタンをクリックします。
- 手順①で展開したフォルダを選択してください。
- U-NEXTの再生画面（ video.unext.jp/play/* ）を開くと、自動的にツールが起動します！
④ 拡張機能でのAPI設定
取得したキーをツールに登録すれば準備完了です。
-
U-NEXTのビデオ再生画面を開きます。
-
本ツールの検索バー右側にある 鍵アイコン（🔑） をクリックして設定パネルを開きます。
-
控えておいた
App NameとAPI keyを入力し、**「設定を保存」**をクリックしてください。
（※ここにAPI設定入力後のキャプチャ画像）
-
保存完了のメッセージが出れば、英語字幕を検索できるようになります。作品名は日本語のタイトルではなく原題で検索するとヒットする確率が高いです。
4. おわりに
今後もUIのさらなる改良などカスタマイズ予定です。
ソースコードはこちらで公開しています。もし興味を持っていただけたら、Starなどで応援いただけると非常に励みになります！
GitHub リポジトリ: Subtitle-for-U-NEXT
免責事項：本ツールは非公式の学習支援ツールであり、U-NEXT公式とは一切関係ありません。個人の学習目的の範囲内で、利用規約を遵守してご利用ください。