QuickDrop — Preview

VS Code標準エクスプローラーから、内蔵BrowserのWebサイトへファイルを直接ドロップする拡張です。

専用のファイル一覧を経由せず、ドラッグされたファイルの内容をブラウザーの File として渡します。既定の対象は https://chatgpt.com。チャットの送信は行いません。

この版は実験的な browser APIを使います。インストールだけでは動作せず、以下の起動設定が必要です。Windows / VS Code 1.138.0で検証しています。ログインしたChatGPT.comへの添付完了は未検証です。

Marketplaceからインストールして使う

QuickDropのプレビュー版をインストールします。
VS Codeを終了して、対象のワークスペースを次のコマンドで開きます。

code --enable-proposed-api=harnakam.quickdrop 'C:\path\to\your\project'

自分のワークスペースを信頼し、コマンドパレットから QuickDrop: Open ChatGPT を実行します。
ChatGPT.comにログインし、ステータスバーの QuickDrop: 1 を確認します。
標準エクスプローラーからPDFをメッセージ入力領域へドラッグします。
ChatGPT側の添付プレビューとアップロード状態を確認します。QuickDropの「handed to the page」はサイトへの受け渡しを示し、アップロード成功を保証するものではありません。

QuickDrop: Setup が表示される場合は、起動フラグが適用されていないか、そのVS CodeのバージョンがAPIに対応していません。実験的APIは変更される可能性があります。

ローカルソース版のランチャー（Windows）

ソースフォルダーとビルド済みの out が手元にある場合は、Launch-QuickDrop.cmd をダブルクリックして専用プロファイルで試せます。このランチャーとサンプルPDFはMarketplaceのインストールには含まれません。

専用プロファイルのVS Codeが開きます。サンプル用ワークスペースを信頼します。
コマンドパレットから QuickDrop: Open ChatGPT を実行し、ChatGPT.comにログインします。
ステータスバーの QuickDrop: 1 を確認します。
標準エクスプローラーの sample.pdf をChatGPTのメッセージ入力領域へドラッグします。
ChatGPT側の添付プレビュー・アップロード状態を確認します。QuickDropの「handed to the page」はサイトにファイルを渡した意味で、アップロード成功の保証ではありません。

自分のフォルダーで試す場合:

.\Launch-QuickDrop.ps1 -Workspace 'C:\path\to\your\project'

通常のVS Codeプロファイル・既存の拡張・ログイン情報は変更しません。検証用プロファイルではログインが別になります。VS Codeの本体ファイルも変更しません。

VSIXを既存の環境に入れる場合

quickdrop-0.1.0.vsix を Extensions: Install from VSIX... でインストールできます。この拡張は実験的な browser APIを使うため、通常のインストールだけでは有効になりません。

VS Codeを終了し、以下のフラグで起動します:

code --enable-proposed-api=harnakam.quickdrop 'C:\path\to\your\project'

この環境のVS Code 1.138.0で検証済みです。他の版では実験的APIの形が異なる可能性があります。未対応時はステータスバーに QuickDrop: Setup が表示されます。実験的APIへの依存を明記したプレビュー版です。

既存のSideChatなどで開いたタブでも、対象URLが一致すれば接続します。検証用ランチャーにはSideChatを自動インストールしません。

ローカル検証版の範囲

保存済みのローカルワークスペース内のファイルを対象とします。未保存の編集内容ではなくディスク上の内容を渡します。
1回のDropは最大20ファイル、合計32 MiB。フォルダー、SSH/WSLのリモートURI、ワークスペース外へのシンボリックリンクは対象外です。
接続先は既定でChatGPT.comのみ。追加する場合はユーザー設定 quickdrop.allowedOrigins に https://example.com のような完全一致のオリジンを指定します。パス・ワイルドカードは使えません。ローカル検証用のlocalhost/127.0.0.1はHTTPでも使えます。
外部エクスプローラーから内蔵Browserへの通常のファイルDropはブラウザーにそのまま渡します。
外部Chrome/Edgeや任意のデスクトップアプリへのDragは、この版では未対応です。
Webサイトが生成されたDropイベントを受け入れる必要があります。サイトごとの対応・アップロード条件は異なります。

確認できたこと

VS Code 1.138.0の実Extension Hostとローカルアップロードページで、標準エクスプローラーからの実マウスドラッグを検証しました。ドラッグ元が標準エクスプローラーであること、信頼された操作であること、PDFのファイル名・MIME・全バイトの一致を確認しています。

ログインしたChatGPT.comへの実際の添付完了は未検証です。 ローカルページでの成功と実サイトでの成功を分けて扱います。

詳しいテスト結果は docs/verification.md に記録します。

困ったとき

ステータスバーをクリックするとQuickDropの接続状況とエラーを表示します。
接続をやり直す場合は QuickDrop: Reconnect Browser Tabs。
止める場合はユーザー設定の quickdrop.enabled をオフにします。
QuickDrop: Setup の場合は実験的APIの起動フラグとVS Codeのバージョンを確認します。
ファイルを渡しても添付されない場合は、サイト側の形式・サイズ制限とドロップ位置を確認します。

開発・再検証

npm ci --ignore-scripts
npm test
node scripts/run-code.cjs --test
npm run package

統合テストはWindows専用です。専用のVS Codeウィンドウを一時的に前面に出し、マウスを操作します。実行中はマウスを動かさないでください。テスト用CDP接続はテストプロファイルの起動中だけ有効です。外部サイトにファイルを送信するテストは行いません。

仕組み

提案段階のBrowser APIからCDPに接続し、サイトのJavaScriptとは分離した実行環境でドロップを検出します。信頼されたドロップ操作から取得したファイルだけをワークスペース内か確認して読み込み、元のドロップ先へ渡します。ページのスクリプトから任意のファイルを読むHTTP APIは公開しません。

QuickDrop (Preview)

harnakam