Show HN: A browser extension to use picture-in-picture with any website | Hacker News Reader

Show HN: A browser extension to use picture-in-picture with any website

tabfloater.io

103 pointsba3210749 comments

Hello everybody! I created a browser extension called TabFloater, which can replicate the picture-in-picture functionality with any website. It moves a chosen tab into a smaller window, which is going to remain always on top, so you can interact with both websites at the same time.

This is my very first post on HN. I have been working on this pet project for a bit over a year now. The motivation for it was simple: because I use my browser in a single, fully maximized window, many times I found myself switching back and forth between two tabs, for example to copy something from one website and use it on another. I know there are many extensions that can rearrange tabs for you, but I wanted something a little bit different. I really liked how picture-in-picture works for videos - I wanted to do the same!

Easy enough, I thought. I just need to create a new browser window, move the given tab into it, then... I just need to make it always on top. Right? Well, turns out, the browser API doesn't allow you to do that. So after a lot of trial end error, I came up with a way to achieve it: I implemented a small app in C++ that can manipulate the browser window and set the always-on-top property. Then "all I needed" was to hook it up with the browser extension and voila.

I also implemented a feature I call "Smart positioning": if you enable it, the extension will analyze the DOM structure of a given site and tries to identify the largest empty area and puts the floating tab there. This way, it doesn't cover up any text, pictures or videos. It more or less works :)

Sounds pretty simple, but I spent a LOT of time trying out different things. I use Linux, so naturally I implemented it for that platform first, but I knew it would never be useful for other people if there wasn't a Windows version as well - so I did that too. I worked on this project on evenings and weekends, and I learned a lot. This was my first proper pet project and I'm really glad I was able to see it through!

The extension is available for Chrome and Firefox, and you can use it on Windows and most Linux distros. The native application doesn't have an OS/X version - sorry :) I don't own a Mac and I don't know anything about the Apple ecosystem. I'm looking for help in that department, if you're interested! :)

Reminder: in addition to the browser extension, you must also install the native application (called Companion).

Site: https://www.tabfloater.io/

GitHub: https://github.com/tabfloater/tabfloater

Chrome Web Store: https://chrome.google.com/webstore/detail/iojgbjjdoanmhcmmih...

Firefox Addon: https://addons.mozilla.org/en-US/firefox/addon/tabfloater/

Thanks!

As someone who has used http://www.vanmiddlesworth.org/vitrite/ to toggle always-on-top and transparency for a long time, it is strange to see this -- browser-specific -- reinvention of basic window management.

On the other hand, my desktop is 2560 pixels wide, and as a result, I've never had the need nor desire to maximise anything. I also rarely use multiple tabs, preferring separate windows instead, which I can then arrange as I please. I wonder if the popularisation of tabbed browsing has decreased the desire/visibility of comparing/contrasting in general, since as you mentioned, it is much more difficult when you can only see one site at a time.

Here's a cross-platform alternative to this: https://github.com/kamranahmedse/pennywise

Wow I didn't come across this during my research - seems similar to my solution, although TabFloater is a little bit different!

I have the same resolution size :) I agree that the usefulness of this app depends on how you use your browser. I do the exact opposite of you, at any time I have at least 20-30 tabs open and I regularly switch back and forth.

I prefer to think of TabFloater as not an app that creates/moves/manipulates extra browser windows (even though that is what actually happens), but an app that adds an extra browser functionality (picture-in-picture). In this sense, I think it makes sense that it brings its own "always-on-topness".

I'm also aware that this app solves a pretty niche use-case - but it was fun developing it and I learned a lot!

This is a concept that was always in use in the now dead AOL browser. It was a concept I always liked and preferred it to tabs, but could never find anything to match it. I'll be sure to give this a go.

edit: for the curious https://i.pinimg.com/originals/44/3a/7b/443a7b1de502069e3fa9...

Your uninstall feedback form is broken, on Firefox at least.

What I was going to give feedback: An ability to locate the bin file from settings in the extension would be good, as I can't modify the registry.

The uninstall form uses Google Analytics to record answers. I suspect you've configured your browser to block tracking content, which is why it doesn't work for you. Thanks for letting me know this - I've updated the error message so that other people would understand why it doesn't work.

As for your actual feedback: there is no way to achieve this from the extension. The extension doesn't know where the companion executable is - it is the browser that connects the two applications.

However, you can enable debugging, then you can open the companion log file, which will contain the path to the executable.

Out of curiosity, why do you need to know the location? What were you trying to change in the registry? Is this the reason you uninstalled it? Maybe I can help.

Thanks for explaining. Sorry, I never said, I need to use the portable companion but don't have registry access (which is fine). I only uninstalled the addon as couldn't use companion. Thanks.

Hmm, I haven't thought of this use-case. I think this could also work if you put the registry entries into HKEY_CURRENT_USER (as opposed to HKEY_LOCAL_MACHINE).

If you'd like to experiment, you can change the register script to put entries into HKCU instead of HKLM. It might just work!

