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 鏈接。

• 跳轉、前進、後退、刷新全都支持。

• 支持歷史記錄，網址自動補全。

• 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

歡迎共同參與;)