Chrome扩展可移动调整大小弹窗开发：全屏尺寸失效、无标题栏实现问题

全屏模式下弹窗尺寸失效修复 #

Chrome全屏模式下调用chrome.windows.create创建popup类型窗口时，宽高参数会被默认忽略，可通过创建后主动调用窗口更新接口强制生效：

chrome.action.onClicked.addListener(async tab => {
  // 创建初始弹窗
  const newWindow = await chrome.windows.create({
    url: 'index.html',
    height: 400,
    width: 400,
    type: 'popup',
    focused: true,
  });
  // 强制覆盖窗口尺寸与位置，不受全屏模式影响
  await chrome.windows.update(newWindow.id, {
    width: 400,
    height: 400,
    left: Math.round((screen.availWidth - 400) / 2),
    top: Math.round((screen.availHeight - 400) / 2)
  });
});

该方案兼容所有支持Manifest V3的Chrome版本，全屏/非全屏模式下均生效。

无标题栏弹窗实现方案 #

目前Chrome桌面端未开放通用的独立窗口无标题栏（frameless）能力，panel类型仅支持Chrome OS白名单内扩展，可选择以下两种替代方案：

方案一：页面注入悬浮层（推荐） #

放弃系统级独立窗口，改用content script向当前激活页面注入自定义DOM容器：

• 完全无系统标题栏，样式可1:1对齐原生action.default_popup效果
• 全屏模式下可正常展示，尺寸不受Chrome窗口状态影响
• 拖动、尺寸调整逻辑完全自定义可控
• 实现时需注意将容器z-index设置为足够高的数值，避免被页面原有元素遮挡

方案二：独立窗口视觉模拟 #

如果必须使用独立窗口，可通过样式优化弱化标题栏存在感：

• 弹窗页面全局移除默认边距，自定义顶部交互栏，视觉上与系统标题栏融合
• 自行实现顶部拖动逻辑，交互体验接近无标题栏效果
• Chrome后续将上线独立窗口控制层覆盖能力，正式发布后可实现完全无标题栏的独立扩展窗口。

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