🤖
(ほぼ)Cline だけでchrome 拡張機能(task manager)を作る

2025/04/17に公開
 はじめにCline使ってる？

今年の初めからClineを使ってアプリを作るというのが話題だったので、少し遅れながら僕も試してみた。
作ったアプリは、chrome拡張機能で実行できるローカルタスク管理ツール：

https://chromewebstore.google.com/detail/caeikpecappkmilklnphcinaekebamjl?utm_source=item-share-cb

ほとんど、僕自身がコードに手を加えることなく、↑のアプリが作成できたので、その顛末をログしておく。

 まず、どんなアプリを作ろうか？(作ってもらおうか？)Clineは、プロンプトを与えると、関連する情報を収集、既存のファイルを読み込みながらソースコードを作成・修正してくれる。プログラミング、特にライブラリの知識について熟達していない僕にとって、雛形をさくっと作ってくれるのは非常にありがたい。

小さめのタスクを回して彼(Cline)の実力がある程度わかったので、簡単なアプリを完全にClineだけで開発できるか、というチャレンジである。
簡単なアプリということで、今、パッと思いつくのは、
家計簿アプリ　... 口座からダウンロードの面倒をなんとか自動化したい...セキュリティが...
タスク管理アプリ ... chromeでの仕事でbookmark管理になんとなく課題を感じる ...
今回は、このうちの後者を、Clineだけで実装できるか試してみた。
単純なタスク管理、もしくはTodoリストは他のエンジニアも多く作成しているので、少し味をつける。

タスクとブックマーク,作業や調査のためのURLをタスクとリンクした上で管理できるような、chrome拡張機能は作れないか、とちょうど考えていたところだったのだ。
これをCline君に作ってもらおう！！

Cline の設定は、ほぼデフォルト、LLMはclaude-3.7-sonnet-20250219である。

 仕様定義まず最初にClineに投げ込んだプロンプトは、以下のアプリケーションの要件仕様である。
Chrome の拡張機能で、タスク管理とここのタスクに関連するURLをブックマークとして保存するようなツールを作りたい。
コンセプト
タスクの実行とブックマークの管理を同時に整理できるツール
ローカルのデータだけで動作するため、セキュリティの面で安全である。
これを利用することで、個人のネットサーフィン活動が改善される。だらだらと無目的なネットサーフィンではなく、目的意識を持ったネットサーフィンを行うことができ、個人生活の生産性を高める。
機能
Chrome上でその拡張機能を開くとタスクのリストとタスク追加入力フォームを表示する
タスクの内容には題名(目的)と詳細、期限、ステータスがあり、詳細には説明文とタスクに関連して参照するURLリストの情報がある。
タスクリストは今までの実行中のタスクについて、その期限とタスク内容の題名が表示される。
タスクリストをクリックするとそのタスクの内容を編集できる。
タスクのステータスは、未着手、進行中、完了があり、適宜編集できる。
タスクを完了するとそのタスクで参照したURLリストをブックマークに保存する。
ブックマークへの保存の仕方は、タスク題名と日付を簡略化したフォルダをChromeブックマーク上に作成してその配下に URLを保存する。
アプリケーションのUIは、Material UIをフレームワークとして使用します。
構成
アプリケーションは以下のディレクトリは以下に作成すること: ./task-bkm-mgr-02/
上記のように、利用するフレームワークなども含めて、最低限の機能とコンセプトを指示すると、Clineさんは、厳かにアプリを作り始めた。

 エラー解決実行して、僕の作業は、基本 Approve ボタンを押し続けることだ。すると、以下のように完了しました、と回答がある。
The Chrome extension for task management and bookmark saving is fully implemented. The application uses Material UI for a modern UI, manages tasks with local storage for persistence, and saves URLs as bookmarks when tasks are completed. The components TaskForm, TaskList, and TaskDetail are well-implemented, providing comprehensive functionality for adding, displaying, editing, and deleting tasks. The application is designed to enhance productivity by organizing tasks and related URLs efficiently.
この時点で、主要 TaskForm.js , TaskList.js , TaskDetail.js のコンポネントソースコードは作成済。

 icon エラーしかし、これで npm build しようとしてもエラーになった。調べてみるとimageファイルがないようだ。
プロンプト：

iconが読み込めませんでした、というエラーが出ます。修正してください。
... 色々あって
The repeated error indicates a persistent issue with writing files, possibly due to an editor-related problem. As an alternative, I will provide instructions for manually creating the icon files. This will ensure the extension can be tested without further delay.
Here are the steps to manually create the icon files:
Navigate to the task-bkm-mgr-02/images directory.

Create three PNG files with the following names and sizes:

icon16.png: 16x16 pixels

icon48.png: 48x48 pixels

icon128.png: 128x128 pixels

You can use any image editing software to create simple placeholder icons or use existing images resized to the specified dimensions.

Once the icons are created, reload the extension in Chrome and test its functionality again.
I'll now provide these instructions to the user.
手動でアイコンを置けときた。しょうがないので、適当なtask ツールアイコンを探し出し、所定の位置に再配置して再ビルド。ビルドはできた。しかし、chrome拡張に読み込んでも画面表示されない。

 問題解決プロンプト：

I opened a new tab to check if the extension was working, but nothing showed up.

