作ったもの
メンターを出現させることができるVSCodeの拡張をつくりましたhttps://t.co/FsjF6bApUD pic.twitter.com/GHrSP9E54E
— dyuji (@dyuji1) 2019年7月2日
前書き
基本的なことは多くの方の記事や、公式のチュートリアルを参考にしました。
この記事では、自分がその中でハマったことなどを覚え書き程度に記しておきます。
参考にしたサイト・記事等は最後にリンクを貼っておきます。参考
ハマったこと
1. Webview APIでは動画の再生、iframeによる動画の埋め込みができなかった
当初の予定では、動画ファイルとjavascriptのクロマキー合成を使って埋め込むことで、召喚しようと計画していました。
しかし動画ファイル(videoタグ)を入れてもwebviewでは再生できませんでした
また、youtubeやviemoをiframeを使って埋めこもうともしましたが、外部サイトへのアクセスやスクリプトの読み込みに制限がかかるらしく、うまくいきませんでした。
結果として動画編集ソフトで背景を透明にしたGIFアニメーションを自作し、それをimgタグで読み込むことで表示しました。
また、webviewを利用しているので、cssで画像をウィンドウサイズに合わせて変形させるようにできました。
2. コンテンツセキュリティポリシー(CSP)
webviewのAPIドキュメントに、webview(htmlファイル等)にはコンテンツセキュリティポリシー(CSP)を入れることがベストプラクティスとして記載されています。ｰ>リンク
無学なことで、このCSPについて知りませんでした。
CSPとはXSS攻撃に代表されるブラウザで用いられるコンテンツを使った攻撃を防ぐべく、サーバサイドからブラウザに対してコンテンツの使用ポリシーを伝えて各種攻撃を回避するものだそうです。
3. アクセストークンの発行の時の権限の設定
できた拡張を登録しようとした際、ステータス403でPublishができないエラーが発生しました。
これはアクセストークンのOrganizationをAll accessible organazationに設定することで解消されました。
Publishing Extension
結果として、Organazationを提供する組織名の設定と勘違いしていたのが原因でした。ドキュメントをちゃんと読みましょう(自戒)。
4. 画像やリソースをsrc内にいれない
拡張機能を作成後、手元で動作確認をした上でMarketPlaceにデプロイしました。
しかし、マーケットからインストールしてみたところ、画像が表示されず、リソースのエラーが発生しました。
これは、開発段階ではsrc以下に画像等のリソースを入れていたのですが、そこに配置しておくとデプロイした際リソースはパッケージ内に入りませんでした。
プロジェクトのルートフォルダに配置して相対パスで指定することでエラーが解消されました
まとめ・感想
短時間であるものの、作ったものに反響ももらい、いい経験になりました。
VsCodeの拡張は開発しやすいと感じたので、是非作ってみてください
参考
公式
Qiita,Blog
- VSCode拡張機能開発の始め方 (2018/12/07)
- Contents Security Policy（CSP）のお勉強 (2018/4/25)
- Visual Studio Code 拡張の開発～公開までの流れをザックリ説明してみる (2018/05/23)
- VSCode拡張機能開発で次の一歩 -- ファイル操作 & クリップボード操作 & 外部アプリ操作 & 自作拡張機能紹介 merge-n-paste (2017/12/22)
- Visual Studio Code はじめての拡張機能開発 (2016/08/15)