Google Chromeの拡張機能、DeepLが使える翻訳プラグインをブラウザに

ブラウザ拡張機能、｢Simple Translate｣という翻訳プラグインで、複数のブラウザで同じ様に使う方法

更新メモ
＠2025/09/26: タイトルや見出し変更・記事を加筆修正、特に記事の前半部

導入
Google Chromeの拡張機能、DeepLが使える翻訳プラグインをブラウザに 組み込むと、複数のブラウザで同じ品質 (＆翻訳のクセ、クオリティ、言い回し、語調など) で英語サイトが読めるようになる話。

手順のところでは画像入り(ScnSht,Cap)で分かりやすい解説！

以下に挙げる「♦︎ 対象・想定読者」「♦︎ 実現できる事」「♦︎ この記事の趣旨」、そして特に「♦︎ ユースケース」の項目において、“自分にとって” 便利か・有用か を見極め、参考になるようなら手順に従って導入してみると良いでしょう😊

♦︎ 対象・想定読者

• ブラウザを2つ以上使う人で　リンク先サイトが英語だった場合の日本語文章の自然さのバラツキにイライラしたことがある人　
• 訳文の出る場所がサイドバーなことが気に入らない人
• 訳すまでの行程=ステップが多いことが気に入らない人
  • 🆖例: ステップが多い. ❶文章を範囲選択 → ❷サイドバーを開く → ❸コピペ (→ ❹訳すクリックor自動)→ ❺訳文が出る
  • ⭕️例: ステップが少ない. ❶文章を範囲選択 →(自動: 遅延で)→ 訳文が出る
• DeepL のFree版 APIキーを 取得するための詳細な解説や説明がなくてもゲットできる人

♦︎ 実現できる事

• 使用するブラウザの違いによる　訪れたサイト・Webページが英語だった場合の日本語文章の自然さのバラツキに　イライラしなくなる　

ブラウザ拡張機能 の 翻訳プラグイン

• 翻訳プラグインは いくつもある ので類似品(?)に注意が必要
• DeepLの本家が提供するプラグイン｢DeepL：AI翻訳と文章校正ツール｣も別途ある

♦︎ この記事の趣旨
この記事では (本家提供の拡張プラグイン｢DeepL｣を差し置いて)「 Simple Translate 」というプラグインを使って複数のブラウザで同じ翻訳クオリテイを実現する方法を紹介します。

Simple Translate について
｢Simple Translate ｣のアイコンは → 『Ａあ』、これが目安
⚠️デザイン的にも色味的も似てる 『Ａ文』 や 『Ｇ文』 など他の翻訳pluginもあるので要注意

※この記事では複数ブラウザとして Chrome、Vivaldi、Opera、Firefox を例にしています

複数のブラウザ

• Chrome系のブラウザ、Chromeはもちろん、Opera、Vivaldi、Arc、Microsoft Edge などいわゆる「Chromium」ベースのブラウザのこと
• Gecko系のブラウザ、Firefox (Chrome系のブラウザと同じように 拡張機能をDLできるストア=webページがある)

♦︎ ユースケース
webページをまるっと翻訳するのではなく、パラグラフ(段落)ごとに翻訳されたものが読めたら充分、というやり方。
ついでに普段ブラウザを複数使うことがあるので、同じ設定で同じ様な翻訳精度＆翻訳文が出ると便利かな、 否、むしろそうしたい、というヒト向け。

　
目次 〜前文を除いた手順〜

1. DeepL翻訳 APIキーを入手 (無料)
2. ｢Simple Translate｣設定
   2-1. 設定をカスタム
   2-2. 設定をファイルに保存 (あとで他のブラウザでも使用)
3. 使用するブラウザで｢Simple Translate｣をDL
4. 各ブラウザで同じ設定の適用

前文

個人使用での範囲なのでDeepL無料版の文字数制限で、まったくもって問題なし大丈夫、というケースを想定しています。
DeepLの翻訳がより自然でGoogle翻訳よりいいなと思ってるDeepL推奨の立場です。

手順について (上記｢目次｣の順番についての諸注意)

