⚽

DeepLのAPIを使ってUdemyの英語講座で日本語字幕を出したい ~序章~

2021/09/15に公開

Chrome拡張

いつからかわからないのですが、Google Chromeの翻訳拡張機能を使っても字幕が日本語に翻訳されなくなっていました。

翻訳したときはちゃんと字幕も日本語になりますが、字幕が切り替わっちゃうと翻訳されずに英語のままだったんですよね。

トランスクリプションの欄を表示させると全て日本語で翻訳されますが、目線移動が頻繁になっちゃうのでちょっと使い勝手が悪いなと感じています。

ので、Chromeの拡張機能開発の勉強がてら自作してみようかなと思った次第です。
普段アプリ開発はやらない(ちょっとしたスクリプト動かすぐらい)のでどうなるか。。。

やってみる

拡張機能は、Manifest V3を使用することに。
翻訳はDeepLを使うことにしました。 APIを使用できるようにアカウントを作っておきます。

※ DeepL APIのfree版は翻訳可能な最大文字数：500,000です。

Udemyの字幕を出していると、切り替わるたびにhtmlが変更されるのでそれを監視し続ければできるのでは？という安易な発想で開始してみました。

こんなイメージ

javascriptのMutationObserverを使って監視してみました。

DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクト

字幕が表示されるhtmlの要素からテキストを抜き出す
一時的な変数に保存
保存されたテキストと新たに取得したテキストを比較し、違っていたら翻訳APIの処理へ進む
翻訳結果を表示する

って感じ

    const elm = document.body;
    const config =  {
        attributes: true, 
        childList: true, 
        characterData: true ,
        subtree: true
    };
    
    let caption;
    let nowString;
    const observer = new MutationObserver(function(){
        caption = $("div[class^='well--container--']").length == 1 ? $("div[class^='well--container--']").text():$("div[class^='captions-display--captions-container']").text();
        if(caption !== '' && nowString !== caption) {
console.log("go transration");
            nowString = caption;
            observer.disconnect();
            $.post(
                'https://api-free.deepl.com/v2/translate', 
                {
                    "auth_key":"<< your api key >>", 
                    "text":nowString, 
                    "target_lang":"JA"
                }
            ).done(function( data ) {
                $("#hogehoge").text(data.translations[0].text);
            }).always(function() {
                observer.observe(elm, config);
            });
        }
    });
    
    observer.observe(elm, config);

content_scriptsとしてマニフェストに記述し、

"content_scripts": [{
	"matches": ["https://*.udemy.com/*"],
	"js": [
		"src/libs/jquery-3.6.0.min.js",
		"src/libs/jquery-ui.min.js",
		"src/contentScript.js"
	      ]
}],

Chromeの拡張機能管理画面でデベロッパーモードをONにしてローカルにある作成中の拡張機能を読み込んで実験していきます。

結果

エラーなどを修正しつつ実験し、なんとか日本語字幕を表示させることだけは成功しました。

結構便利では？

※ (動画)こんな感じで動いてます

https://youtu.be/tfUo4nU23r8

今後

翻訳のon/off
翻訳サービスのAPI KEYなどを使用者側で登録できるようにしたい
Google翻訳も使えるようにする

などができたらストアに公開できるかもしれない。

DeepLのAPIを使ってUdemyの英語講座で日本語字幕を出したい ~序章~

やってみる

結果

今後

参考資料

Discussion