7 ms·
Show HN: A browser extension to use picture-in-picture with any website
- ba32107 6y agoHello 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/ https://www.tabfloater.io/ GitHub: https://github.com/tabfloater/tabfloater https://github.com/tabfloater/tabfloater Chrome Web Store: https://chrome.google.com/webstore/detail/iojgbjjdoanmhcmmihbapiejfbbadhjd https://chrome.google.com/webstore/detail/iojgbjjdoanmhcmmih... Firefox Addon: https://addons.mozilla.org/en-US/firefox/addon/tabfloater/ https://addons.mozilla.org/en-US/firefox/addon/tabfloater/ Thanks!
- scottfr 6y agoInterestingly 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 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!
- difosfor 6y agoWas 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!
- mistersquid 6y ago> 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.
- difosfor 6y agoYou can hook up a canvas element to be a source for a video element. But that's not very useful to me.
- raw_code69 6y agoHow confident are you that this solution does not impose any security/privacy implications ?
- ba32107 6y agoDepends 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 https://www.tabfloater.io/privacy
- forgotmypw17 6y agoI 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.
- everling 6y agoIn firefox you can float youtube videos, I use that frequently to casually watch something while working on something else.
- rawoke083600 6y agoKinda breaks on i3 (tiled window manager)
- ba32107 6y agoI am not familiar with that - do you mind opening a GH issue with the details? Thanks!
- Naac 6y agoUsing 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.
- patinshuti 6y agointeresting!
- mkoryak 6y agoOh great, a way to web-scale my 50 open tabs! (Joking aside, this looks useful, thanks!)
- thunderbong 6y agoI've been using this for a long time and it's been very useful. https://github.com/LorenzCK/OnTopReplica https://github.com/LorenzCK/OnTopReplica
- luckman212 6y agoThat looks amazing. I wish there was something like this for macOS.
- luckman212 6y agoHmm, seems like Hover[0] might be the answer. [0]: https://apps.apple.com/ro/app/hover-floating-window-image/id1502873830?mt=12 https://apps.apple.com/ro/app/hover-floating-window-image/id...
- jokethrowaway 6y agoWell done, that's definitely something I miss on Mac OS X. "Always on top" is standard in KDE
- savydv 6y agoIt's only me or someone also noticed that the logo looks similar to terra's logo
- ba32107 6y agoDo 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.
- dartharva 6y agoCan't you just open the sites in separate windows and resize them to the same effect?
- ba32107 6y agoNo, 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 :)
- atleta 6y agoWell, 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.
- ba32107 6y agoWhat 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.
- atleta 6y agoYeah, 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. :)
- theshadowknows 6y agoI legit was looking for something to do this Friday during work. Going to try it out for sure!
- westmeal 6y agoOooh nice. I'll try this out when I get a chance.
- behnamoh 6y agoRemember 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.
- ba32107 6y agoI'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.
- behnamoh 6y agoThanks 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.
- ba32107 6y agoI think I see what you mean - do you mean something like what this extension does? https://chrome.google.com/webstore/detail/tile-tabs-we/lbnnfjfjdijcnaakaebgcoemmlicjbnl 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.
- TheSpiceIsLife 6y agoThis 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/ https://www.autohotkey.com/ AHK is open source, if you want to take a look at, here: https://github.com/Lexikos/AutoHotkey_L https://github.com/Lexikos/AutoHotkey_L
- jackoop 6y agoReally 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.
- repartix 6y agoHow is this different than using the window manager in Linux?
- ba32107 6y agoI'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.