• DeepLを使わないなら 1の『DeepL翻訳 APIキーを入手(無料)』は飛ばしてOK。
  • その場合Google翻訳を選択することになる
  • 自然な翻訳文から少し遠ざかる (DeepL推奨なので)
• 1の『DeepL翻訳 APIキーを入手 (無料)』と　2の『｢Simple Translate｣設定』どちらが先でも構わない
• 複数ブラウザで使う用事がなければ最後の4『各ブラウザで同じ設定の適用』は飛ばしてOK

翻訳文の出し方
この記事では、ブラウザ上で英語ページの 翻訳したい英文(の範囲)を選択したら、翻訳文出る、という様式で説明を進めています。この辺はお好みで変更なりなんなりして下さい。翻訳ボタンのアイコンを出してそれをクリックしたら、とか自動でとか

翻訳文の出し方
こういうのは設定で変更できる、お好みで

• 翻訳ボタンのアイコンを出しそれをクリック ※1
• 自動 (翻訳ボタンのアイコンなし) ※2

※1) icon表示でどの翻訳エンジン使ってるか分かるという利点はある
※2) 訳文出るまでのステップが実質 ❶範囲選択するだけ、で済む

　

1. DeepL翻訳 APIキーを入手 (無料)

｢Simple Translate｣の設定で DeepL を選択すると必要なので入手しておきます。ちなみに翻訳エンジンは DeepL と Google翻訳 の２択。

…の、ページで [無料で登録する] ボタンをクリック、無料版APIのキーをゲットします。APIキーとか認証キーとかいうやつです。

または プラン別の内容を確かめたいなら、ページを少し下にスクロールして 3種あるプラン「DeepL API Free」無料版、｢DeepL API Pro｣¥630/月、｢DeepL API Business｣個別の料金設定 、の内容をチェックします。

( ꒪⌓꒪)/ カンタンなので図説は無し。
本稿のメイン趣旨である、◝(⁰▿⁰)◜ これより以降↓↓ は図説(ScnSht)が付きます。

2. ｢Simple Translate｣設定

2-1. 設定をカスタム

普段メインで使ってるブラウザでいいので、｢Simple Translate｣ の設定をカスタム。

｢Simple Translate｣設定画面
こういう画面です：

1. ブラウザの拡張機能のアイコンがあるところから
2. ｢Simple Translate｣のアイコン 『Aあ』 のやつを選んで右クリックメニュー出して
3. ｢オプション｣から 設定画面 にいく

　
設定画面 - 全般: 検索エンジン ↓↓ココ
DeepLを選んで取得しておいた 認証キーを入力
{cap: 設定：全般 - 検索エンジン}

　
翻訳先の言語、第二言語
英語を日本語に翻訳する設定。En→Ja。 この例では 英語は アメリカ英語にしてる。イギリス英語がいいならイギリス英語に。
{cap: 設定：翻訳先、第二言語}

　
テキスト選択時の動作 ↓↓ココ
例1) 翻訳したい英文(の範囲)を選択したら、翻訳文出る、という仕様

• 3択からは｢翻訳パネルを表示する｣
• ｢翻訳の必要がなければ翻訳ボタンを表示しない｣にはチェックあり

{cap: 設定：webページ - テキスト選択時の動作 3択}

好きにカスタムすべし
自分はコレが使いやすいのでこうしてるだけ
翻訳ボタン表示での クリックするという手間 を省きたい

　
装飾キーが押されたときに翻訳する
この例では [Alt] が押されてるあいだ翻訳を表示する。 いや面倒クサくなったのでキー押されてる間とかやめたんだったワ。 ｢装飾キーが押されたときに翻訳する｣にチェックない状態。
{cap: 設定：webページ - 装飾キー、第二言語に切り替え}

※別に [Alt] じゃなくても、好きなキー or 押さえやすいキー を選択したらいい。 いやコレ[Alt] は設定してる状態なだけ、 ｢装飾キーが押されたときに翻訳する｣にチェック無しなので、もはや関係ない意味ナイ。

　
翻訳の無効化
翻訳の無効化：特に言及すること無し、例はこう。
{cap: 設定：翻訳の無効化}

　
ツールバーポップアップ
例2) 翻訳文(=｢翻訳パネル｣)出るまでのタイムラグ、この例では180ミリ秒
{cap: 設定：ツールバーポップアップ_その１}

