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

공동 참여를 환영합니다;)