Firefox扩展开发：如何为网页全局应用滤镜且避免元素隐藏？

你的代码无效的核心原因 #

1. 容器未添加滤镜样式：你创建的div只是一个空的全屏覆盖层，但没有设置任何filter属性，自然无法对页面产生滤镜效果。
2. 全屏元素的层叠上下文问题：即使给容器加上滤镜，YouTube等网站的全屏元素会脱离body层级，直接挂载到document.documentElement下，且拥有更高的默认层级，导致你的容器无法覆盖这些全屏元素。

可靠解决方案 #

方案一：完善覆盖层容器（推荐，不影响页面原有样式继承） #

通过创建覆盖层并动态适配全屏场景，确保滤镜覆盖所有页面元素：

// 创建滤镜容器
const filterContainer = document.createElement('div');
// 设置基础样式+滤镜
filterContainer.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 不阻断页面交互 */
  z-index: 999999; /* 拉高层级确保覆盖 */
  filter: grayscale(100%); /* 替换为你需要的滤镜，比如sepia(80%)、brightness(1.2)等 */
`;

// 初始挂载到body
document.body.appendChild(filterContainer);

// 监听全屏切换，动态调整容器挂载目标
function adjustFilterContainer() {
  const fullscreenEl = document.fullscreenElement || document.mozFullScreenElement;
  if (fullscreenEl) {
    // 进入全屏时，把容器移到全屏元素内部
    fullscreenEl.appendChild(filterContainer);
    filterContainer.style.width = '100%';
    filterContainer.style.height = '100%';
  } else {
    // 退出全屏后移回body
    document.body.appendChild(filterContainer);
    filterContainer.style.width = '100vw';
    filterContainer.style.height = '100vh';
  }
}

// 绑定Firefox全屏事件
document.addEventListener('fullscreenchange', adjustFilterContainer);
document.addEventListener('mozfullscreenchange', adjustFilterContainer);

方案二：直接给根元素应用滤镜（更简洁） #

给document.documentElement（即html标签）添加滤镜，让所有页面元素（包括全屏元素）继承滤镜效果：

// 给根元素设置初始滤镜
const targetFilter = 'grayscale(100%)';
document.documentElement.style.filter = targetFilter;

// 处理全屏元素可能的滤镜失效问题
function handleFullscreen() {
  const fullscreenEl = document.fullscreenElement || document.mozFullScreenElement;
  if (fullscreenEl) {
    // 给全屏元素单独设置相同滤镜
    fullscreenEl.style.filter = targetFilter;
  } else {
    // 退出全屏后清除非根元素的滤镜残留
    document.querySelectorAll('[style*="filter"]').forEach(el => {
      if (el !== document.documentElement) el.style.filter = '';
    });
  }
}

document.addEventListener('fullscreenchange', handleFullscreen);
document.addEventListener('mozfullscreenchange', handleFullscreen);

注意事项 #

• 若需要动态调整滤镜，只需修改filterContainer.style.filter（方案一）或document.documentElement.style.filter（方案二）的值即可。
• pointer-events: none是必须的，否则覆盖层会阻止用户点击页面元素。
• 滤镜支持所有CSS标准滤镜函数，可自由组合使用（如filter: brightness(1.2) contrast(0.9)）。

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