It's too bad the companion does not work for Mac. So, when I use this, it does not stay "on top".

I agree - this would be a great addition. I can't justify buying a Mac for this unfortunately.

I have https://github.com/tabfloater/tabfloater/issues/189 open in case there are any OS/X devs are here :)

Interestingly Chrome use to support always on top windows in extensions. They eventually got removed

There is a very interesting comment from one of the developers on the removal bug (https://bugs.chromium.org/p/chromium/issues/detail?id=467808):

> While closing this issue as "Fixed", I feel I need to offer a couple of words of personal explanation to the users of Trello who were directed here by the developer of the app, as well as others who can be interested.

> I'm the original developer of Panels in Chrome, and I'm the engineer who's lead a team to maintain them. I also finally removed them. Panels were a part of my life in form of time, thoughts, inspiration and passion. Our initial plans were to enable panels to all apps which wanted to use them, and we saw how those can be useful of course. It is with sadness but also with appreciation of the experience that I had to remove the feature from Chrome M54.

> The time passes and things change, we all learn. In case of Panels, we "proved" by practice that it takes a team of a few engineers full time to be able to catch up with teams of OS developers in Windows, OSX, Linux and even our own ChromeOS. The window management and graphics/input subsystems are constantly evolving and it is more or less prohibitively expensive for a small team to try to build and keep a high quality but non-standard window management mode. OSes have too many mechanisms that are linked to a specific windows behaviors (focus, window switching, active windows treatment, titlebars, where input goes, shortcuts, animations, multiple desktops, other OS gadgets etc), and usually OSes do not provide 'hooks' or APIs to integrate with those, which makes it necessary to 'reverse-engineer' and hack around. While it can be done, it quickly leads to 'card house' design that falls down even easier with the next major OS update... So the costs of development and testing rise.

> There was another factor that kept us from enabling panels for all apps. The specific UI Panels provide does not scale well if/when multiple apps are using it. It is very easy to get in trouble with multiple always-on-top windows popping up from multiple apps. Several independent apps using panels at the same time actually makes the interface annoying and hard to control. We had several apps using Panels at the same time and it was hard to manage windows because they were all intermixed. There were several design ideas on how to build some 'panel managers' and corresponding APIs but they increased the complexity significantly, especially considering those would be in addition to APIs OS provides for other windows. So we never were able to enable it for every app.

> Now, if the major OSes would adopt the concept and built into their window managers, it'd be much much easier to support it in Chrome. But it's not the case, except for ChromeOS where panels stay.

> So at the end, this was a great experiment. We are now way past the point where additional discussion can move the needle much. Google Hangouts app had millions of users and some of them loved Panels. Apparently Plus for Trello has passionate followers. The YouTube viewers is a neat idea. But we all need to move forward, the platforms change much faster and generally to the better :) Hope developers of your favorite apps will figure out even better ways to implement great UI their users demand!

Indeed, I did not found this particular thread, but I have come across the fact that it was supported in the past. I guess my solution will also be a bit fragile, but so far, it works :)

I was also contemplating removing the borders and title bar of the floating window, so that it would much more like a panel, but on Windows, Chrome actually draws its own title bar, so you cannot remove it using the Windows API.

Was also disappointed to find that browser picture in picture support was limited to a video element. Wish I could just use it on any element, like with fullscreen.

I can imagine some complexity as explained. But for example it seems reasonable to me to limit browser panel/PiP support to a single element at a time like it is now for video to avoid some of that.

This looks interesting!

> Was also disappointed to find that browser picture in picture support was limited to a video element. Wish I could just use it on any element, like with fullscreen.

I have not yet experimented, but perhaps a video element can be styled or injected with HTML/CSS to present non-video content.

You can hook up a canvas element to be a source for a video element. But that's not very useful to me.

This is a great idea, and I'm sure many people will have use for in-browser, or in specific-app, only implementation.

I've used AutoHotKey for over a decade to do always on top switching.

   ;CTRL-SHIFT-SPACE switches the current window always on top
   ^+SPACE::  Winset, Alwaysontop, , A
   Return

I know there are programs dedicated to always on top management, but this is simple and I typically have AutoHotKey running for other reasons too, shortcuts for CAD / CAM software and graphic design.

Find AHK here: https://www.autohotkey.com/

AHK is open source, if you want to take a look at, here: https://github.com/Lexikos/AutoHotkey_L

In firefox you can float youtube videos, I use that frequently to casually watch something while working on something else.

Firefox's PIP has to be the browser's single most useful feature in recent years for me.

Indeed - with this, you can float just about anything :)

Can't you just open the sites in separate windows and resize them to the same effect?

No, because as soon as you click on "large" browser window, the smaller one will drop to the background immediately. It won't stay on top.

You could of course move the window next to your main browser window - but, you would need to first open a new window, move your tab into that window, resize and position it manually... it's tedious.

with TabFloater it's just one click :)

