【公開終了】Grammarly Chrome拡張をDeepLサイト上で有効化するChrome拡張自作した
概要
私は英語の文章を書く時、下記の二つを行うことで英文の品質を上げています。
- 機械翻訳DeepLの文章入力フォームで執筆して日本語翻訳が妥当かどうかリアルタイムで確認する
- 文法校正ツールGrammarlyでスペルミスや構文ミスを修正する。
GrammarlyにはChrome拡張が存在しており、本来であればウェブサイトのテキスト入力ボックス上でリアルタイムに英文を修正できます。
しかしDeepLサイト上だと何故かGrammarly拡張が動きませんでした。
これだといちいちDeepL-Grammarlyサービス間で文章をコピペしながら修正する必要があり、割と不便です。
（DeepLとGrammarlyのデスクトップ版を併用すると制限回避できたのですが、動作不安定でこれも不便...）
そこでサイトの構造を解析し、DeepLの入力フォーム上でもGrammarly Chrome拡張を動作させるChrome拡張を自分で作成しました。
Chrome拡張のストアURLはこちらです。
ソースコードはこちら。（コードって言うほど大した内容はないのですが・・・）
以下、本記事ではGrammarly拡張が動作しなかった理由と自作Chrome拡張のロジックを解説していきます。
Grammarly拡張が動作しなかった理由
基本的に、GrammarlyのChrome拡張はHTMLのテキストボックス入力エリア要素（Textarea）に対して動作します。
ところが、DeepLのテキスト入力ボックスはTextareaであるにも関わらずGrammarlyが動作しません。
ここでDeepLのテキスト要素をよく見ると
data-gramm_editor="false"なんて属性値が。
Stackoverflow上の議論を追ってみると、どうやらこれはGrammarly Chrome拡張の動作を止めるためのカスタム属性らしいです。
Chromeのデベロッパーツールでこの属性を手動削除してみます。
GrammarlyのChrome拡張が動作する時の緑丸アイコンが表示されました。
試しにGrammarly先生に怒られそうな文章を入力してみましょう。
DeepL上でGrammarly Chrome拡張が動いてますね。
以上の動作確認結果から、
DeepLサイトを開いた時に、テキスト入力ボックスから
data-gramm_editor="false"属性を削除する
とすれば、DeepLとGrammarlyの併用という目的が実現できることとわかりました。
自作したChrome拡張では、上記一連のカスタム属性削除作業をDeepLサイトにアクセスするたびに裏でひっそり自動的にやってくれています。
（Chrome拡張用に書いたソースコードはごくごく僅かなんですか、このロジックに気が付くまでが長かった・・・）
Chrome拡張導入以外の方法
個別のChrome拡張を入れるのは嫌だ、ScriptAutoRunnerなどを利用して自分で表示サイトの動作をカスタマイズしたい、といった人向けの方法を紹介します。
DeepLのサイト （https://www.deepl.com/ja/translator） にアクセスした時に下記Javascriptが発動するように設定すればOKです。
const text = document.getElementsByClassName('lmt__source_textarea');
text[0].removeAttribute(`data-gramm_editor`);
やってることは下記の内容です。
- DeepLの入力ボックスをクラス名（lmt__source_textarea）で抽出
- 抽出したデータから
data-gramm_editorを除去
留意事項
この記事を読んでる最中にピンときた方もいると思いますが、おそらくDeepLはGrammarly拡張を意図的に動作しないよう止めてました。
意図的に止めてるくらいだから、Grammarly拡張が動かされると困る何かがあったのかなと思います。サイトが正しく動かなくなるとか。
Chrome拡張全般に言えることですが改めて。
本Chrome拡張を利用してGrammarly拡張を動かしていると、DeepLのサイト上翻訳が正しく動かなくなる可能性があります。この点を留意の上、自己責任での利用をお願いいたします。 🙇♀️
Discussion