PLaMo Translate Chrome拡張機能を作った話

Preferred Networksが公開しているAI翻訳ツール「PLaMo」を、Chromiumのサイドパネルでいつでも使えるようにするためのものを作った。

特に注目してほしいのは、外部サイトをサイドパネル（iframe）内に表示する際にぶつかるセキュリティ制限（CSPやX-Frame-Options）を、技術的な工夫で回避している点だね。

構成ファイルと役割の解説

1. manifest.json（設定ファイル）

拡張機能の「設計図」にあたるファイルだよ。

• サイドパネル機能の有効化: sidePanel 権限を使って、ブラウザの横に専用の画面を出せるようにしているよ。
• 強力な権限設定: declarativeNetRequest という権限を使って、Webサイトから送られてくる通信内容（ヘッダー）を書き換える準備をしているのがポイントだよ。

2. rules.json（セキュリティ制限の回避）

ここがこの拡張機能の一番賢い部分だよ！ 通常、多くのWebサイトはセキュリティのために「自分のサイトを他のサイト（iframe）の中で表示させない」という命令（x-frame-options など）を出しているんだ。

• ヘッダーの削除: PLaMoのサイト（https://app.translate.preferredai.jp/*）にアクセスしたときだけ、ブラウザが受け取る「表示制限の命令」をこっそり消去するように設定されているよ。
• これによって、本来ならサイドパネル内では表示を拒否されるページを表示可能にしているんだ。

3. sidepanel.html（表示画面）

サイドパネルの中身そのものだよ。

• 全画面表示: CSSで余白をゼロにして、画面いっぱいに表示されるようになっているね。
• iframeでの埋め込み: <iframe> タグを使って、PLaMoのデモページを直接呼び出しているよ。

4. worker.js（動作の制御）

バックグラウンドで動くプログラムだよ。

• アイコンクリック時の動作: 拡張機能のアイコンをクリックしたときに、今開いているタブに対してサイドパネルを開くように命令を出しているよ。
• 自動設定: インストールした時点で、アイコンクリックですぐにパネルが開くように挙動を固定しているね。

この拡張機能のすごいところ

普通に iframe で外部サイトを読み込もうとするとエラーで真っ白になっちゃうことが多いんだけど、declarativeNetRequest で CSP（Content Security Policy）を修正（CSP Fix） することで、無理やり表示できるようにしてる。

これがあれば、調べ物とかをしながら横でサッとAI翻訳を使えるから、使ってみて！