Fixed and always on top popup window in a Chrome extension

Question

I'm working on a Google Chrome extension and I need to make a popup window that is fixed in a corner and always on top of the other windows.

I leave a reference image:

Answer 1

🥀 Bad news...

I'm sorry but it's not possible anymore to force a window to stay always on top. However, if you only need to open a window in the bottom-right corner of the screen, take a look at this other answer: Getting a Chrome app window to open at the bottom right of screen.

Before, one option was to use chrome.windows.create({ type: 'panel' }). Panels could have any size and position, supported the always on top functionality, could display any arbitrary piece of code... But they are gone now, as you can see on the docs:

"panel"

Deprecated in this API. A Chrome App panel-style window. Extensions can only see their own panel windows.

The main reason for the removal was that it's too expensive to maintain, as you can read in this article.

Another option used to be webKitNotifications.createHTMLNotification(), but that one is gone too:

Warning: webKitNotifications.createHTMLNotification() in the web notifications API has been deprecated. The new web notifications API only allows text. Chrome notifications API will be promoted to stable soon and web notifications will be updated to use the new rich notifications format.

You are not alone though. A lot of extension like Always On Top for YouTube™ or Picture in Picture Viewer relied on the always on top functionality and you can see from the bad reviews that they haven't been able or willing to find alternative solutions.

🎥 Alternative for images

One alternative to display only images (might not work for you as you probably need sound as well) would be to use an image notification with a canvas image that you can generate and update dynamically from a background script.

With this approach, you might be able to display animations/videos, but I'm not sure how smooth it would be.

💉 Alternative using context scripts

If you want to permanently display any arbitrary code to the user, you could use the tabs API to keep track of the active tab and insert custom code on it using executeScript and insertCSS.

The three main drawbacks of this approach are that:

• The content won't appear instantly, especially in the case of videos which need to load first, so when users switch tabs, they will actually notice how the injected content appears again and loads whatever it has to load.

• If Chrome is minimized or partially off-screen, they might not see the injected content.

• Conflicts with existing code on the page.