如何用JavaScript在指定元素上可靠注入可点击按钮/图片覆盖层？

背景 #

开发一款Chrome扩展，现有功能为：目标元素获得焦点时修改边框宽度与颜色，失去焦点时移除样式。现需给指定元素注入带可点击按钮/图片的覆盖层，替代或补充原边框样式。仅支持以下元素类型：contenteditable div、textarea、input[type="text"]，已完成元素定位。

已尝试操作与问题 #

1. 最初尝试通过CSS类实现覆盖层，未成功。
2. 使用insertAdjacentHTML向元素内部注入按钮，按钮已注入但无法显示，调整z-index无效：

el.insertAdjacentHTML(
  "afterbegin",
  '<button id="overlay-button" class="tvce-targetlock-overlay">Test</button>'
);

补充测试代码与新问题 #

调整注入位置到元素外部（afterend）后，按钮成功注入，但对齐不符合预期：

注入代码 #

const validDOMElements =
  "[contenteditable='true'], textarea, input[type='text'], input[type='email'], input[type='search']";

let supportedElements = document.querySelectorAll(validDOMElements);
supportedElements.forEach((el) => {
  // 注入覆盖层按钮
  el.insertAdjacentHTML(
    "afterend",
   `<button id="${el.id}_button" class="tvce-targetlock-overlay">Test</button>`
  );
  
  el.addEventListener("click", (event) => {
      el.classList.add("selected_input");
  });

  el.addEventListener("blur", (event) => {
        el.classList.remove("selected_input");
  });
});

注入的基础CSS #

.tvce-targetlock-overlay {
  position: fixed;
  right: 20px;
}

按钮仅能大致显示在元素右侧，但垂直位置无法控制，默认显示在元素下方，无法实现覆盖对齐效果。

预期效果 #

按钮需覆盖在目标元素的右上角，与元素精准对齐，实现悬浮按钮效果。

解决方案 #

1. 调整CSS定位逻辑 #

放弃fixed定位，改用absolute定位，并给目标元素的父容器添加相对定位，确保按钮基于目标元素位置定位：

/* 注入的全局样式 */
.tvce-targetlock-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999; /* 确保按钮处于最上层 */
  padding: 2px 6px;
  background: #4285f4;
  color: #fff;
  border: none;
  border-radius: 0 4px 0 4px;
  cursor: pointer;
}

/* 给父容器添加相对定位（仅当父容器为默认static定位时） */
.tvce-targetlock-relative {
  position: relative;
}

2. 修改注入逻辑，处理父容器定位 #

在注入按钮前，检查目标元素父容器的定位属性，无相对定位则添加指定类：

const validDOMElements =
  "[contenteditable='true'], textarea, input[type='text'], input[type='email'], input[type='search']";

let supportedElements = document.querySelectorAll(validDOMElements);
supportedElements.forEach((el) => {
  // 处理父容器定位
  const parent = el.parentElement;
  if (window.getComputedStyle(parent).position === 'static') {
    parent.classList.add('tvce-targetlock-relative');
  }

  // 注入按钮
  el.insertAdjacentHTML(
    "afterend",
   `<button id="${el.id}_button" class="tvce-targetlock-overlay">Test</button>`
  );

  // 绑定焦点/失焦事件，控制按钮显示状态
  el.addEventListener("focus", (event) => {
    document.getElementById(`${el.id}_button`).style.display = 'block';
    el.classList.add("selected_input");
  });

  el.addEventListener("blur", (event) => {
    document.getElementById(`${el.id}_button`).style.display = 'none';
    el.classList.remove("selected_input");
  });

  // 默认隐藏按钮，仅在元素聚焦时显示
  document.getElementById(`${el.id}_button`).style.display = 'none';
});

3. 注入CSS到页面 #

通过Chrome扩展的content script注入样式，确保样式全局生效：

// 在content script中注入样式
const style = document.createElement('style');
style.textContent = `
.tvce-targetlock-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  padding: 2px 6px;
  background: #4285f4;
  color: #fff;
  border: none;
  border-radius: 0 4px 0 4px;
  cursor: pointer;
}
.tvce-targetlock-relative {
  position: relative;
}
`;
document.head.appendChild(style);

4. 特殊元素适配（可选） #

针对contenteditable元素，可微调按钮位置避免影响编辑区域：

.tvce-targetlock-overlay {
  top: -2px;
  right: -2px;
}

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