こんにちは(๑╹ω╹๑ )
絶好のプログラミング日和ですね😊
今日は😋
タイトルの通り🤗
ページ閲覧中に選択した文字列をリアルタイム翻訳する
Google Chromeの拡張機能を開発しました🎉
Stinrg Selection To Google Translation On Chrome Extension
※即席で開発したので名前は適当です🤫
きっかけ
普段英語のドキュメントを読む際にGoogle翻訳を利用してページを一括翻訳していました😅
その際にコードブロックも翻訳されることが多々有り不便に感じていました😢
実際には部分翻訳のみで良い場合が多々あり、
文字列の選択時にリアルタイムで翻訳結果をプレビュー出来ないか🤔
という想いで開発しました！
↓簡易アーキテクト図↓
Stinrg Selection To Google Translation On Chrome Extension
Google翻訳の公式拡張機能でも同様のプレビューは可能ですが、
- 日本語に翻訳する
- 英語に翻訳する
のどちらかを選択する必要がありました。
片方向のみの翻訳を行うことは機会としてあまりないため、
- 選択した文字列に日本語が含まれていれば、英語に翻訳する
- 選択した文字列に日本語が含まれていなければ、日本語に翻訳する
という相互翻訳に対応させました👏
/**
* Is Japan String
*
* @param {string} target_str
*/
function __is_ja_str(
target_str
)
{
return /[\u3041-\u3096\u30A1-\u30FA\u3400-\u9FFF\uF900-\uFAFF\uF900-\uFAFF\u3000-\u301C]/.test(target_str);
}
a-zとA-Zという含有チェックでは日本語が含まれている可能性があるため、
日本語の含有チェックで処理を走らせています！
また、Content Scripts側でGASに非同期通信をするとクロスオリジンとなるため、
BackgroundでGASと非同期通信を行っています！
※非同期通信を行うBackgroundとContent Scriptsを相互に対話させる処理の開発に少し時間がかかりました
GASからGoogle翻訳を利用する際に公式サイトを確認したのですが、
特に従量課金に関する特記事項はありませんでした😲
ですが、拡張機能のソースにアクセストークンをベタ貼りするわけにもいかないので、
OSSにしました🎉
※browser_actionで設定ページ作成しました
まとめ
アクセストークンの取得方法はGitHubを確認してください🙇♂️
野良Extensionの有効化方法やGASの基本操作等は割愛します🙏
改変や再配布は自由です🙆♂️
その際はコメント欄でお知らせ頂けると🥺
プレビューした翻訳結果が画面内で邪魔になることがあるので、
削除出来る機能も後々に加えようと思っています🤭
↑対応しました🎉
それと翻訳結果の簡易プレビューウインドウの位置座標が、
うまく書けていないので適切な座標で表示できるよう修正しようと思っています🙇♂️
↑ドラック＆ドロップの実装で対応しました🎉
文章を選択する度翻訳に走ってしまうのが憂いだったので、
選択終了時にAltキー（MacはOptionキー）を押下している場合のみに、
翻訳が走るように仕様変更しました😇
ありがとうございました(๑╹ω╹๑ )