javascript - 已修复且始终位于 Chrome 扩展程序中的顶部弹出窗口

Question

我正在开发 Google Chrome 扩展程序，我需要制作一个固定在 Angular 落的弹出窗口，并且始终位于其他窗口的顶部。

我留下一个引用图像:

Answer 1

🥀坏消息...

很抱歉，现在无法强制窗口始终保持在顶部。但是，如果您只需要在屏幕右下角打开一个窗口，请查看另一个答案:Getting a Chrome app window to open at the bottom right of screen .

以前，一种选择是使用 chrome.windows.create({ type: 'panel' }) .面板可以有任何大小和位置，支持始终在顶部的功能，可以显示任意一段代码... 但他们现在走了 ，正如您在 docs 上看到的那样:

"panel"

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

删除的主要原因是维护成本太高，您可以在 this article 中阅读。 .

另一个选项曾经是 webKitNotifications.createHTMLNotification() , 但是那个也不见了 :

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.

你并不孤单。很多扩展，如 Always On Top for YouTube™或 Picture in Picture Viewer依靠始终处于领先地位的功能，您可以从差评中看到他们无法或不愿意找到替代解决方案。

🎥 替代图片

仅显示图像的一种替代方法(可能不适合您，因为您可能还需要声音)是使用 image notification使用可以从 background script 动态生成和更新的 Canvas 图像.

使用这种方法，您也许可以显示动画/视频，但我不确定它的流畅程度。

💉 使用上下文脚本的替代方案

如果您想向用户永久显示任意代码，可以使用 tabs API使用 executeScript 跟踪事件选项卡并在其上插入自定义代码和 insertCSS .

这种方法的三个主要缺点是:

内容不会立即出现，尤其是在需要首先加载的视频的情况下，因此当用户切换标签时，他们实际上会注意到注入(inject)的内容如何再次出现并加载它必须加载的任何内容。

如果 Chrome 被最小化或部分离开屏幕，他们可能看不到注入(inject)的内容。

与页面上的现有代码冲突。