如何在 Chrome 扩展中实现基于文本选区的轻量级弹出框（Popover）

// content.ts（TypeScript 示例）
const createPopover = (selectedText: string) => {
  // 1. 创建 popover 容器
  const popover = document.createElement("div");
  popover.className = "recollect-popover";
  popover.innerHTML = `
    

      ${selectedText.substring(0, 20)}${selectedText.length > 20 ? "…" : ""}
      ? Save
      ×
    
  `;

  // 2. 插入到 body 末尾（避免被其他绝对定位元素遮挡）
  document.body.appendChild(popover);

  // 3. 精确定位：基于 window.getSelection().getRangeAt(0).getBoundingClientRect()
  const selection = window.getSelection();
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

    // 定位在选区上方居中，预留 8px 间距
    popover.style.position = "fixed";
    popover.style.top = `${rect.top + scrollTop - popover.offsetHeight - 8}px`;
    popover.style.left = `${rect.left + scrollLeft + rect.width / 2 - popover.offsetWidth / 2}px`;
    popover.style.transform = "translateX(-50%)"; // 水平居中微调
  }

  return popover;
};

// 绑定选区触发逻辑
let currentPopover: HTMLElement | null = null;

const handleSelection = () => {
  const selectedText = window.getSelection()?.toString().trim();
  if (!selectedText) return;

  // 清除已有 popover 避免重复
  if (currentPopover) {
    currentPopover.remove();
    currentPopover = null;
  }

  currentPopover = createPopover(selectedText);

  // 保存按钮事件（通过 message passing 发送至 background）
  currentPopover.querySelector(".save-btn")?.addEventListener("click", () => {
    chrome.runtime.sendMessage({
      type: "SAVE_SELECTED_TEXT",
      payload: { text: selectedText, url: window.location.href }
    });
    currentPopover?.remove();
    currentPopover = null;
  });

  // 关闭按钮
  currentPopover.querySelector(".close-btn")?.addEventListener("click", () => {
    currentPopover?.remove();
    currentPopover = null;
  });
};

// 监听鼠标松开（mouseup），此时选区已稳定
document.addEventListener("mouseup", handleSelection);

// 可选：支持键盘触发（如 Ctrl+C 后快速呼出）
document.addEventListener("keydown", (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === "c") {
    setTimeout(() => {
      const text = window.getSelection()?.toString().trim();
      if (text) handleSelection();
    }, 50);
  }
});

样式建议（CSS）

为保证 popover 轻量美观且兼容主流网站，推荐使用以下内联样式或注入 style 标签：

讯飞绘文

讯飞绘文：免费AI写作/AI生成文章

下载

.recollect-popover {
  position: fixed;
  z-index: 2147483647; /* 最高层级，确保不被遮挡 */
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  background: white;
  padding: 4px 0;
  min-width: 180px;
}

.popover-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
}

.text-preview {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.save-btn,
.close-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  color: #007aff;
}

.save-btn:hover {
  background-color: #f0f7ff;
}

.close-btn {
  font-weight: bold;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

注意事项与最佳实践

• ✅ 避免 dialog 元素：原生
  不支持自由定位，无法实现 popover 效果；务必使用 div + position: fixed。
• ✅ 滚动适配：务必结合 window.pageYOffset 和 getBoundingClientRect() 计算真实屏幕坐标，否则 popover 会在滚动后错位。
• ✅ 内存清理：每次新建 popover 前必须移除旧实例，防止 DOM 泄漏；建议用 currentPopover?.remove() 统一管理。
• ✅ 跨域限制：内容脚本可直接操作当前页面 DOM，但若目标页面禁用 document.write 或沙箱策略严格，需检查 run_at 配置（推荐 "document_idle"）。
• ✅ 无障碍支持：为按钮添加 aria-label，Popover 容器添加 role="dialog" 和 aria-modal="true" 提升可访问性。
• ⚠️ 性能提示：避免在 mousemove 中频繁计算，mouseup 是更稳妥的触发时机；高频场景可加防抖（setTimeout 延迟 100ms）。

通过以上结构化实现，你将获得一个高性能、可维护、符合 Material Design 感知的文本选区 popover，无缝集成至你的 Chrome 扩展中，并为后续扩展功能（如标签分类、OCR 识别、多端同步）奠定坚实基础。