如何让Chrome扩展中的Div元素在页面缩放时保持尺寸与位置

完全可以实现，通过CSS固定布局结合JavaScript监听页面缩放并做反向补偿即可，以下是具体方案：

一、基础CSS设置 #

先通过CSS将div固定在视口的指定位置，同时设置初始尺寸，其中transform-origin: top left是关键配置，能确保缩放时元素不会偏离原始位置：

#fixed-div {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  background: #fff;
  border: 1px solid #ccc;
  transform-origin: top left;
  z-index: 9999; /* 确保元素在页面最上层 */
}

二、JavaScript监听缩放并补偿 #

浏览器页面缩放会导致所有元素按比例放大/缩小，我们需要监听缩放变化，对目标div应用反向缩放来抵消这个影响：

const fixedDiv = document.getElementById('fixed-div');
// 记录初始缩放比例，作为基准值
let initialScale = window.devicePixelRatio;

// 计算并应用补偿缩放的函数
function adjustScale() {
  const currentScale = window.devicePixelRatio;
  // 计算反向缩放比例，抵消页面缩放的影响
  const compensateScale = initialScale / currentScale;
  fixedDiv.style.transform = `scale(${compensateScale})`;
  
  // 修正fixed定位的偏移：页面缩放会让top/left的CSS像素值被实际放大，因此需要反向计算
  const computedStyle = window.getComputedStyle(fixedDiv);
  const originalTop = parseFloat(computedStyle.top);
  const originalLeft = parseFloat(computedStyle.left);
  fixedDiv.style.top = `${originalTop / currentScale}px`;
  fixedDiv.style.left = `${originalLeft / currentScale}px`;
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  adjustScale();
  // 监听resize事件（页面缩放会触发该事件）
  window.addEventListener('resize', adjustScale);
});

三、额外注意事项 #

• window.devicePixelRatio是获取当前页面缩放比例的可靠方式，它表示物理像素与CSS像素的比值，页面缩放时该值会同步变化。
• 若遇到少量浏览器兼容性问题，可改用document.documentElement.clientWidth / window.innerWidth计算缩放比例（原理是文档渲染宽度与视口宽度的比值）。
• 对于Chrome扩展，确保脚本在content script中正确注入，且目标元素已存在于DOM中再执行代码。

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