antfu/broz

A simple, frameless browser for screenshots

broz

a simple, frameless browser for screenshots

$ npx broz antfu.me

FAQ

Drag the Window

There is a hidden dragging area in the top left corner:

Close the Window

You can do that by either:

• End the process in Terminal by ^C / Ctrl+C
• Keyboard shortcuts ⌘W / ⌘Q / Alt+F4
• Menu:

Change the URL

Just close it and create another :)

Navigation

• ⌘[ - Backward
• ⌘] - Forward

The rest is basically the same as Chrome.

broz's Issues

win10 drag-dot no hover style

since setting frameless for win10 is require, all elements with -webkit-app-region:drag;, will not receive any mouse events. :hover styles do not work.

have to find a solution sometime. just add this as tracking and reminder.. Also dragging works, just no hover background only win10

windows 10 breaking

see attached video

2021-05-03_08-10-01.mp4

Basic navigation

Is it possible to add an input field in a similar fashion as the drag button that can take user input and communicate it with the BrowserWindow object?

I've been playing around with this idea and tried a preload script,

webPreferences: {
    preload: path.join(__dirname, 'renderer.js'),
},

but I'm not sure if this is the correct route, or if this is even possible. I can't seem to get access to the client-side's window or document objects in order to execute

const input = document.getElementById('url-input')
input.addEventListener('submit', () => {
  ipcRenderer.send('search', input.value)
})

Zoom in don't works

Problem

I've zoomed out to take a better screenshot, but I could not zoom in again.

Demo

zoom-out-broz.mp4

Steps to reproduce

• Zoom out with Ctrl + -
• Try to zoom in with Ctrl + + or Ctrl + mouse scroll

Fullsize screenshot

Hey, love this project!

Would be awesome to add the ability to screenshot fullpage websites once the url is loaded

not border/frameless on ubuntu

I tried to use this on Ubuntu, through the NPX command in the README, but I still have a border around my Website

[Enhancement] Force Rounded Borders on Windows

Hi, loving the project. One thing that helps make the presentation more aesthetic (in addition to the frameless aspect) is rounded corners. Needless to say, OSX already does this automatically, but for Windows users, it would help a lot.

I don't use JS in my workflow very often, but it seems that setting the transparent flag to true in the browser initialization and appending some sort of border-radius styling onto the body of the page should do the trick.

If you want, I can make the PR, though I haven't written JS in a few years so it might take longer than it should (feel free to do it yourself if you know the details).

There's a good chance I could be doing something wrong too, regardless, here's where I got the idea.

Failed on localhost

I got an error, is localhost still unsupported?

$ npx broz http://localhost:3030/
Error: ERR_CONNECTION_REFUSED (-102) loading 'http://localhost:3030/'
    at rejectAndCleanup (electron/js2c/browser_init.js:217:1457)
    at Object.failListener (electron/js2c/browser_init.js:217:1670)
    at Object.emit (events.js:315:20) {
  errno: -102,
  code: 'ERR_CONNECTION_REFUSED',
  url: 'http://localhost:3030/'
}
Command failed: /Users/k3ntar0/.npm/_npx/10043/lib/node_modules/broz/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron/Users/k3ntar0/.npm/_npx/10043/lib/node_modules/broz/index.js http://localhost:3030/

Btw, I like all of your work!