Visual Studio Codeの［拡張機能］で表示したWebViewPanelにループバック（127.0.0.1）アドレスを表示する手順を備忘録的に投稿します。
拡張機能の自作
VSCodeでは、拡張機能を独自に開発して追加ができます。
［Node.js］をインストールする必要がありますが、必要な機能の実装が可能です。
自作の［拡張機能］の開発を進めるための準備やプロジェクトの作成や実行などの詳細は別記事をご覧ください。
WebViewPanelのセキュリティ
VSCodeの機能拡張で結果などをコンテンツを表示するWebViewPanelがあります。
こんな感じで、HTML形式でコンテンツを用意してコード編集画面などのタブに追加ができるパネルです。
この［WebViewPanel］はHTMLでリンクや画像などを手軽に追加できるので非常に便利な表示方法です。
ですが、Androidの［WebView］のように非SSLのURLやローカルのコンテンツについてはセキュリティを保持するため表示されない場合があります。
通常はあまり使用しないIPアドレスを使用したURLの表示にハマりました。
ループバックアドレスの表示
通常は利用することはありませんが、デバッグ表示などで利用するループバックアドレスのコンテンツを表示しようとした場合があります。
WebViewPanelに表示する場合には次の手順で表示ができました。
1.［createWebViewPanel］の引数に “enableScripts: true” を追加します。
2. 関数を追加して、［iframe］を利用したループバックアドレスを表示するコンテンツを作成します。
function getContent(url: string) {
var html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<style>
html
{
display:flex;
width:100%;
height:100%;
min-height:100%;
}
body
{
display:flex;
flex:1;
}
iframe
{
flex:1;
border:none;
}
</style>
</head>
<body>
<iframe src="http://127.0.0.1"></iframe>
</body>
</html>`
return html
}
3. 実行すると［Hello World］タブにループバックアドレスのコンテンツがが表示されます。
まとめ
Visual Studio Codeの［拡張機能］で表示したWebViewPanelにループバック（127.0.0.1）アドレスを表示する手順について書きました。
セキュリティ面を考慮して既定値では表示されない非SSLやIPアドレスを含んだURLのコンテンツは、HTML内の［iframe］タグを利用して表示が可能でした。
VSCodeで独自の拡張機能でループバックアドレスを利用したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。