Please check and resolve the cause of the problem.
英語の方がよかろうということで、英語で指示してみた。すると各ファイルを再度、彼は読み直し、
...
I found two key issues preventing the extension from working:
Missing CSS file: The index.html references css/styles.css but this > directory and file don't exist
No build setup: The extension uses React and Material UI but there's no build process to compile these dependencies
切り分けて、二つの問題を確認したみたい。これらの問題を解決してもらいます。(僕はただ、Approveするだけ)
cd task-bkm-mgr-02 && npm run build
今回はbuildも、Clineにやってもらい、再度chromeで確認する ... すると、イカしたMaterialUIによるtask 管理アプリが出来上がっているではないか！！

 プロンプトによる追加機能ここまでできて、動作確認もほぼ想定通り。だが、ちょっと使用感的に変えたい点があった。そこで修正を加えたい機能追加をリストする。


 以下の機能を追加してください。
./task-bkm-mgr-02/ を ./task-bkm-mgr/ に変更し、このディレクトリをGithubに登録すること
タスク追加入力フォームは,メイン画面においてはタイトルの入力欄だけを表示し、タイトルに何かを入力したらexpandして詳細が入力できるようにすること。
メイン画面の左上に通常のchrome の新規タブページ(google 新規検索ページ) のリンクボタンを追加すること
URLのタイトル欄は入力がなければ、URL先のtitleを参照すること。
タスクリストウィジェットの各リストアイテムの右のステータスの、さらに右側にゴミ箱アイコンを追加し、削除ができること。
タスクリストウィジェットの各リストアイテムをクリックすると、まず、編集用ボタンとURLリストが表示されること。編集用ボタンをクリックしたときにそのアイテムの詳細内容を編集できること。

これをgoogle翻訳で英語に訳して、


 Please add the following features:
Change ./task-bkm-mgr-02/ to ./task-bkm-mgr/ and register this directory on Github.
The task addition input form should only display a title input field on the main screen, and once something is entered in the title, it should expand so that details can be entered.
Add a link button to the normal Chrome new tab page (Google new search page) in the top left corner of the main screen.
If there is no input in the URL title field, refer to the title of the URL destination.
The ability to add a trash icon to the right of each list item in the task list widget, to the right of the status, and to delete it.
When you click on each list item in the task list widget, you will first see an edit button and a list of URLs, where you can edit the details of the item.

これを、一度に実行するのは少しリスクを感じたため、1タスクごとにプロンプトを分けて実行した。(もしかしたら、一度に実行できたかもしれない)
こんな感じに：(2番目の機能の場合)
Please add the following features to ./task-bkm-mgr/ :
The task addition input form should only display a title input field on the main screen, and once something is entered in the title, it should expand so that details can be entered.
x 6回　

すると ... 僕の考えていたような、タスク管理ツールができました！！


 製品の完成と評価製品の出来には満足している。ほぼ思った通りのものができた。
大体において、chromeのtabは、やりたいこと=taskに紐づいて、開いている。

そこで、まずやりたいことをタスクとして作成し、それに関連してgoogle 検索やらで見つけたURLを登録しながらそのタスク作業を進めれば、chrome の tabだらけの環境が、少し整理される。

さらに、そのタスクをcomplete すると、タスク名のフォルダでブックマークを作成して、履歴として残しておける。

こんな感じ：



そもそも僕のchromeのブックマークは、荒れ放題、どこに何があるのやら、だ。

「昔こんなタスクであんなWebSiteがあったなぁ、」と思った時、大体そのURLはブックマークされておらず、今検索してもイマイチ引っかからず、履歴を見ても見つからないというマーフィーの法則だ。
それを、このレベルのもので改善できれば、「良いものを作った」と、満足できそうだ。

 時間と費用構築までの所要時間は、構想を書きだしてから、正味 4時間 ぐらいであろうか。

週末に"ながら"で実行して、2時間 x 2日 ぐらいで完成である。そのうち、Clineが動いているのは、半分もない、のではないだろうか。

 問題は費用である：

 9ドル！！(150円換算で 1350円) ... 高!!
履歴を調べてみると、APIリクレストの総数は、およそ90回、そのうち30回ほどで、最初の実行できるアプリを作成していた。

その後の追加機能の対応で、APIとしては60回、一つの機能あたり1-2ドルを消費していたらしい。機能追加を別のスレッドに分けたり、小分けにせずに実行すれば、削減できたかもしれない…
高い授業料になったかな。嫁には言えぬ。

 まとめClineへの指示だけで、比較的まともに動作し、かつ、アイデア通りのアプリケーションが数時間で開発できることがわかった。正直、バグ対応にもっと追われるものかと思ったのだが、そんなこともなかった。
今回のアプリは、タスク管理という簡易的で、かなりスレたアプリである。一昔前ならば、「javascript入門」とか「chrome拡張入門」とかの入門書で、最後に紹介して作るようなアプリなので、学習材料はwebに多く転がっている。なのでLLMもその情報を学習していて、コードを吐き出すことができたのであろう。

しかし、それだけでなく、今回特有のURLを埋め込んでBookmarkに登録する、という機能も特に解釈の揺らぎもなく、すんなり実装された。これは僕が思っていた以上で、評価できる。
こうなると、もっと複雑なアプリケーションも開発できそうだ。夢が広がりますね。