Popout — My side project for this weekend. Should I continue? Would you use it free or paid?

Earlier in the week, I asked Twitter to help with ideas for a domain I purchased for $145: popout.io

Shout out to these lovely people for ideas/help:

@safaorhanEN
@poppacalypse
@CadenSumner
@kwongyuli
@felix12777

The idea

In the end, I thought @CadenSumner's idea of a "pop-out window for anything" was most appropriate for this weekend's side of a side project.

The USP

There's already an abundance of picture-in-picture apps, but they are only for floating video players.

The USP is to create a floating app for ANYTHING on the web. Including:

👉 Documentation while you code
👉 Email, notes & references
👉 Media, videos, e-books & more

The challenge

The easiest method to accomplish this would be to build a Chrome App & use chrome.app.window with the alwaysOnTop parameter or a Chrome Extension and use chrome.windows.create with the {type: "panel"} parameter.

The big issue is that Chrome Apps are being deprecated in June 😡

...and Chrome Extensions no longer support "panels"; they were too expensive to maintain 😭

Potential solution

Seemingly, the only way to achieve this was to use a native desktop app (I opted for ElectronJS).

The app would be launched after a user had selected something to "pop-out" in a browser.

Step 1

I made a bookmarklet to select & click elements. It grabs the URL, element position/size & window scroll position.

It then fires window.open('popout://w=500....') to launch a desktop app called "popout" with the necessary parameters to identify where the element is, and how to find it.

Step 2

Next, I built a simple electron app which uses a <webview/> to

👉 Launch a window with alwaysOnTop
👉 Simulate your browser/screen size
👉 Load the URL
👉 Adjust size/position to frame the element neatly in the window

Applications

Aside from a floating video player (already very popular), documentation & notes are a big one.

Reading or copying & pasting, without flicking between windows is a powerful feature for single-screen use.

Limitations

👉 Resizing (elements are not responsive yet)

👉 Being able to locate elements which are hidden by default (outside of the main scroll window)

👉 Getting elements hidden by a login

👉 Popups & modals sometimes block the element or cause unintended issues

Potential improvements

👉 Make elements resizable (especially video, if possible)

👉 Add the ability to draw a box of any size which pops out into a new window

👉 Try and remove potential popups & modals which may obfuscate the element

A few questions

I have made a proof-of-concept. It's a lot more work to transform this into a consistent, durable, and bug-free solution.

I have a few questions:

💁‍♀️ Is it worth doing?

👩‍💻 Is this something you'd use?

💰 If so, would you pay for it?

P.s, As long as this is something you'd use, I'll probably still make it regardless of if you'd pay for it or not 😄

Thanks, everyone!