先日、同期Aが不満を漏らしていました。
「Chrome拡張機能のメモ帳が使いづらい!!!」
Aは業務上、ブラウザとメモ帳を並行して使用することが多いため、Chrome拡張機能のメモ帳が必須なようですが、なにやら物足りないみたいです。
「そうだ!作ってよ!得意でしょ
」
作ってよと言われてしまいました。
自分で作れという話ですが、手すきなので作成してみました。
実際に作成したもの
プロジェクト構造
chrome-notepad-extension/
├── background.js ← バックグラウンドサービスワーカー(データ管理)
├── manifest.json ← Chrome拡張機能の設定ファイル
├── sidebar.html ← サイドバーテンプレ
├── sidebar.js ← サイドバーメイン機能管理
├── storage.js ← 情報管理の窓口
└── styles.css ← サイドバーの外観調節
作成した拡張機能
こちらが実際に作成したものです。
Windows標準のメモ帳アプリをイメージしています。
同期Aが既存のChrome拡張機能に使いづらい、物足りないと感じていた部分は
- タブ分けできない
- テキストファイルを開けない
- 保存ができない
メインとしては上記3件です。
今回作成した拡張機能では全て網羅しています。
- タブ分けできない ➡ Tabの隣の＋で増やせる
- テキストファイルを開けない ➡ 画像の赤丸で開ける
- 保存ができない ➡ 画像の青丸でDLできる＆緑丸で名前を付けて保存も可能
■動作イメージ
サイドバーとして表示しているため、幅調整も簡単に可能です。
どう作成した
1ヶ月前くらいにKiroの順番待ちが終わり、使用できるようになっていたため、お試し含めKiroで作成しました。
作成の流れとしては、
SpecモードのKiroに要件を投げる
↓
実装が終わったらデベロッパーモードの拡張機能ページでフォルダを読み込ませる
↓
成果を見つつ修正点をKiroに伝える or 自分で修正を行い完成まで
といった形です。
Step1. 要件を投げる
まずはSpecモードのKiroに要件(プロンプト)を投げます。
同期Aの希望をもとに作成しました。
※Kiroの事前準備は省略します
あなたにはChrome拡張機能として、シンプルなメモ帳を作成していただきたいです。
以下仕様です。
1.デザイン
華美でなく、シンプルで無彩色多め
2.表示方法
該当拡張機能を押すと、開発者ツールを押したときのようにサイドバーとして出てきて、そこでメモできる
Chrome Side Panel APIを使用
3.機能
一般的なメモ帳と同じ
タブを複数作成出来て、一度に複数のメモ帳を分けて管理できる
テキストファイルを開ける
保存＆名前を付けて保存できる
要件と呼んでいいのかわからないくらい浅いですが、こんなプロンプトでも着々と作り始めてくれます。
Step2. 実装
要件を投げたのち、下記画像のように仕様書を作成してくれます。
要件書、設計書を作成し終わったらKiroが内容はOKか確認してきます。
どちらもOKだった場合、タスクリストの消化に入ります。
画像がタスクリストです。
これらタスクの大項目を順にこなしていくことによって、
仕様書通りに実装してくれるという形です。
めちゃくちゃ便利ですね。
Step3. 読み込み
出来上がった拡張機能を読み込みます。
１. 「拡張機能を管理」で管理ページに飛ぶ
２. デベロッパーモードをON
３. 「パッケージ化されていない拡張機能を読み込む」で該当フォルダを読み込む
すると下記画像のように作成した拡張機能が出てきて、使用できるようになります。
Step4. 動確＆修正
最後に動作確認と修正を繰り返して、同期Aの希望通りの機能になるように調整します。
同期Aの希望は↓
- タブ分け機能
- テキストファイル読込機能
- 保存機能
1回目の読み込みで外見はほぼ完璧に作成してくれましたが、上記3つの機能が何1つとして機能していませんでした。↓
そのため、サイドバーの機能を請け負っているsidebar.jsの修正を行いました。
修正のほとんどはKiroに要望を投げかけて改修してもらいました！
ただ、時々よく分からない修正や余計な追記をしたりして全く回収が進まず沼った時があったため、違和感を感じたら自分で修正する形にした方が早いと感じました
（プロンプトの問題もありそうですが...）
タブ機能修正
Kiroに修正してもらったタブ追加処理を例として紹介いたします。
createTabElement(tabData, isActive = false) {
const tabsContainer = document.querySelector('.tabs-container');
const addTabBtn = document.querySelector('.add-tab-btn');
const tabElement = document.createElement('div');
tabElement.className = `tab ${isActive ? 'active' : ''}`;
tabElement.dataset.tabId = tabData.id;
tabElement.innerHTML = `
<span class="tab-title">${tabData.title}</span>
<button class="close-tab-btn" title="タブを閉じる">×</button>
`;
// 閉じるボタンのクリックイベント
const closeBtn = tabElement.querySelector('.close-tab-btn');
closeBtn.addEventListener('click', (e) => {
e.stopPropagation(); // タブ切り替えイベントを防ぐ
this.closeTab(tabData.id); // 指定したタブを削除
});
// 「＋」ボタンの直前に新しいタブを挿入
tabsContainer.insertBefore(tabElement, addTabBtn);
}
↑がタブ追加/削除処理の全体です。
const tabsContainer = document.querySelector('.tabs-container');
const addTabBtn = document.querySelector('.add-tab-btn');
タブ全体を囲むコンテナ（.tabs-container）と、
タブを追加するための「＋」ボタン（.add-tab-btn）を取得しています。
新しいタブはこの「＋」ボタンの手前に追加されます。
const tabElement = document.createElement('div');
tabElement.className = `tab ${isActive ? 'active' : ''}`;
tabElement.dataset.tabId = tabData.id;
isActiveがtrueなら、activeクラスも付与してアクティブ状態に。
data-tab-idにIDを保持しておくことで、後から削除・切り替えが簡単になります。
tabElement.innerHTML = `
<span class="tab-title">${tabData.title}</span>
<button class="close-tab-btn" title="タブを閉じる">×</button>
`;
ここで見た目部分をHTMLとして追加。
タイトル部分は tabData.title から動的に表示されます。
const closeBtn = tabElement.querySelector('.close-tab-btn');
closeBtn.addEventListener('click', (e) => {
e.stopPropagation(); // タブ切り替えイベントが誤作動しないようにする
this.closeTab(tabData.id); // IDを指定してタブを削除
});
「×」ボタンを押すとそのタブだけ削除します。
e.stopPropagation() は重要で、クリックが親要素（タブ本体）に伝わるのを防ぎます。
これがないと「×」を押したのにタブが切り替わるなどの誤作動が起こります。
tabsContainer.insertBefore(tabElement, addTabBtn);
新しいタブを「＋ボタンの直前」に挿入。
これにより、常に「＋ボタン」は右端に残り、UIが整います。
このような形で不備のある部分をKiroに聞きつつ修正を行い、完成まで進めました。
まとめ
後日、完成した拡張機能を同期Aに使用してもらいました。
「最高ですわ!!」
最高だったようです。
それはよかったですが、何といってもKiroの性能に驚きました。
5年後には軽度なアプリ開発はAI丸投げとかで済んでしまいそうですね。
KiroのWaitlistも今は無くなったそうなので、興味のある方はぜひ触ってみてはいかがでしょうか。