ElectronでUserScriptの試行錯誤をしたい
モチベーション
takker.iconさんのコード資産を使って試行錯誤したいが、Deno(TypeScript)からJavaScriptへのトランスコンパイルと、Scrapboxページへの貼付け作業が都度発生して、試すのが億劫になる
トランスコンパイルとUserScriptの貼り付け作業をなくして、試行錯誤を簡単にしたい
試したこと
Electronのpreload機能を利用して、ページ呼び出し前に、UserScriptをinjectする
正しく動いているかどうかは要確認
Electronのセキュリティのお作法からは逸脱しているっぽいので、どこまで許容できるか
やっていること
src/index.tsにScrapBubbleの読み込みを記述
code:src/index.ts
scrapBubble.mount();
deno run --allow-net --allow-read --allow-env --allow-run script/bundle.tsで、JavaScript（dist/index.js）に変換
npm startでElectron起動
Electronのpreload.jsからdist/index.jsを読み込んで、Scrapboxのbodyに追加
meganii.iconの認識（JavaScript、TypeScript、Deno周りの解像度が低い）
Electronは、デフォルトだとCommonJSで動かす必要がある
Top Level awaitなどDenoで普通に使えるものが、CommonJSだと未サポート（要確認）
方針として、①ScrapBubbleの元コードをCommonJSで動かせるようにするか、②ElectronからESMを読み込めるようにするか
①は、元のコードを変えていかなければならなさそうなので、見送り
ElectronにCSPヘッダを追加できそうだったので、生成したscriptタグからトランスコンパイル後のJavaScriptを読み込ませることで②を実現
もっと良い方法があれば知りたい
https://gyazo.com/3afe5428eb8cf7681fee83dd2079f01d
いちいちscrapbox-bundler等でbundleしてScrapboxに貼り付け直さなくても、ローカルでbundleして、そのままpreload.jsでbundleしたjsを読み込むことができそう。UserScriptのDebugが捗るはず。 気になるけどわからぬyosider.icon
ローカルでbundleする方法
scrapbox-bundlerは（あえて）Webブラウザでesbuildを利用できるようにするツールなので、（逆に）通常通りローカルでビルドツールを利用するmeganii.icon deno bundle <url> | esbuild --minifyみたいなやつということだろうかyosider.icon
プリロードスクリプトは、Chrome 拡張機能の コンテンツスクリプト と同様の、レンダラーがウェブページを読み込む前に注入されるスクリプトです。
Electronで特定のページを表示するときに、事前に任意のJavaScriptを読み込ませることができるmeganii.icon なるほどですyosider.icon
まずElectron製のScrapboxアプリが気になるyosider.icon
ガワアプリなので、中でhttps://scrapbox.io/に遷移しているだけですねーmeganii.icon 毎回、CommonJSとESMを調べている気がしてよくない
これどういう仕組だろう。イメージがつかなかったtakker.icon
何らかのボタンを押すと、bundle→コード書き換え→リロードが自動で走るという解釈でいいのかな
違いそう。terminalでbundleをしたコードをpreload.jsが勝手に読み取ってくれるのか hot reloadまではできていませんでしたmeganii.icon
importPagesでインポートすれば、Your input is too largeを回避するために、UserScriptをいちいち分割貼り付けしなくてもよいのではないか説meganii.icon
https://gyazo.com/794b81e0d88c3c2c6cbb6d48b60f920e
これが理想takker.icon
これで分割貼付け回避
UserScript版scrapbox-bundlerを作って、importもしくはwebsocket経由で簡単に取り込めたらいいなとは思っているが、まだ着手してない
UserScript、CLI、web browserだけで実現する場合takker.icon
development
コードの変更があるたびにbundleし直す
bundled codeをscrapboxのページに書き込んでリロード
browserでタブを開いておく必要あり
WebSoket経由だと文字数制限は受けない？meganii.icon
試してないのでわかりません。もしかしたら受けるかもtakker.icon
production
URLからbundleする
ここでlocalhostも読み込めるなら、ローカルで編集したコードをそのまま取り込めるかも
その場合dev modeとツールを統一できる
wasm版esbuildだと差分だけbundleできないところが欠点。速度は遅い それでも手作業でコードを貼り付けるよりはずっと早い
書き込み
websocketで書き込む
ハリボテだけど、Electronのpreload.jsでUserScriptを無理矢理読み込ませて、ローカルだけで動作確認したあと、Scrapboxのimport APIで任意のプロジェクトにImportできるようにしたmeganii.icon 流れ
Denoでsrc/index.tsをいじる
ESBuildでbundleして、Electronのpreload.jsから読み込み動作確認
Importボタンを押すと、Electronがローカルファイル(bundle済み)を読み込み、importAPIでアップロード
Electronでブラウザを開いているので、WebScket経由でもいけそう