Slides: 【完全解説】FAL API搭載の最強AI生成Chrome拡張機能「HonoGear Extension」を作ってみた

← Back Cover

Use Arrow Keys or Space to Navigate Swipe to Navigate

⚡

FAL API Power

Gemini 2.5, Kling, SeeDream 4.0を単一APIで統制。
複数の高額サブスクリプションをこれ一本に集約。
従量課金だから無駄がない。

Slide 1 of 3Remaining 2

◀▶

はじめに

「AIツールを行き来するのが面倒くさい……」

ChatGPTでプロンプトを考え、Midjourneyで画像を生成し、Runwayで動画にする。このタブを行き来する作業、もっとスムーズにできないか？と思ったことはありませんか？

そこで今回、最強のAI生成環境をブラウザのサイドバーに詰め込んだ、自作Chrome拡張機能「 HonoGear Extension 」を開発しました！

バナナ？なんでバナナなの？

Author

「Easy as a banana（バナナを食べるくらい簡単）」という意味を込めました。あと、アイコンが可愛いからです（笑）

この記事では、この拡張機能の全貌と、FAL APIを使って自分だけのAIツールを作る方法を解説します。

HonoGear Extension の主な機能

この拡張機能は、単なるAPIラッパーではありません。クリエイターの「痒いところに手が届く」機能を詰め込みました。

1. 最新AIモデルへのフルアクセス

Nano Banana Pro (Gemini 2.5 Flash) や SeeDream 4.0 といった最新モデルに対応。テキスト生成から画像生成まで、最先端のAIをブラウザ上で利用できます。

2. 動画生成もこれ一つで

✅ 対応モデル

MiniMax * Kling * Runway * Luma

これらトップクラスの動画生成AIを、タブを切り替えることなく呼び出せます。

3. サイドパネル & ストーリーボード

最大の特徴が「サイドパネル対応」です。Webサイトを見ながら、気になる文章をコピーしてサイドパネルで即座にAI処理。生成した画像は「ストーリーボード」で管理し、その場で物語を構成できます。

開発の裏側：技術スタックと構成

「HonoGear Extension」は、Chrome拡張機能（Manifest V3）の標準的な構成で作られています。

graph LR User[User Action] */}|Click| Popup[Popup / SidePanel] Popup */}|Request| Background[Service Worker] Background */}|API Call| FAL[FAL.ai API] FAL */}|Model| Gemini[Gemini 2.5] FAL */}|Model| Kling[Kling Video] FAL */}|Response| Background Background */}|Storage| ChromeStore[chrome.storage] ChromeStore */}|Update| Popup style User fill:#22c55e,stroke:#fff style FAL fill:#a855f7,stroke:#fff style ChromeStore fill:#f59e0b,stroke:#fff

ファイル構成

easy-banana/
├── manifest.json # 設定ファイル
├── popup.html # ポップアップ画面
├── popup.js # メインロジック
├── options.html # 設定画面（APIキー入力）
├── sidepanel.html # サイドパネル画面
├── background.js # バックグラウンド処理
└── icons/ # アイコン画像

コアとなる技術：FAL API

このツールの心臓部は FAL API です。FAL APIは、Stable DiffusionやFlux、各種動画生成AIなどを統一されたインターフェースで利用できる強力なサービスです。

fal.ai - Generative Media Platform

Lightning fast inference for diffusion models.

fal.ai

これ一つ契約するだけで、複数のAIモデルを個別に契約する手間から解放されます。

自作Chrome拡張機能の作り方（簡易ロードマップ）

あなたも自分だけの「HonoGear Extension」を作ってみませんか？基本的なステップは以下の通りです。

ステップ1：manifest.json の作成

拡張機能の「身分証明書」です。権限やファイル構成を定義します。

{
 "manifest_version": 3,
 "name": "HonoGear Extension",
 "version": "1.0",
 "permissions": ["storage", "sidePanel"],
 ...
}

ステップ2：インターフェースの作成 (HTML/CSS)

popup.html や sidepanel.html で、使いやすいUIを作ります。今回はバナナをイメージした黄色とテックブルーの配色にしました。

ステップ3：ロジックの実装 (JavaScript)

ここでFAL APIを呼び出します。APIキーは chrome.storage を使って安全に保存し、ユーザーが設定画面から入力できるようにします。

⚠️ ここがポイント

FAL APIの呼び出しは、非同期処理（async/await）を使うのが基本です。生成には時間がかかるため、ローディングアニメーションを入れるなどUXへの配慮が重要です。

ステップ4：デバッグとインストール

Chromeで chrome://extensions/ を開く
「デベロッパーモード」をONにする
「パッケージ化されていない拡張機能を読み込む」で作ったフォルダを選択

これであなたのブラウザに自作ツールがインストールされます！

まとめ

「HonoGear Extension」は、単なるツール開発以上の体験でした。自分の欲しい機能を自分で作り、ブラウザという日常の空間に組み込む。これこそが、エンジニアリングの醍醐味です。

FAL APIを使えば、驚くほど簡単に高機能なAIツールが作れます。ぜひあなたも、自分だけの「最強の相棒」を作ってみてください。

アイコンはバナナでなくてもOKです（笑）。

📝 配布について

現在は自作のプライベートツールとして運用していますが、反響があればストア公開も検討します！