AI使ってモックをサクッと作るとき、Chrome拡張機能が意外と便利説
はじめに
本記事は Skillnote Advent Calendar 2025 の15日目の記事です🎅
こんにちは。Skillnoteでプロダクトの検討やら分析機能の開発運用を担当しています。
BlackFridayではKoalaマットレスを買いました。思ったより固めで、そこまで熱もこもらず今のところはいい感じです。🐨
今日は、機能検討をしていく中で、モック作成のときにChrome拡張機能使うと意外と便利かも！という小ネタを共有します。
そもそも
誰でも簡単にプロダクト（的なもの）が作れるようになってきています。
LovableやVercel v0といったサービスや、生成AI x Streamlitなどを使ってポンと動くものができるようになっています。
実際に弊社内でも、事業開発メンバーが上記を使って動くサンプルを作り、仮説検証サイクルを回しています。
新規でサービス検討する場合のモック作成としては良いのですが、すでにあるプロダクトの中でちょっとした機能を追加したい場合、既存機能を再現しようとするところに手間がかかったりします。
（私は非エンジニアなので、既存のコードを使わないという前提）
また、自身のローカルで立ち上げて見せる分には良いのですが、他のメンバーにも使ってもらおうとすると、どこにデプロイするか・してもよいかと悩みがでることも。。。
Chrome拡張という手段
すでにあるプロダクトの、ここを押したらこんなのが出て、こんな事がわかり、こんなアクションが取れると、お客様の悩みが解決するのでは？
という仮説イメージを、Chrome拡張機能で既存機能の上に載せてしまえばいいのでは、というご提案です。
実際に
例えば、目標シート（Skillnoteの機能でスキルの育成目標を立てて管理できる）に総評コメントをつけたい！！と思ったとします。
（画像はサンプルです）
そんなとき、Chromeで対象のページを開き、検証で、対象となりそうなHTMLをコピーしてきて、
お使いの生成AIに、
（コピーした要素を貼る）
chrome extentionをつくりたい
対象期間と目標の間あたりに、目標入力者と評価入力者用のコメントが書けるテキストエリアを表示したい
と投げると、
## 全体像
作るファイルは最低この3つです。
• manifest.json … 拡張機能の定義
• content.js … 対象ページに textarea を差し込むスクリプト
• （任意）styles.css … ちょっとした見た目調整用
以下のコードをそのままベースにして、URL やクラス名が違ったら調整してください。
（中略...）
## インストール手順（ざっくり）
1. 適当なフォルダを作成
例: sample-extension/
2. その中に
• manifest.json
• content.js
• styles.css
を保存
3. Chrome を開く → chrome://extensions/
4. 右上「デベロッパーモード」を ON
5. 「パッケージ化されていない拡張機能を読み込む」→ 上記フォルダを選択
6. 対象の社内システムのページを開いて挙動を確認（必要なら F12 で console ログを見ながらセレクタを微調整）
と、すぐに動く以下のファイルが返ってきます
- manifest.json
- content.js
- styles.css
手順通りに拡張機能を設定した様子がこちら。
初期値を入れてとか追加で調整していますが、５分程度でサクッとできました。
（あくまで一例です）
拡張機能で作るメリット
- 既存サービスのここに追加したい！という指示が、非エンジニアでもなんとかできる
- どこで立ち上げるかなど、気にしなくてよい
- 普段使っている営業デモ環境などに、しれっと追加できるので、打ち合わせの中でサンプルを見せるために別環境や別資料を探しに行く手間が省ける
- 拡張機能のファイルを渡せば、社内メンバーにも共有できる
もちろんシステム的な連携が取れているわけではないので、ただの動く紙芝居＋αです。
しかし、社内やお客様と機能イメージをすり合わせていくには、口頭よりパワポ、パワポより動くもので会話をするほうが、圧倒的にスムーズですし、その後の議論も弾みます。
既存機能にのせるデモをサクッと作るの手段の一つとしては、結構コスパいいんじゃないかなと思っています。
（ちなみに目標コメントはもうちょっとでリリース予定です！）
最後に
１アイデアとして持っておくと、サクッと対応できる時があるかもしれません。
生成AIでもパワポでもサービスでも拡張機能でも、どれも手段だと思っていますので、目的を最短で達成できるものを適切に選ぶことが重要かなと思っています！
あと、いい感じの枕も探してます。何がいいかな🐨
Discussion