如何阻止页面脚本修改自定义checkbox样式及添加额外div？

问题背景 #

我编写的自定义Checkbox结构如下：

<div class="group-checkbox">
     <label for="Hot">
         <div>Enabled</div>
         <input id="Hot" name="Hot" type="checkbox" {Hot}>
     </label>
</div>

但页面运行时，被未知脚本篡改为以下结构，自动添加了额外容器和自定义样式：

<div class="group-checkbox">
     <label for="Enabled">
       <div>Enabled</div>
       <div class="section">
         <label class="field switch switch-round switch-primary small">
           <input id="Hot-16738839498762826" name="Enabled" type="checkbox" undefined="" data-form-initialized="true">
           <label for="Hot-16738839498762826" data-on="" data-off=""></label>
         </label>
       </div>
     </label>
   </div>

无法修改该未知脚本，以下是几种可行的阻止方案：

方法1：用DOM突变观察器拦截并恢复原始结构 #

通过MutationObserver监听目标容器的DOM变化，一旦检测到脚本生成的冗余节点，立即恢复原始结构：

// 定位目标容器
const checkboxGroup = document.querySelector('.group-checkbox');
if (!checkboxGroup) return;

// 保存原始label的完整结构
const originalLabel = checkboxGroup.querySelector('label').cloneNode(true);

// 配置观察器：监听子节点变化，包括后代节点
const observerConfig = { childList: true, subtree: true };

// 创建观察器实例
const mutationObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否新增了脚本生成的.section或.switch节点
    const hasUnwantedNodes = Array.from(mutation.addedNodes).some(node => {
      return node.classList?.contains('section') || node.closest?.('.switch');
    });

    if (hasUnwantedNodes) {
      // 恢复原始label结构
      checkboxGroup.querySelector('label').replaceWith(originalLabel.cloneNode(true));
      // 短暂断开观察避免循环触发，之后重新监听
      mutationObserver.disconnect();
      setTimeout(() => mutationObserver.observe(checkboxGroup, observerConfig), 100);
    }
  });
});

// 启动观察
mutationObserver.observe(checkboxGroup, observerConfig);

方法2：用CSS强制隐藏冗余元素并恢复原始Checkbox样式 #

如果只需要视觉上恢复原始效果，可通过CSS强制隐藏脚本生成的容器，同时显示原始Checkbox：

/* 完全隐藏脚本生成的.section容器 */
.group-checkbox .section {
  display: none !important;
}

/* 显示原始Checkbox，排除脚本生成的带data-form-initialized属性的元素 */
.group-checkbox input[type="checkbox"]:not([data-form-initialized]) {
  display: inline-block !important;
  /* 可添加自定义样式覆盖默认样式 */
  margin-left: 8px;
}

/* 强制修正label的for属性，避免脚本篡改后的关联错误 */
.group-checkbox label[for] {
  for: Hot !important;
}

方法3：临时修改Checkbox属性规避脚本识别 #

如果脚本是通过选择所有type="checkbox"的元素进行处理，可临时修改原始Checkbox的属性让脚本忽略，之后再恢复：

document.addEventListener('DOMContentLoaded', () => {
  const originalCheckbox = document.querySelector('#Hot');
  if (!originalCheckbox) return;

  // 临时将type改为hidden，让脚本跳过处理
  originalCheckbox.type = 'hidden';
  // 记录原始属性值
  const originalId = originalCheckbox.id;
  const originalName = originalCheckbox.name;

  // 延迟恢复，确保脚本已完成运行（时间可根据实际调整）
  setTimeout(() => {
    originalCheckbox.type = 'checkbox';
    originalCheckbox.id = originalId;
    originalCheckbox.name = originalName;
    // 修正label的for属性
    originalCheckbox.closest('label').setAttribute('for', originalId);
  }, 500);
});

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