如何实现类似Loom的Chrome Extension自定义弹窗窗口？

要实现像Loom那样完全自定义的扩展弹窗，核心是放弃Chrome默认的扩展弹窗机制，改用手动创建独立的浏览器窗口来承载自定义UI，具体步骤如下：

1. 配置Manifest文件（以V3为例） #

首先在manifest.json中声明必要权限，并指定后台服务脚本：

{
  "manifest_version": 3,
  "name": "Custom Popup Extension",
  "version": "1.0",
  "action": {
    "default_icon": {
      "16": "icons/icon16.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["windows", "tabs"]
}

• 移除action.default_popup字段，避免触发默认弹窗
• 申请windows权限用于创建自定义窗口，tabs权限用于获取当前窗口位置做居中计算

2. 监听扩展图标点击，创建自定义窗口 #

在background.js中监听扩展图标的点击事件，通过chrome.windows.create创建自定义弹窗：

chrome.action.onClicked.addListener(() => {
  // 定义弹窗尺寸
  const popupWidth = 400;
  const popupHeight = 600;

  // 获取当前浏览器窗口，计算居中位置
  chrome.windows.getCurrent((currentWin) => {
    const leftPos = Math.round((currentWin.width - popupWidth) / 2) + currentWin.left;
    const topPos = Math.round((currentWin.height - popupHeight) / 2) + currentWin.top;

    chrome.windows.create({
      url: "popup.html", // 自定义弹窗的HTML文件
      type: "popup",     // 弹窗类型，无地址栏、工具栏
      width: popupWidth,
      height: popupHeight,
      left: leftPos,
      top: topPos,
      focused: true      // 弹窗创建后自动获取焦点
    });
  });
});

3. 编写完全自定义的弹窗UI #

创建popup.html，你可以在这里自由编写HTML、CSS和JS，完全控制弹窗的样式和交互：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 360px;
      height: 560px;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #ffffff;
      border-radius: 8px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e5e7eb;
    }
    .close-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #6b7280;
    }
    .close-btn:hover {
      color: #374151;
    }
    /* 更多自定义样式 */
  </style>
</head>
<body>
  <div class="header">
    <h3>我的自定义弹窗</h3>
    <button class="close-btn" onclick="window.close()">×</button>
  </div>
  
  <!-- 这里添加你的弹窗内容，比如录制按钮、选项等 -->
  <div class="content">
    <p>这是完全自定义的弹窗区域</p>
  </div>
</body>
</html>

关键注意事项 #

• 窗口类型选择popup：这种类型的窗口没有浏览器的地址栏、书签栏等元素，视觉上更像原生应用弹窗
• 位置计算：通过获取当前窗口的位置和尺寸，计算出弹窗的居中位置，提升用户体验
• 通信机制：如果弹窗需要和后台脚本交互，可以使用chrome.runtime.sendMessage和chrome.runtime.onMessage实现
• 样式自由：弹窗的HTML/CSS完全由你控制，不受Chrome默认弹窗的尺寸和样式限制

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