※初期値は200ミリ秒だか300ミリ秒だったか…(忘れた)…

完成！ 訳文 出るまで1ステップ
これで自動=遅延で訳文が出る ❶範囲選択するだけ、1ステップで済む 仕様に出来る。

　
ページ翻訳
特に言及すること無し
{cap: 設定：ツールバーポップアップ_その2}

　
翻訳ボタン
この例では一応設定してるが、実際はこれより前の段階の設定 項目で 翻訳ボタン表示しない設定 にしてるので 実は意味ない。
{cap: 設定：翻訳ボタン}

　
翻訳パネル ↓↓ココ
例3) タテヨコ大きさ：500 x 380 (単位px)

※これより コピペの結果文章が 長い場合は翻訳文の領域である｢翻訳パネル｣にスクロールバーが出る

タテヨコ大きさ
お使いのディスプレイの解像度によって自分好みの大きさに

※ちなみに、選択した後 ブラウザ自体の ページをスクロールしたら(当然ながら)この位置関係は変動します

例4) 翻訳パネルの位置：選択範囲の上 (初期値では下)
例5) 翻訳パネルの色：背景色は薄っいブルー、文字色は濃い〜ブルー(てか紺色)
{cap: 設定：翻訳パネル}

好きにカスタムすべし
ディスプレイ設定によっては 500 x 380 は小さいし、フォントサイズ 14px というのも人によっては小さく感じるかも...?

この設定例でのパネルサイズと文字大きさでは小さいかも??
昨今 (上書き時の2025年現在) の現状では、多分ここで挙げた例の設定値では小さいかも

翻訳パネルのスタイル： 500x 300 (単位:px)
フォントサイズ：　　　　　　　14 (単位:pt)

これよりもうちょっと大きめした方がいいかもネ！

　

2-2. 設定をファイルに保存 (後に使用)

｢設定をエクスポート｣の項目から。**[エクスポート]**ボタンをクリックして保存。分かりやすい所に保存。
{cap: 設定：その他}

のちに、他のブラウザで同じ設定を使える様に読インポートしてみ込むので、分かりやすい場所・分かりやすいファイル名で保存する。

設定ファイルはJSON形式

アイコンを表した文字列を冒頭に書き 分かりやすさ追求

設定ファイル名の 例)
[Aあ]SimpleTranslate_Settings.json

　

3. 使用するブラウザで｢Simple Translate｣をDL

いままでの説明で使った DL＆設定作業をしたブラウザ とは別の、

❶ それぞれのブラウザで 拡張ストアの 該当ページを開く
　
🌀Chrome、Vivaldi、Opera の場合：

　
🌀Firefoxの場合：

❷ ”拡張機能を入れる” 的なボタンがあるのでクリックして拡張機能をインストール

1. Chromeの場合：[Chromeに追加する]
2. Vivaldiの場合：[Chromeに追加する]
   1. もしVivaldiでインストールボタンが見当たらない場合、
      Σ【理由】→ Vivaldiの設定いじってて見えなくなってる。
   2. ウェブストアオプションを有効にする：設定 > プライバシーとセキュリティ > Google拡張機能、｢ウェブストア｣ のチェックを入れる。
      {cap: Vivaldi 設定}
      
3. Operaの場合：[Operaにインストール]
4. Firefoxの場合：[Firefoxにインストール]

　

4. 各ブラウザで同じ設定の適用

保存した設定ファイルを各ブラウザでの｢Simple Translate｣で読み込み＆適用させる

1. ブラウザの拡張機能のアイコンがあるところから
2. ｢Simple Translate｣のアイコン 『Aあ』 のやつを選んで右クリックメニュー出して
3. ｢オプション｣をクリックしたら、ブラウザに 設定画面 が出る
4. スクロールして下の方、その他 の項目の｢設定をインポート｣から保存した設定ファイルを適用

{cap: 設定：その他}

これをそれぞれのブラウザで行うと、ブラウザが違っても同じ様な挙動で翻訳文を出すことが出来る。

終わり。

---

更新メモ
＠2025/09/26: タイトルや見出し変更・記事を加筆修正、特に記事の前半部