如何使 Chrome 扩展弹出窗口可拖动？答案

【问题标题】：How to make Chrome Extension popup draggable?如何使 Chrome 扩展弹出窗口可拖动？
【发布时间】：2019-10-12 19:58:34
【问题描述】：

我注意到 1password chrome 扩展浏览器操作弹出窗口是可拖动的。我怎样才能让我自己的 chrome 扩展做同样的事情？我似乎在 chrome 扩展文档中找不到任何内容。

1password chrome 扩展弹出窗口的其他一些我在文档中也找不到的功能。

当 1password 弹出窗口出现时，弹出窗口顶部有一个小三角形，出现在我的光标所在的位置。这是怎么发生的？据我所知，与弹出窗口关联的 html 文档显示为没有三角形的矩形。
我无法右键单击 1password 弹出窗口的正文来检查 javascript。这可能是因为它们覆盖了默认的 contextMenu 行为吗？

【问题讨论】：

【解决方案1】：

标准的弹出窗口不能被拖动，也不能在它的边界之外添加任何东西。这是在 manifest.json 中通过browser_action 或page_action 声明的弹出页面。

解决方法是：

使用chrome.windows.create打开一个单独的窗口，
将type 参数指定为'popup'
使用content script在网页内创建一个DOM元素，
另见How to really isolate stylesheets in the Google Chrome extension?
元素can be draggable。

要检查阻止上下文菜单的页面，您可以从浏览器菜单打开 devtools，然后打开“更多工具”，或者先聚焦地址栏，然后按热键打开 devtools (CtrlShifti 或 F12（在 Windows 中）或来自内部 UI 页面 chrome://inspect/#pages。

附：从技术上讲，您可以编写一个外部实用程序并通过nativeMessaging 运行它，因此它将使用低级操作系统 API 来移动标准弹出窗口，但这非常脆弱。

【讨论】：

感谢您的回答！我不想使用 chrome.windows.create，因为窗口在未聚焦时不会自动关闭，而且它还有带有关闭/最小化/最大化按钮的顶栏。但是 1password 的弹出窗口以某种方式做到了这一点。使其成为 DOM 元素似乎也不是 1password 在这里所做的，因为您可以将弹出窗口拖到网页边框之外。鉴于您所说，我认为 1password 根本没有使用标准弹出窗口，因为三角形位于弹出窗口的边界之外。在那种情况下，你知道 1password 可以做什么吗？
他们可以简单地在浏览器窗口上显示他们的桌面应用程序。
当 1password 弹出窗口出现时，我仍然认为 Chrome 是我 macbook 上的重点应用程序。这可能与桌面应用程序有关吗？
桌面应用程序通常可以做任何事情。看看你是否可以在 Windows 中找到类似于 SPYXX 的窗口检查器实用程序。