Chrome扩展创建的窗口能否设为不可移动、支持动态调大小及窗口联动？

核心限制说明 #

Chrome 扩展的 chrome.windows API 没有原生提供锁定窗口位置的选项，用户默认可以通过拖拽标题栏移动窗口。以下是针对你的需求的具体实现方案：

1. 禁止用户移动窗口的最优方案 #

最彻底的解决方式是创建无边框弹窗窗口，去掉标题栏后用户没有可拖拽的区域，自然无法移动窗口。创建窗口时指定 frame: "none" 参数即可：

// background.js 中创建窗口的代码
let windowIds = [];

// 创建第一个无边框弹窗
chrome.windows.create({
  type: "popup",
  width: 300,
  height: 400,
  left: 100,
  top: 100,
  frame: "none" // 移除标题栏，禁止拖拽移动
}, (win1) => {
  windowIds.push(win1.id);
  // 创建第二个无边框弹窗
  chrome.windows.create({
    type: "popup",
    width: 300,
    height: 400,
    left: 500,
    top: 100,
    frame: "none"
  }, (win2) => {
    windowIds.push(win2.id);
    setupWindowSync();
  });
});

如果必须保留窗口标题栏，只能采用强制复位位置的替代方案：监听窗口移动事件，一旦检测到位置变化，立即将窗口重置到初始坐标。但这种方式会有明显的"跳回"感，用户体验较差：

// 替代方案：有边框窗口强制锁定位置
const initialPositions = {};

chrome.windows.create({ /* 窗口配置 */ }, (win) => {
  initialPositions[win.id] = { left: win.left, top: win.top };
});

chrome.windows.onBoundsChanged.addListener((window) => {
  if (!windowIds.includes(window.id)) return;
  const initPos = initialPositions[window.id];
  if (window.left !== initPos.left || window.top !== initPos.top) {
    chrome.windows.update(window.id, { left: initPos.left, top: initPos.top });
  }
});

2. 窗口联动调整实现 #

通过监听窗口的 onBoundsChanged 事件，当其中一个窗口的位置或大小变化时，同步更新另一个窗口的参数，保持相对位置和尺寸一致：

// background.js 中设置联动逻辑
function setupWindowSync() {
  // 记录初始窗口间距（根据你的创建坐标计算）
  const initialGap = 400; // 示例中第二个窗口left - 第一个窗口left = 500 - 100 = 400

  chrome.windows.onBoundsChanged.addListener((changedWindow) => {
    // 只处理我们创建的窗口
    if (!windowIds.includes(changedWindow.id)) return;

    // 获取另一个窗口的ID
    const otherWinId = windowIds.find(id => id !== changedWindow.id);
    if (!otherWinId) return;

    // 提取当前窗口的新尺寸和位置
    const { left, top, width, height } = changedWindow;

    // 计算另一个窗口的同步位置（保持水平间距，垂直位置一致）
    const newOtherLeft = changedWindow.id === windowIds[0] 
      ? left + initialGap 
      : left - initialGap;

    // 同步更新另一个窗口的位置和大小
    chrome.windows.update(otherWinId, {
      left: newOtherLeft,
      top: top,
      width: width,
      height: height
    });
  });
}

3. 自定义大小调整控件（针对无边框窗口） #

无边框窗口默认失去了系统自带的resize边框，需要在弹窗页面中添加自定义的拖拽手柄，实现手动调整大小：

<!-- 弹窗页面（popup.html）的resize手柄 -->
<div id="resize-handle"></div>

#resize-handle {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background-color: #555;
  cursor: se-resize;
  opacity: 0.7;
}

// 弹窗页面的脚本（popup.js）
const resizeHandle = document.getElementById('resize-handle');
let startX, startY, startWidth, startHeight;

resizeHandle.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  startY = e.clientY;
  chrome.windows.getCurrent(win => {
    startWidth = win.width;
    startHeight = win.height;
  });
  document.addEventListener('mousemove', handleResize);
  document.addEventListener('mouseup', stopResize);
});

function handleResize(e) {
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  chrome.windows.getCurrent(win => {
    chrome.windows.update(win.id, {
      width: startWidth + deltaX,
      height: startHeight + deltaY
    });
  });
}

function stopResize() {
  document.removeEventListener('mousemove', handleResize);
  document.removeEventListener('mouseup', stopResize);
}

内容的提问来源于stack exchange，提问作者Amit Sharma