Closed13

[Scrap] VSCode の extension を Flutter で作ってみる

目的

マインドマップを VSCode 内で書けるエディタを作りたい

以下のようなものを作りたい。

https://twitter.com/heavenOSK/status/1497522230003068930?s=20&t=HKqwai5A5BPJzsU1_BrMwA

記事書くときにいつもマインドマップを書いてて、普段は Mac アプリの MindNode を使っている。だけど、記事執筆と同じエディタ内で書いて Git に載せたいなーと思っていた。

仮の設計

VSCode extension で WebView を表示できるようなので、以下のように extension がファイルと表示の橋渡しになって MindMap の UI とやりとりするイメージで作る。
(名前は仮で deer にした)

一旦 MindMap 側の設計は置いておいて、以下の3点が分からないので実験してみる。

  • 特定のファイルを選択した時に WebView を開く方法
  • ファイルの情報を読み取って、WebView 上に表示する方法
  • WebView 上の操作からファイルを更新する方法

特定のファイルを選択した時に WebView を開く方法

とりあえず、WebView を開くことができた。

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-srcvscode-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 で進める。

誰かのためになるかも知れないが、一旦 Web の技術で実装する方針でいこうと思うのでクローズする。

このスクラップは4ヶ月前にクローズされました
ログインするとコメントできます