🌍 英語圏以外の開発者こそ「英語モード」が必要
Dottiqは日本語と英語に対応した多言語サイトです。トップページ(https://www.dottiq.com)ではブラウザのnavigator.language
やAccept-Language
をもとにアクセス時点で日本語ページ(/)か英語ページ(/en/)へ振り分けています。
blogやtoolsなど全コンテンツの英語版は/en/
フォルダにまとまっており、ページごとの言語切り替えではなく最初に判定された言語設定が全体に反映される構成です。
この設計はSEO的にも自然でシンプルですが、日本語環境で開発していると英語ページの表示確認がとにかく不便になります。
😩 「Chromeの設定を毎回いじる」はやってられない
英語表示を確認したいだけなのに、毎回Chromeの設定画面を開いて言語を切り替えるのは面倒すぎます。しかも一度切り替えるとブラウザ全体に影響するため、作業環境も崩れます。
ページ単位でサッと英語環境にして確認できたらどれだけ楽だろう。そう思って拡張機能を探したのですが、理想通りのものがなかったので自分で作ることにしました。
🚀 ENforcerとは?
ENforcerは、クリックするだけでそのタブの言語設定を英語にエミュレートできるChrome拡張機能です。ページのコンテンツを翻訳するのではなく、ブラウザが最初から英語環境であるかのように振る舞わせます。
🔠 名前の由来
"ENforcer" は "EN"
(英語)と "enforce"
(強制する)をかけたダジャレです。つまり、「英語(EN)を強制(enforce)するやつ」。名前の通り、他の言語は一切考慮していません。
🔧 主な機能
navigator.language
を"en-US"
にモックAccept-Language
を"en-US,en;q=0.9"
に上書き- タブごとに英語モードを有効化
- リロードやページ遷移後も状態を維持
- ENバッジで視覚的にON状態を表示
- データ収集なし
🔧 技術的な実装ポイント
1. navigator.language をモックする
JavaScriptから直接navigator.language
を変更することはできません。そこでcontent-script.js
からinject.js
という外部スクリプトをページ内に挿入し、以下のようにObject.defineProperty()
で上書きしています。
Object.defineProperty(navigator, "language", { get: () => "en-US" });Object.defineProperty(navigator, "languages", { get: () => ["en-US", "en"] });
CSP(Content Security Policy)対策として、インラインではなく拡張機能内のファイルを使っています。
2. Accept-Language を書き換える
Manifest V3ではwebRequest
のblockingが使えないため、declarativeNetRequest
を使ってHTTPヘッダーを上書きしています。
{ "header": "accept-language", "operation": "set", "value": "en-US,en;q=0.9"}
3. タブ単位で有効化・バッジ表示
ENforcerでは「このタブだけ英語モードにしたい」という操作感を大事にしたかったため、状態管理にchrome.storage.local
を使い、ON時には「EN」というバッジがアイコンに表示されるようにしています。
😁 苦労したことと工夫したこと
chrome://
やPDFビューアなど、一部の特殊ページではスクリプト挿入ができないため、try-catchでエラー処理を追加Accept-Language
の書き換えに伴う審査対策として、Chromeウェブストアの説明文に正当な理由を明記- 設定状態をページ遷移後にも維持するためにストレージ保存と再適用処理を追加
🔐 プライバシーポリシー
ENforcerはユーザーデータを一切収集・送信しません。この透明性を示すために、プライバシーポリシーも https://www.dottiq.com/policies/enforcer.php で公開しています。
🛒 公開URL
Chrome ウェブストアで無料公開中です:
👉 https://chromewebstore.google.com/detail/enforcer/gokmeebphmjdlgknompgaghdlemiohll
✍️ ENforcerは「欲しかったから作った」ツール
Dottiqの開発中、英語サイトの確認は何度も繰り返し行なっています。そのたびにChromeの言語設定を開いて戻して…という操作を繰り返すのはストレスでしかありませんでした。
ENforcerは、そんな手間を減らすために生まれました。同じように「英語モードでサッと確認したい」と感じたことがあるなら、きっと役に立つはずです。