如何从Chrome扩展实现类Bitly风格的极简标题栏窗口？

我刚好做过类似的需求，给你分享几个关键的实现要点，完美匹配你想要的Bitly扩展风格效果：

1. 用chrome.windows.create配置核心参数，解决最大化和置顶问题 #

Chrome的chrome.windows.create其实有几个容易被忽略的参数，刚好能解决你遇到的两个核心问题：

• type: "popup"：这个参数会让窗口使用Chrome的极简弹窗样式——没有复杂的工具栏，标题栏只有最基础的关闭按钮（Mac上是圆形的交通灯按钮），完全符合你要的极简边框效果。
• alwaysOnTop: true：强制弹窗始终处于所有窗口的最上层，哪怕主浏览器窗口是最大化状态，也能稳稳地显示在上方。
• state: "normal"：明确指定窗口以普通尺寸打开，避免继承主窗口的最大化状态。

直接上代码示例：

chrome.windows.create({
  url: "your-popup-content.html", // 替换成你的弹窗页面地址
  type: "popup",
  width: 420, // 根据需求调整宽度
  height: 320, // 根据需求调整高度
  alwaysOnTop: true,
  state: "normal"
});

2. 自定义标题栏（追求极致极简时可选） #

如果默认的popup标题栏还是不符合你的审美，你可以完全隐藏它，自己实现一个自定义标题栏。这里需要用到CSS的-webkit-app-region属性来支持窗口拖动：

首先是弹窗页面的CSS：

body {
  margin: 0;
  overflow: hidden; /* 避免内容溢出 */
}

/* 自定义标题栏 */
.custom-titlebar {
  height: 28px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  -webkit-app-region: drag; /* 允许拖动这个区域来移动窗口 */
}

/* 自定义关闭按钮 */
.close-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ff5c5c;
  cursor: pointer;
  -webkit-app-region: no-drag; /* 按钮区域禁止拖动，避免点击冲突 */
}

然后是弹窗页面的JS，处理关闭逻辑：

// 点击自定义关闭按钮关闭窗口
document.querySelector('.close-btn').addEventListener('click', () => {
  chrome.windows.getCurrent((currentWindow) => {
    chrome.windows.remove(currentWindow.id);
  });
});

这样就能实现完全自定义的极简标题栏，甚至可以去掉所有多余元素，只保留你需要的交互按钮。

3. Mac系统的额外注意事项 #

在Mac上，只要你设置了alwaysOnTop: true，弹窗就能稳定地显示在最大化的主浏览器窗口上方，不需要额外调整系统设置。不过要注意：

• 不要设置state: "maximized"，保持normal状态并指定固定宽高，避免弹窗被强制拉伸到全屏。
• 如果你在调试时遇到弹窗被遮挡的情况，检查一下Chrome的“始终在最前”设置是否被其他窗口抢占，一般重启扩展就能解决。

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