[Scrap] VSCode の extension を Flutter で作ってみる
へぶん目的
マインドマップを VSCode 内で書けるエディタを作りたい
以下のようなものを作りたい。
記事書くときにいつもマインドマップを書いてて、普段は Mac アプリの MindNode を使っている。だけど、記事執筆と同じエディタ内で書いて Git に載せたいなーと思っていた。
へぶんセットアップ
へぶん仮の設計
VSCode extension で WebView を表示できるようなので、以下のように extension がファイルと表示の橋渡しになって MindMap の UI とやりとりするイメージで作る。
(名前は仮で deer にした)
へぶんFlutter for Web を読み込ませているがうまくいかない
main.dart.js 内で Style Element を生成する箇所でエラーが出ているっぽい
へぶんContent-Security-Policy で style-src を指定しているので、Javascript からの書き換えを違反と見做しているっぽい。
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none';
style-src ${webview.cspSource};
img-src ${webview.cspSource} https:;
script-src 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' 'nonce-${nonce}';"
>
解決策
style-src に 'unsafe-inline' を追加することで解決した。
<meta http-equiv="Content-Security-Policy"
content="default-src 'none';
style-src ${webview.cspSource} 'unsafe-inline';
img-src ${webview.cspSource} https:;
script-src 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' 'nonce-${nonce}';"
>
上記が解決したら、別のエラーが出た。CDN のアクセスっぽい。メッセージの通り connect-src を追記してみよう。
canvaskit.js:258 Refused to connect to 'https://unpkg.com/canvaskit-wasm@0.30.0/bin/canvaskit.wasm' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
上記を追加すると同様の内容で別のエラーが出た。こういうのを潰していくことになりそう。
Refused to connect to 'vscode-webview://f5e1e1ae-88dd-47db-8ad7-11926c544419/assets/FontManifest.json' because it violates the following Content Security Policy directive: "connect-src https://unpkg.com".
解決策
connect-src を以下のように修正した。
connect-src https://unpkg.com vscode-webview://*;
また別のエラーが出た。
main.dart.js:4788 Refused to connect to 'vscode-webview://87af9f75-24b1-426d-93ad-ffeea4e07a63/assets/FontManifest.json' because it violates the following Content Security Policy directive: "connect-src https://unpkg.com".
main.dart.js:2184 Uncaught Failed to load asset at "assets/FontManifest.json" (0)
対応1
connect-src に vscode-webview://* を追加して、Content-Security-Policy のエラーは消えたが main.dart.js 側のエラーは消えない。
connect-src https://unpkg.com vscode-webview://*;
base url を変更すれば上記のエラーは消せるが、Flutter 側から History API にアクセスした際に不正な処理と見做されてエラーになる。(グレーの画面が出たのは嬉しかった)
この問題は、おそらく以下のようなものだと推測している。
- Flutter の初期化の処理内でフォントの読み込みを静的解決ではなく、fetch している
- fetch しようとすると webview 内の URL のため、request が不正と見做されて abort される。
今回のエラーを消すには根本的に理解を深める必要がありそう。一旦並行して学びつつ、他プロジェクトで React で上手くいっているところはあるので、一旦そちらを参考に React で進める。
へぶんFlutter の VScode Extension が参考になりそう
へぶん誰かのためになるかも知れないが、一旦 Web の技術で実装する方針でいこうと思うのでクローズする。