Qiita Com Tateishi T Items 1b9319fe3ccd2428363a
【自作】ノンエンジニアがCursorのVibe Codingで作ったChrome拡張機能「Tab to MD」開発記録
- URL: https://qiita.com/tateishi-t/items/1b9319fe3ccd2428363a
- 日付: 2026-06-26
- Tier: Tier 3
- 要旨: ノンエンジニアがCursorのVibe Codingを使い、開いているタブを一括でMarkdownファイルとして保存するChrome拡張「Tab to MD」を開発した記録。Manifest V3・Service Worker・chrome.scripting.executeScript等の技術的制約にぶつかりながら、AIとの対話でトライアンドエラーを繰り返した経緯が記録されている。ダウンロードフォルダ外の絶対パス指定ができないChrome APIの制約を受けて、ダミーファイルダウンロードでフォルダパスを取得するという回避策を実装している点が興味深い。
詳細
- 機能: 現在ウィンドウの全タブを1ページ1ファイルでMarkdown変換・保存、保存先フォルダのカスタマイズ
- 技術スタック: Manifest V3、Service Worker、Vanilla JavaScript、Chrome APIs(tabs・storage・downloads・scripting)
- Manifest V3の注意点: chrome.tabs.executeScriptが廃止されchrome.scripting.executeScriptを使用。background pageからService Workerへ移行
- メッセージパッシングでreturn trueが必須(非同期処理でチャネルを開き続けるため。falseや未返却だとsendResponseが呼ばれる前にチャネルが閉じる)
- chrome://・chrome-extension://・about:などの特殊ページはセキュリティ上アクセス不可。事前URLチェックでタブ情報のみを使用してMarkdown生成
- ファイル名のサニタイズ: 特殊文字をアンダースコア置換・スペース置換・100文字制限
- ダウンロードパスの制約: chrome.downloads APIはダウンロードフォルダ外の絶対パスを受け付けない。絶対パス設定時はsaveAs: trueでダイアログ表示
- フォルダ選択の回避策: フォルダ選択APIが存在しないため、ダミーファイルをダウンロードさせてその保存先パスを取得する方法を採用