「AIでWebアプリが作れるLovable、本当にすごいらしい」。
そんな噂を聞きつけて、実際に使ってみた方も多いのではないでしょうか。
自然言語で指示するだけで、モダンな技術スタackのWebアプリケーションが数分で立ち上がる体験は、まさに未来の開発スタイルそのものですよね。
しかし、ふと疑問が湧きました。
「Webアプリは作れるとして、Chrome拡張機能のような、少し特殊なアプリケーションもLovableは作れるのだろうか？」と。
この記事では、そんな素朴な疑問から始まった実験の全記録をお届けします。
AIソフトウェアエンジニア「Lovable」を使い、Chrome拡張機能の心臓部であるマニフェストファイルの生成から、実際に動作するプロトタイプの構築までを試した過程と、そこから見えたAIとの新しい協業スタイルを、具体的なプロンプトと共に解説します。
この記事を読み終える頃には、あなたもLovableの新たな可能性に気づき、試してみたくなるはずです。
発想の原点：なぜLovableでChrome拡張機能なのか？
私たちの日常業務には、「この作業、ちょっとしたツールがあれば劇的に楽になるのに」と感じる瞬間が数多く存在します。例えば、特定のWebサイトから情報を定型的にコピー＆ペーストする作業や、社内システムのUIを少しだけ使いやすくしたい、といったニーズです。こうした「ちょっとした効率化」を実現する上で、Chrome拡張機能は非常に強力な選択肢となります。
しかし、いざ作ろうとすると、
- manifest.jsonの仕様を調べて設定するのが面倒…
- ポップアップ画面のUIを作るのが地味に手間…
- バックグラウンドで動くスクリプトの作法がよくわからない…
といったハードルがあり、アイデアはあってもなかなか着手できない、という経験を持つエンジニアも少なくないでしょう。そこで、今回の主役であるLovableに白羽の矢が立ちました。
Lovableは、ご存知の通り、チャット形式で指示するだけでReactやTypeScript、Tailwind CSSといったモダンな技術構成のWebアプリをフルスタックで自動構築してくれるAIソフトウェアエンジニアです。この「面倒な土台作りをすべてAIに任せられる」という強力な特徴を、Chrome拡張機能開発に応用できないかと考えたのが、この実験の出発点です。もしLovableが拡張機能の骨格を自動生成してくれるなら、開発者は最も重要なコアロジックの実装に集中でき、開発体験が飛躍的に向上するはずです。
実践！LovableにChrome拡張機能の骨格を作らせるプロンプト術
それでは、早速実験を開始します。目標は、Lovableとの対話を通じて、Chrome拡張機能の基本的な要素を生成させることです。具体的には、以下の3つのファイル生成を試みます。
- manifest.json: 拡張機能の定義ファイル
- popup.html & Popup.tsx: ポップアップ画面のUI
- background.js: バックグラウンドで動作するスクリプト
ステップ1：マニフェストファイル(manifest.json)の生成
まずは拡張機能の心臓部であるmanifest.jsonから。ここでは、最新の仕様であるManifest V3に準拠したファイルを生成してもらいます。Lovableに以下のようなプロンプトを入力しました。
Chrome拡張機能のmanifest.jsonを作成してください。仕様はManifest V3でお願いします。拡張機能の名前は「Lovable Test Extension」、バージョンは「1.0」です。ポップアップとして「popup.html」を指定し、「activeTab」と「scripting」の権限を要求してください。
すると、Lovableは数秒で以下のコードを生成しました。
{
"manifest_version": 3,
"name": "Lovable Test Extension",
"version": "1.0",
"description": "A test extension built with Lovable.",
"action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"scripting"
]
}
驚くべきことに、ほぼ完璧なmanifest.jsonが生成されました。description（説明文）はAIが適切に補完してくれています。この時点で、「AIに雛形を作らせる」アプローチの有効性を確信しました。
ステップ2：ポップアップUIの生成
次に、拡張機能のアイコンをクリックした際に表示されるポップアップ画面です。LovableはReactを得意としているため、ここは最も期待できる部分です。モダンなUIを期待して、shadcn/uiとTailwind CSSを活用するよう指示します。
「今日のタスク」を入力できるシンプルなToDoリストのUIを、Reactコンポーネントとして作成してください。入力フィールドと「追加」ボタン、そしてタスク一覧を表示するリストが必要です。UIのスタイリングにはshadcn/uiとTailwind CSSを使用してください。
このプロンプトにより、LovableはPopup.tsxというファイル名で、期待通りのReactコンポーネントを生成しました。入力フィールド(Input)やボタン(Button)、リスト表示のロジックまで、TypeScriptで型付けされたコードが自動で組み上がります。Lovableがデフォルトで採用している技術スタックと親和性が高いため、UIの生成は非常にスムーズでした。さらに、Visual Editsモードを使えば、生成されたUIの余白や色をプレビュー画面から直接微調整することも可能です。
ステップ3：生成コードの課題と解決策
最後に、バックグラウンドスクリプトと、生成されたコードの統合です。ここで、AIの限界と人間の役割が明確になりました。例えば、「拡張機能がインストールされた時にコンソールにメッセージを表示する」ためのbackground.jsを生成させようとしました。
chrome.runtime.onInstalled.addListenerを使用して、拡張機能がインストールされた際にコンソールに「Welcome to Lovable Extension!」と表示するbackground.jsを作成してください。
Lovableは指示通りのコードを生成しましたが、これはあくまで単体のスクリプトファイルです。Lovableの実行環境はWebアプリケーションのサーバーサイドであり、Chrome拡張機能特有のchrome.*APIを直接実行・テストすることはできません。生成されたコードが実際に拡張機能として正しく機能するかは、ローカル環境で検証する必要があります。
ここで活躍するのがLovableのGitHub連携機能です。Lovableで生成したプロジェクトをGitHubリポジトリに連携し、手元のPCにクローンします。そして、VS Codeなどのエディタで最終的な調整を行います。今回の実験では、生成された各ファイル（manifest.json, Popup.tsxなど）を正しいディレクトリ構造に配置し、ビルド設定（Viteを使用）をChrome拡張機能向けに少しだけカスタマイズする必要がありました。この「AIが8割の土台を作り、人間が最後の2割を仕上げる」というハイブリッドな開発こそ、Lovable活用の真骨頂と言えるでしょう。
ストア公開への道とLovable活用の未来展望
ローカル環境でコードを整え、Chromeのデベロッパーモードで拡張機能を読み込むと、自作のToDoリスト拡張機能が無事に動作することを確認できました。AIが生成したモダンなUIが、ブラウザのツールバーからポップアップ表示される様子は、なかなかに感動的です。
ここからChromeウェブストアに公開するまでは、アイコンの作成、プライバシーポリシーの準備、ストア用のスクリーンショット撮影といった手順が必要になりますが、開発の最も面倒な初期段階をLovableが担ってくれたおかげで、心理的なハードルは大きく下がりました。
今回の実験から見えたこと
- 雛形作成ツールとして非常に優秀: manifest.jsonやReactベースのUIなど、定型的で面倒な部分の作成において、Lovableは絶大な効果を発揮します。
- 拡張機能特有のAPIは手動調整が必要:
chrome.*APIを多用する複雑なロジックは、現状ではローカルでの手動実装とデバッグが基本となります。 - UIが複雑な拡張機能ほど効果大: 特に、多くの設定項目を持つ「オプションページ」のような、リッチなUIを持つ画面を開発する場合、LovableのUI生成能力は大きな武器になります。
今回の実験はChrome拡張機能でしたが、このアプローチはPWA（Progressive Web Apps）や、Electronを使ったデスクトップアプリのUI部分など、他の領域にも応用できる可能性を秘めています。AIに「得意なこと」をやってもらい、人間は「人間にしかできない創造的な部分」に集中する。Lovableは、そんな新しい開発スタイルを現実のものにしてくれる強力なパートナーです。
まとめ：AIとの協業で、開発は新たなフェーズへ
今回の「LovableでChrome拡張機能は作れるか？」という実験は、「条件付きでYES」という結論に至りました。より正確に言えば、「AIと人間が協業することで、驚くほど効率的に開発できる」という大きな可能性を示す結果となりました。
Lovableは、面倒なプロジェクトのセットアップ、UIコンポーネントの作成、定型的なコードの生成といった作業を瞬時に終わらせてくれます。私たちは、AIが作ってくれた高品質な土台の上で、アプリケーションの最も価値あるコアな部分に集中すればよいのです。これは、単なる時短ツールではなく、開発のあり方そのものを変えるパラダイムシフトと言えるかもしれません。
この記事を読んでLovableに興味が湧いた方は、ぜひご自身でも何か作ってみてください。今回のような少し変わった挑戦も、きっと面白い発見につながるはずです。Lovableはクレジットカード不要の無料プランから始めることができます。
また、Lovableの基本的な使い方や料金プラン、より詳細な機能について知りたい場合は、以下の完全ガイド記事が大変参考になります。ぜひ合わせてご覧ください。
＞＞【2026年完全版】Lovableとは？AIでWebアプリを自動生成する使い方・料金・特徴を徹底解説
AIと共に、次のアイデアを形にしてみませんか？