如何制作类似Klarna的带圆角边框的Chrome Extension？

默认Chrome扩展的原生弹窗（browser_action/page_action对应的popup）是Chrome系统控件，无法直接修改边框圆角、添加阴影，也不支持拖动。Klarna的扩展弹窗是用自定义独立窗口实现的，完全脱离原生限制，下面是具体实现步骤：

1. 修改manifest配置，替换原生弹窗触发逻辑 #

去掉manifest中chrome.action（旧版为browser_action）下的popup字段，改用点击事件触发自定义窗口：

{
  "manifest_version": 3,
  "name": "自定义弹窗扩展",
  "version": "1.0",
  "permissions": ["windows", "tabs"],
  "action": {},
  "background": {
    "service_worker": "background.js"
  }
}

在background.js中添加点击触发窗口的逻辑：

chrome.action.onClicked.addListener(() => {
  chrome.windows.create({
    url: "popup.html",
    type: "popup",
    width: 400,
    height: 500,
    left: Math.round((screen.width - 400)/2),
    top: Math.round((screen.height - 500)/2),
    resizable: false,
    alwaysOnTop: true
  });
});

2. 编写自定义弹窗的页面样式与拖动逻辑 #

新建popup.html，实现圆角、阴影和拖动功能：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 16px;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      overflow: hidden;
      user-select: none;
    }
    .drag-header {
      height: 32px;
      background: #f5f5f5;
      border-radius: 8px;
      margin: -16px -16px 16px -16px;
      padding: 8px 16px;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="drag-header">可拖动标题栏</div>
  <!-- 这里放你的弹窗内容 -->
  <p>自定义弹窗内容</p>

  <script>
    // 实现窗口拖动逻辑
    const dragHeader = document.querySelector('.drag-header');
    let startX, startY, windowLeft, windowTop;

    dragHeader.addEventListener('mousedown', (e) => {
      startX = e.screenX;
      startY = e.screenY;
      
      chrome.windows.getCurrent((win) => {
        windowLeft = win.left;
        windowTop = win.top;
      });
      
      document.addEventListener('mousemove', onDrag);
      document.addEventListener('mouseup', stopDrag);
    });

    function onDrag(e) {
      const dx = e.screenX - startX;
      const dy = e.screenY - startY;
      chrome.windows.getCurrent((win) => {
        chrome.windows.update(win.id, {
          left: windowLeft + dx,
          top: windowTop + dy
        });
      });
    }

    function stopDrag() {
      document.removeEventListener('mousemove', onDrag);
      document.removeEventListener('mouseup', stopDrag);
    }
  </script>
</body>
</html>

关键说明 #

• 自定义窗口的样式完全由你控制，border-radius和box-shadow可以随意调整，和普通网页样式一致
• 拖动功能通过监听鼠标事件，调用chrome.windows.update修改窗口位置实现
• 窗口参数中的alwaysOnTop: true可以让弹窗保持在最上层，和原生popup行为一致

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