VSCode拡張でクリップボード画像をImgurにアップロードする
GitHub の編集欄みたいに、markdown エディタに画像を貼り付けたらストレージにアップロードして、その URL を挿入するようにした。
VSCode 拡張を作ったこと無かったので一から作ってみようと思ったが、検索したら既にそれっぽいのがあった。
vscode-imgur 🔗 marketplace.visualstudio.com
ほぼほぼこれで良かったのだが、最終的な出力が  という markdown 記法になっており、自分のブログでは URL のみの記法が望ましいのでちょっと構造を調べていじることにした。
どうやっているのか？
VSCode 拡張の開発ドキュメント を手順通りやってみて、既存の拡張機能のコードを読んでみた。単純にペースト時のイベントから内容を取得できるのかと思っていたが案外そう簡単ではなかった。
そもそもペーストを検知するイベントが無く、また vscode.env.clipboard で clipboard にアクセスはできるのだがテキストの読み書きメソッドしかないので画像は取得できない。
先ほどのソースを調べたら cmd+alt+v をショートカットに登録し、そこからアクションを起こすようになっていることが分かった（なので普通のペーストのときには発動しない）。
他の似たような拡張も調べてみたがみんな同じ形式だった。おそらくはみんな 4 年前に作られた Paste Image という拡張を元にして作っているっぽい。
Issue を見ても Open 状態なのでまだ paste イベントは無いようだ（ちゃんと読んでない）。
また、コード的には Paste Image from local pc というものが 4 ヶ月前で新しく、元コードのでかいコールバック部分を Promise に書き換えていたり、AppleScript の代わりに pngpaste を使うようにしていたので参考にさせてもらった。
WSL 環境でうまくいかない
ペースト時にクリップボードから画像を取得する部分については、 Windows, Mac, Linux 用にそれぞれ script 処理 があった。
問題なのは WSL 環境で、Linux の xclip を使うのだが WSL だとそこがうまくいかない。これは分かる人がいたら教えてほしい。
Imgur API
App 登録
imgur にアップロードするには ClientId と ClientSecret が必要なのだが、そのためにまず Application を登録する必要がある。
これを説明の通りやっていったのだが、Register an Application するところで callback URL を指定するとリダイレクト先の画面が壊れててうまくいかなかった。
結局ここでは without a callback URL のほうを選んだらうまくいった。
accessToken 取得
App を登録すると clientId と clientSecret が取得できる。これを VSCode 拡張の config に設定し、初回は認証 URL を叩いてブラウザで PIN を表示させ、それを ユーザーに VSCode の InputBox に入力してもらい、そこから accessToken を取得するという手順が必要になることを元のソースを読んで学んだ。
upload 処理
アップロード中は  というテキストを挿入してアップロード後にそこを置き換えることになるが、せっかくなのでここでローディングの gif を表示するようにした。
表示最適化
あとは以前書いたように imgur は各種サムネイルと webp 画像を生成してくれるので、markdown のパースをするところで最適化した画像を srcset に設定している。
まとめると、こんな感じの運用になってる。