fabianlauer / chrome-vs-code

A web browser integrated in VS Code editor tabs. :radioactive: experimental :radioactive:

Chrome VS Code PREVIEW

Google Chrome for Visual Studio Code.

First things first: This is a preview.

Chrome VS Code is currently an early version of what could become a very handy extension for many Visual Studio Code users. Chrome VS Code has to work around content security policies to escape VS Code's sandbox though, which means that security concerns are yet to be resolved. To limit these concerns, the following precautions are taken:

• No cookies as of yet. This means you can't log in anywhere.
• No local storage, session storage, etc.

This means, there is no such thing as safe browsing. Make sure you're fine with the risk before you install and use it. Also, you are very likely to encounter bugs — please be a dear and report them over at GitHub. Or why not submit a PR or two? 😉

---

Key Features

👌 stable     ⚒ experimental     ✋ not implemented

Status	Feature
⚒	Browse to http:// and https:// URLs
⚒	Browse to file:// URLs
👌	Use address bar to search the web with your favorite search engine
👌	Open in normal and split view
👌	Customizable homepage
👌	VS Code dark theme
👌	VS Code light theme
✋	VS Code high-contrast theme
✋	Validate HTTPS certificates
✋	Cookies (this means you can't log in anywhere)
✋	Open selected URL
✋	Open PDFs
✋	Find in page

Known Issues

Unfortunately, some issues are probably here to stay:

• Tab rebuilds after being hidden or dragged #15437

How Chrome VS Code escapes the sandbox

VS Code has the capability of showing so called virtual documents in editor tabs. They are normally used to render previews for HTML, CSS, SVG, Markdown files and so on. Chrome VS Code renders its GUI inside such a virtual document.

Virtual documents live in a sandbox, though. This means that communication with a virtual document via JavaScript is limited by the same origin policy, thus just loading any website, say google.com, inside a virtual document will immediately prevent the JavaScript code 'surrounding' the virtual document from accessing the loaded web page. This is where it becomes tricky: In order for a browser to control web pages (UI and code injection), both the browser and the webpage must be loaded from the same origin.

To do this, Chrome VS Code runs a proxy server in the extension process through which requests are redirected. While not particularly elegant, it allows to circumvent the SOP.

Contributing

You're welcome to submit issues and PRs on GitHub — don't be shy!

License

MIT. See LICENSE file.

Disclaimer

The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

Screenshots

chrome-vs-code's Issues

getting localhost urls

I use visual studio code for Clojurescript development. Unfortunately I can't get the localhost to display on the plugin. It says something about the not finding a matching renderer.

Youtube Videos & Udemy.com

Hi, i have trouble in Youtube.com and Udemy.com:

Youtube problem:
Cannot reproduze any video and certains "clicks" don't response, ex: if you are on home page of youtube and click in any video you will not be redirect to the video.

Udemy.com problem:
If you click in "Fazer Login" you get "Network Error"

Why about://home and not config.home?

So with such a confronting title question, let me start off by saying wicked extensions! You've literally saved my life! #ReferencingDocsWithLightningSpeed! Hats off to you! 🍻

But, back to the point... 😅 I've been flicking through for the last hour trying to figure out how this whole thing works, and after a lazy attempt to trace from the start, I decided to trace from the back and found out that you're loading about://home and then redirecting to the correct page from there. I've gotta ask... why? Why can't we just replace all references to about://home with config.home?

I've got it working without (*well... not quite without...) issues. And perhaps opening this up could be the beginning of right+click and 'Search Google for "potatoes"'?

So long story (3.5hrs worth) short, why not replace about://home with config.home?

locahost not works

Hello Fabian!

I just looking for a extension like this and i appear in my life, so THANKS!

Currently i am developing my Final Degree Project on Vue.Js but not works:
I'm not sure how to debug o fix that.

THANKS!!

Improve installation documentation

Information on adding extension should be avaliable in Readme.md or in docs. I found it in issues still users should get this information simpler.

Wrong interpretation of URL without protocol but with port number

When entering a URL such as localhost:8080/test, the URL is changed to localhost://8080/test. When adding a protocol to the URL, e.g. http://localhost:8080/test, it's interpreted correctly.

Question: How can I install this plugin in vs-code?

The title is the summary of the issue :)

Can someone please tell me how to run it after downloading?

What's up?

Hey,

I was wondering what's going on with your project.

Cheers from Switzerland

How to install ?

Please, post installation instructions.

Thanks!

Build errors (Cannot find module '/out/src/browser.js' )

steps to reproduce
clone repo
yarn install
I get that error(build docs would also be nice):
cp -r src/static/ out/src/static
./node_modules/.bin/coffee ./scripts/compileLessCss.coffee
./node_modules/.bin/browserify ./out/src/browser.js > ./out/src/browser.all.js
Error: Cannot find module '/home/m/chrome-vs-code/out/src/browser.js' from '/home/m/chrome-vs-code'
at /home/m/chrome-vs-code/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
at load (/home/m/chrome-vs-code/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/m/chrome-vs-code/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/m/chrome-vs-code/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:166:21)
Makefile:7: recipe for target 'all' failed
make: *** [all] Error 1

How to install

Is there any release of this extension available yet? Couldn't find it on vscode marketplace.

Support WebSocket For Live Reloading From Live Server

Hii, please make it support WebSokcet for live reloading from extension live-server
or simply just reloading when i save the file in the same url (localhost url)

Feature Request: Ability to select text and search in browser

It would be helpful if one could select the text (possibly errors), right click and choose Search in Browser

Would enhance workflow.

Instance (Borrowed from older issue by @TheBrenny)

let term = editor.selection; //actual variable
codeBrowser.search(term);

Installation guide

since this repo can't be found (this or i'm completely blind 😂) in the built-in vs-code extention market it would be nice to have an installation guide in the README.md 😄

vscode.previewHtml not found!

Hello! I've just tried to install chrome-vs-code but every time I try to open the browser, vs code gives me this error msg; vscode.previewHtml not found, any ideas?

Search for this in Code Chrome

Carrying on from #8.

Brain dump pseudo:

let term = editor.selection; //actual variable
codeBrowser.search(term);

Something more robust will be present tomorrow... 😴

NoSuchBucket and possible depreciation

http://emulator101.com

"404 Not Found
Code: NoSuchBucket
Message: The specified bucket does not exist
BucketName: emulator101.com
RequestId: FAA826CB4D6B4726
HostId: uY4w8ZWaEr+Osd/rnFRhqAQQ24CZV1CrxPYl0VvDSZ3GeHx/du1Eu4ta4vHxWKLq+mgAAoUoCWg="

Other than that great work, it's been pretty good to use.

Installation guide

Nice screenshots Fabian. Please how do I go about installing this extension in vs-code. I tried searching for it under Extensions, with keyword chrome-vs-code ... nothing.
Thanks please