antfu/vscode-browse-lite

Feature request: add pure webview mode (that doesn't spawn chrome)

Closed this issue · 2 comments

henrikvilhelmberglund commented

Clear and concise description of the problem

All headless browser preview type extensions in VSCode right now are a bit janky because select dropdowns are broken, zoom is blurry and pointers are a bit messed up, for example hovering over a button just gives the normal pointer instead of the hand.

Suggested solution

I would like to request an additional pure webview mode that instead of an external Chrome uses the VSCode webview API for rendering a browser.

I made a silly example starting from the coding cat webview sample https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
and just adding

        <style>
        html { width: 100%; height: 100%; min-height: 100%; display: flex; }
        body { flex: 1; display: flex; }
        iframe { flex: 1; border: none; background: white; }
        </style>
	</head>
    <body>
    <iframe src="http://localhost:5173"></iframe>
    </body>
    </html>`;

in the rendering portion.

Advantages:

  • Feels a lot more "native" and light, no lag
  • Select dropdowns work
  • Cursors work
    webview

The main disadvantage is no context menus on right click, there's supposedly an API for that though. microsoft/vscode#54285
Also not sure how easy it is to add all the address bar fields and devtools and stuff, or zooming.

Just an idea!

Alternative

No response

Additional context

No response

Validations

antfu commented

This project was started at the time that VS Code did not allow embedding external webviews, so this approach was made. Since then, VS Code make it more open, and even made an extension on its own https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server. I think in general it would be better to use it instead. If you think that the current browse-lite's approach is still valuable to have that mode, PR welcome to do so. I personally don't have enough incentive to work on it.

henrikvilhelmberglund commented

Live Server doesn't allow for external stuff, it only works with its own server. Simple Browser works though and is a really simple webview window which works fine. To spice it up I added value: "http://localhost:5173" in the Simple Browser extension dist.js file command so I don't have to type the whole address when opening it too.

I don't really want to mess up your project by adding a second mode which also doesn't work great anyway (webview devtools basically is for the whole VSCode window) and I think the Simple Browser will work fine for simple stuff/demoing.

Thanks anyway!

  • 👍1