動機
これまで使っていたYouTubeの二重字幕拡張機能が使えなくなり、エラーの原因を調べているうちに「拡張機能ってどうやって作るんだろう」と興味を持ち、勉強も兼ねて自作してみることにしました。
作ったもの
YouTubeの英語字幕の中から「難しい英単語」だけをハイライトする拡張機能を作りました。
- 難しい単語のみを強調表示
- マウスホバーで日本語の意味を表示
デモ
YouTube字幕上で難単語がハイライトされ、ホバーで意味が表示される様子です。
技術
- TypeScript
- Chrome Extension（Manifest V3）
- Plasmo
実装と課題
1. 難単語データの作成
難単語を検出するには、まず基準となる単語データが必要です。
しかし「何をもって難しいとするか」の定義に悩みました。
調べたところ、英語にはCEFR（言語能力の国際指標）があるため、これを基準にすることにしました。
使用したデータセット：
https://github.com/Maximax67/Words-CEFR-Dataset
このデータセットは以下のような形式で、単語と難易度（A1〜C2）が紐づいています。
headword;pos;CEFR;CoreInventory 1;CoreInventory 2;Threshold
a;determiner;A1;;;
a.m.;adverb;A1;;;
今回は B1以上（英検準1級相当） の単語を抽出して使用しました。
しかし、このデータだけでは語彙数が不足していました。
そこで、単語頻度ベースのデータも追加しました。
このデータセットは単語の出現頻度をランキング化したもので、上位ほどよく使われる単語です。
ここから「低頻度の単語」を抽出することで、難単語を補完できると考えました。
最終的に、
- CEFRベースの難単語
- 低頻度単語
を統合し、さらにDeepL APIを用いて日本語訳を付与しました。
結果と問題点
実際に使ってみると、いくつか問題がありました。
- 簡単な単語が混ざってしまう
- カバー範囲がまだ不十分
- 文脈なし翻訳のため日本語訳が不自然
- 動詞の活用（-ing, -ed など）に十分対応できていない
特に単語の正規化（normalize）は大きな課題です。
本来はNLPの手法（lemmatizationなど）を使うべきですが、
- 拡張機能の容量増加
- 処理速度の低下
を懸念し、今回は簡易的に語尾を削る実装にとどめました。
また、辞書データは権利関係が複雑なため公開は控えています。
2. JavaScript → TypeScript への移行
開発当初はJavaScriptの知識がほとんどなかったため、
ChatGPTにコードを書いてもらいながら動作確認をしていました。
ただしこの方法だと、
- 拡張機能のリロード
- YouTubeページの再読み込み
を毎回行う必要があり、開発効率が悪いという問題がありました。
そこで調べた結果、Plasmo + TypeScript が良いと知り、作り直しました。
Plasmoの利点
- ファイル保存で自動リロード
- 開発体験が大幅に向上
細かい修正をすぐに確認できるため、かなり快適になりました。
GitHub
おわりに
TypeScriptの良い学習になりましたが、バグ修正などに時間がかかり、完成まで約1か月かかりました。
今後は、
- 単語保存機能の追加
- 辞書精度の改善
などを進めていきたいと考えています。