时间戳

首页 > 解决方案 > 获取关闭时的窗口位置

javascript - 获取关闭时的窗口位置

问题描述

我有一个 chrome 扩展，可以在静态位置创建弹出窗口。但是，如果用户移动弹出窗口然后将其关闭。我想将下一个弹出窗口设置为在上一个关闭的相同位置打开。

我的后台页面已经在监听 onRemoved 和 onFocusedChanged，但它们只返回 Window ID。

有没有办法在用户移动弹出窗口后、关闭时或关闭之前获取弹出窗口的最后位置top和位置？left

标签： javascriptgoogle-chrome-extension

解决方案

我们可以使用beforeunload事件，我们需要一个同步的方法来保存数据，以保证它在页面的执行上下文被破坏之前成功完成。

如果弹出窗口运行您的扩展页面。

Popup 的页面脚本可以将大小保存在所有扩展页面之间共享的同步 localStorage 中，包括后台脚本，您下次可以使用保存的值创建弹出窗口。

window.addEventListener('beforeunload', () => {
  localStorage.windowSize = JSON.stringify({
    left: window.screenX,
    top: window.screenY,
    width: window.outerWidth,
    height: window.outerHeight,
  });
});

如果弹出窗口运行 Web URL。

我们将不得不使用一个内容脚本，我们可以在其中滥用chrome.runtime.connect将端口名称中的数据同步传递给后台脚本，后台脚本将解析并保存 chrome.storage.local 中的数据。当然，您也可以将这种方法用于第一种情况。

  • 内容脚本：

    window.addEventListener('beforeunload', () => {
  chrome.runtime.connect({
    name: 'windowSize:' + JSON.stringify({
      left: window.screenX,
      top: window.screenY,
      width: window.outerWidth,
      height: window.outerHeight,
    })
  });
});

    确保内容脚本在弹出窗口内运行，例如，在创建弹出窗口后立即通过后台脚本中的 chrome.tabs.executeScript 运行。

  • 背景脚本：

    chrome.runtime.onConnect.addListener(port => {
  if (port.name.startsWith('windowSize:')) {
    const windowSize = JSON.parse(port.name.slice('windowSize:'.length));
    chrome.storage.local.set({windowSize});
  }
});

推荐阅读