如何让Plasmo CSUI容器填满锚点元素的宽高？

要让Plasmo的CSUI容器完全覆盖锚点元素，同时作为内部元素的定位基准，你可以通过同步锚点尺寸+监听动态变化的方式替代硬编码的定位逻辑，具体实现如下：

核心思路 #

• 从锚点元素获取实时宽高，同步给CSUI容器，让容器和锚点尺寸完全匹配
• 给CSUI容器设置relative定位，让内部元素可以基于容器自由做绝对定位
• 用ResizeObserver监听锚点元素的尺寸变化，实时更新容器尺寸，适配动态场景（比如窗口缩放、元素内容变化）

代码实现 #

import { useEffect, useState } from "react";

const MyCSUI = ({ anchor }: { anchor: HTMLElement }) => {
  // 初始化锚点尺寸
  const [anchorSize, setAnchorSize] = useState({
    width: anchor.offsetWidth,
    height: anchor.offsetHeight
  });

  useEffect(() => {
    // 监听锚点尺寸变化
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach(entry => {
        setAnchorSize({
          width: entry.contentRect.width,
          height: entry.contentRect.height
        });
      });
    });

    resizeObserver.observe(anchor);

    // 组件卸载时停止监听
    return () => resizeObserver.unobserve(anchor);
  }, [anchor]);

  return (
    {/* 保留Plasmo默认的absolute定位，同时添加relative作为内部元素的定位基准 */}
    <div 
      className="absolute relative"
      style={{
        width: `${anchorSize.width}px`,
        height: `${anchorSize.height}px`
      }}
    >
      {/* 内部元素直接基于容器定位，无需依赖锚点的offsetWidth */}
      <div 
        className="absolute flex shadow-lg items-center justify-center w-8 h-8 border-white bg-green-500 rounded-full border-[3px]"
        style={{ top: 0, right: 0 }} // 直接定位到容器右上角
      >
        {/* 你的内容 */}
      </div>
    </div>
  );
};

export default MyCSUI;

关键细节 #

• 尺寸选择：如果锚点元素包含border和padding，用offsetWidth/offsetHeight；如果只需要内容区域尺寸，改用clientWidth/clientHeight
• 初始尺寸校验：如果锚点是动态渲染的，建议在useEffect中先判断元素是否存在，避免初始尺寸为0
• 定位基准：容器的relative属性让内部绝对定位元素完全以容器为参照，彻底摆脱硬编码数值的不稳定问题

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