VSCode Embedded Browser

一.EmbeddedBrowser とは何か？

VS Code に埋め込まれたブラウザ。

2019 年 12 月 29 日になって、ようやくVS Code で実際にウェブページを閲覧できる最初のプラグインが誕生しました。その名も EmbeddedBrowser です

P.S. 最初のプラグインと称していますが、これは少しも誇張ではありません。既存の Browser Preview for VS Code は比較的近いですが、その方案自体に多くの制限があり、基本的なウェブ閲覧ニーズを満たすことができません。詳細は [iframe のセキュリティ制限を打破する 3 つの方案](/articles/iframe のセキュリティ制限を打破する 3 つの方案/) を参照

二。なぜ EmbeddedBrowser が必要なのか？

あなたの VS Code 中で直接ブラウザを開きます。

では、なぜ IDE 内でブラウザを開く必要があるのでしょうか？

多くのことを便利にできるからです。例えば、コードを書きながら Google 検索：

例えば、コードを書きながら API ドキュメントを確認：

また例えば、コードを書きながらローカル効果をプレビュー：

完全な機能リスト

• あなたの VS Code 中で任意の HTTP/HTTPS リンクを開きます。

• ジャンプ、前進、後退、リフレッシュをすべてサポート。

• 履歴をサポートし、URL 自動補完。

• VS Code 再起動時に開いているブラウザパネルを自動回復。

三。インストールと使用

VS Code プラグインマーケットに上架されており、即装即用、または VS Code 中でEmbeddedBrowser プラグインを検索してインストールできます

使い方は非常に簡単 で、コマンドを入力 するOpen Browser だけです

P.S. 何か問題がある場合、または機能提案がある場合は、issue を通じてフィードバック できます

四。実装原理

簡単に言えば、ローカルプロキシサービスを通じて転送し、セキュリティ制限を迂回し、さらにiframe を通じてページをロードします

VS Code が提供する Webview 能力、または埋め込みブラウザの具体的実装に興味がある場合は、以下を参照：

• [Webview_VSCode プラグイン開発ノート 5](/articles/webview-vscode プラグイン開発ノート 5/)

• [iframe のセキュリティ制限を打破する 3 つの方案](/articles/iframe のセキュリティ制限を打破する 3 つの方案/)

具体的実装詳細は、Github を参照：

• ソースコードリポジトリ：https://github.com/ayqy/browser

共同参加を歓迎します;)