Well, I can grab the tab off the browser window, then enable 'always on top'. But yep, that's more than one click, so I guess if someone does this all the time then it makes sense for them to automate it.

What OS do you use? In Linux, there is a built in "always-on-top" feature, but on Windows there is not.

Also, don't forget you have Smart Positioning :) That feature is pretty powerful IMO.

Yeah, I almost mentioned that I'm using gnome on linux but then I thought that this must be a ubiquitous feature. Now I'm surprised and have to look up if "always on top" was there in windows XP (the last version I've used) or not. :)

I've been using this for a long time and it's been very useful.

https://github.com/LorenzCK/OnTopReplica

That looks amazing. I wish there was something like this for macOS.

Hmm, seems like Hover[0] might be the answer.

[0]: https://apps.apple.com/ro/app/hover-floating-window-image/id...

Oh great, a way to web-scale my 50 open tabs!

(Joking aside, this looks useful, thanks!)

Really nice tool. I will try using it daily. "Smart Positioning" is not perfect yet, but for me, it's the killer feature.

This is way better than what any window manager can do.

Remember to disable "Send Usage Statistics" before using this.

Also, the required companion exe app on Windows was blocked twice: once by Firefox and then again by Windows.

I'm aware that Windows User Access Control blocks the Companion installer - sadly I don't have a way to fix this at the moment. I would need to sign the installer exe with a code signing certificate that is trusted by Windows, and this costs hundreds of dollars. I can't afford this.

As for the usage stats: if enabled, it sends data to Google Analytics, stuff like how many people installed it, how many people used X or Y feature. It really only exist to help me track how people use it.

It is of course completely up to you if you want to disable it - but as with any product, usage stats just help developers make the product better.

Thanks for explaining this. I appreciate the effort you've put into this, and this is certainly something I've always wanted browsers to support. One suggestion: is it possible to see the tabs next to each other in the same window? Something like "splitting" the window in VS Code.

I think I see what you mean - do you mean something like what this extension does? https://chrome.google.com/webstore/detail/tile-tabs-we/lbnnf...

I knew these tiling managers exist for tabs, but I wanted to take a slightly different approach on multitasking. TabFloater is primarily useful if you use your browser in a single-window mode. Within one window, it's impossible (AFAIK) to arrange tabs the way you mentioned, you would need separate windows. If you'd like that functionality, the above linked extension should work great.

Kinda breaks on i3 (tiled window manager)

I am not familiar with that - do you mind opening a GH issue with the details? Thanks!

Using it on i3 I don't see that it "breaks" anything. A new floating window is opened which can be moved around.

On i3 it looks like this add-on essentially automates opening the tab in a new window, and floating it. Which I think has some value.

I use a browser which allows me to override "fullscreen" mode to only go full-screen within the browser window, but not actually expand to the full screen. After that, it's just a matter of setting it "always on top", which the window manager makes easy. However, for videos I actually want to watch, I prefer to just download them and watch in mpv.

How confident are you that this solution does not impose any security/privacy implications ?

Depends on what you mean. If we are talking about whether or not TabFloater itself can be trusted, then I'm 100% confident since I wrote it :) It's fully open source, the companion binaries are built through GitHub Actions, so I have no chance of introducing malicious code. The Chrome extension is also published through GitHub Actions. All this means that you can be sure you're running the same code that you read on GitHub. Publishing the Firefox addon is manual at the moment (they don't offer a great API for automated publishing), but Firefox requires me to submit source code alongside the extension, and they review it.

If you meant an unintentional security issue, then I think we are still good. The only thing the extension communicates to the native application is the title of the current browser tab, which is arguably personal information. However the native application is running on your machine, and you chose to install it. There's no way for remote machines to get your info this way. The only scenario I can see for leaking private info is if someone creates a malware that mimics TabFloater Companion and somehow manages to get it on your machine without you knowing. Then, they will get the titles of the sites you use TabFloater on. There are so many better ways for attackers to get the same information - I think this risk is negligible.

Of course, if you see any other issue that I might have missed, do let me know!

Also have a look at the privacy policy if you haven't already: https://www.tabfloater.io/privacy

I legit was looking for something to do this Friday during work. Going to try it out for sure!

It's only me or someone also noticed that the logo looks similar to terra's logo

Do you mean Terraform? If so, then I suppose yes... both resemble a T :)

This should be an original logo though - not made by me, but made explicitly for this project by someone.

Well done, that's definitely something I miss on Mac OS X.

"Always on top" is standard in KDE

How is this different than using the window manager in Linux?

I'm assuming by "using the window manager in Linux" you mean you can manually put windows always-on-top.

Three reasons this is different: 1. The window is actually not on top of every window - it's only top of your browser. It's "attached" to your browser window, same way a real PiP would. 2. It's less clicks and also positions the window automatically for you. 3. It's cross platform. Windows doesn't have an easy user-accessible way to enable always-on-top.

Oooh nice. I'll try this out when I get a chance.

interesting!

Reply on news.ycombinator.com