Scrapbox であそぼう2022夏

from 20220814 #0814

Scrapbox であそぼう2022夏

UserScript でまだまだやれそうなことがわかったのでいろいろ試す

まずは素のコードブロックだと書きにくいのでどうにか VSCode から書けないか模索する

最初は GhostText っていう Chrome の拡張と VSCode の拡張を組み合わせて試してみたけど、割と予想通り Scrapbox が素の textarea じゃないので入力が壊れてダメだった

それじゃあ Codespaces から js を配信して開発中は UserScript にその URL を入れればよいのでは？と試してみたがこれもまあ予想通り CSP にブロックされて読み込んでくれなかった

deno で esbuild を watch で起動して、std/http/server で配信するだけというお手軽サーバーを作ったのだが....

そうなったらもうChrome拡張ですわーということで腰を上げたものの、ManifestV3 対応絶対だるそうだな〜...なんか手軽に環境立ち上げられへんかな〜...とおもってたら vite の plugin に @crxjs/vite-plugin てやつがあって、これに適当に設定を書いたら立ち上がるようになった

前にトライしてた時に content_script で web_accessible_resources に指定した js を script としてインジェクションするという方法でスクリプトをブチ込んでいたが、どうやらUserScriptが読み込まれるタイミングと合わないっぽくて、謎に setTimeout をつけると動くようになるという状態になってしまった

しかし、これがCSP的にOKなんであれば UserScript に chrome-extension:// で埋め込むスクリプトを読むようにすればよいのでは...?と試してみると動いた

vite のビルド結果はエントリーポイントのファイルに import が書いてあるだけなんだけど、crxjs は割と豪快に web_accessible_resources に全てのアセットを指定しているのでネイティブの import でファイルが読まれてくるので問題なかった

せっかくなのでちゃんと型ほしいなあ、とおもったら https://github.com/scrapbox-jp/types があったのでこいつを使おうかと

しかし、deno 向けに書かれているのでそのままだと vite から使えないので dnt で変換してみることに

deno.ns が解決できない問題に遭遇したがそっと消すとビルド自体は通ったので適当に publish してみる

...が Scrapbox の型が any になってしまう問題に遭遇

こいつがなかなかやっかいで、deno 側の型定義は node の events から引っ張ってきてて、EventEmitter が class で export されているせいなのかなんなのか、うまくそのままの変換では動かず

かといって vite には events なんてモジュールはないので無理やり型フォージもできず

なぜなのか全くわからないけど、呼び出すモジュール側で EventEmitter と Scrapbox を別々で読んできたらこっちではうまく解決できるのでとりあえずのワークアラウンドとしてこれでいくことにした

やっとこ動くようになったら、最後は esbuild で1つのファイルにバンドルしてそいつを chrome-extension の URL と差し替えてやれば完成である

この雑な manifest で動くってことは、実は deno でビルドして watch しとけば開発できるのでは...?とおもむろに deno bundle でビルドするようにして、dist には manifest と1つの js がある状態で試してみると動いた

こいつぁーいろいろ作れるな〜と早速 UI もあるような UserScript を作ってみようと

fresh を試していた時になんとなく preact 不信になってしまったので、ここは多少フットプリントでかくてもいいから react でたのもう！と react でかる〜く組んでみた

途中 hook が import できない謎状態に陥ったが、import_map をコネコネしてたらなんか治った、なんで治ったのかはよくわからない

とりあえず簡単なスクリプト群ができあがったので、ビルドした js を esbuild で minify してコピペしようとしたら Too large! って言われてペーストできなかった

なるほどそういう制限もあるわけね〜...と react をやめて svelte だとか solid あたりでミニマルなフットプリントでどうにかできないか調べてみたけど、未知のライブラリを deno でバンドルしてもっていける未来が想像できなかったので諦めた

代わりに適当な UI で textarea を出現させて、そこに貼りつけたコードをチョップしてストリームで挿入できないか検討した

雑に試したら動いたので、まずは1文字ずつ wait を挟みながら実行したのだが、scrapbox は入力中はバッファして、ある程度入力が終わったら変更を反映する〜みたいな挙動をするので、1文字ずつだーっとやるよりはもう少し大きいチャンクで貼りつけていくのがよさそうだった

今度はチャンクを大きめにして、待ち時間を気持ち長めに設定したらどんどん書き足されていくようにはなったけどコードブロックからはみだしてしまう問題が発生してしまった

これは想像だけど、insert する時に \n だと特段処理が走らないけど、Enter の press で改行されるような気がする...

とおもって \n で分割して Enter を都度入力させながら試してみるとついに動くようになった

そういえば途中 Chakra UI 試したんだが、バンドルに失敗するようになっちゃって断念した

deno界で使われている twind を使ってみてるけど、インテリセンスが効いたり効かなかったり(大抵効かない)で困っている

あと成果物のコードをチラ見したけど、んーなんかそういう感じかーみたいな...

tailwind を cli で生成して UserCSS にぶち込む方式なんかどうかなあ...?

play cdn 使えるといいんだけどな...