如何使用JavaScript完全冻结网页以保障Chrome扩展截图效果

核心思路是从定时器、事件交互、DOM/CSS变动、网络请求四个维度拦截所有可能修改页面状态的行为，你可以在触发截图前通过content script向页面注入以下代码：

第一步：清空并禁用所有定时器/异步渲染回调 #

// 备份原有方法用于后续解冻
window.__backupTimers = {
  setTimeout: window.setTimeout,
  setInterval: window.setInterval,
  requestAnimationFrame: window.requestAnimationFrame,
  alert: window.alert,
  confirm: window.confirm,
  prompt: window.prompt,
  open: window.open
}

// 清空所有已存在的定时器
const maxId = window.setTimeout(() => {}, 0);
for (let i = 0; i < maxId; i++) {
  window.clearTimeout(i);
  window.clearInterval(i);
  window.cancelAnimationFrame(i);
}

// 重写定时器方法，禁止新的定时任务触发
window.setTimeout = window.setInterval = window.requestAnimationFrame = () => 0;
// 禁用所有弹窗/新窗口弹出
window.alert = window.confirm = window.prompt = () => true;
window.open = () => null;

第二步：禁用所有用户交互与动态样式 #

// 插入全局样式冻结所有交互与动画
const freezeStyle = document.createElement('style');
freezeStyle.id = '__freezePageStyle';
freezeStyle.textContent = `
  * {
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
  }
  body {
    overflow: hidden !important;
  }
`;
document.head.appendChild(freezeStyle);

// 拦截所有冒泡事件，禁止任何交互触发页面变化
const freezeHandler = (e) => {
  e.stopImmediatePropagation();
  e.preventDefault();
  return false;
};
['click', 'mousedown', 'mouseup', 'mousemove', 'scroll', 'keydown', 'keyup', 'keypress', 'input', 'change']
  .forEach(evt => document.addEventListener(evt, freezeHandler, true));
window.__freezeHandler = freezeHandler;

第三步：拦截DOM变动与新网络请求 #

// 重写网络请求方法，禁止新的数据拉取
window.__backupXHR = window.XMLHttpRequest;
window.__backupFetch = window.fetch;
window.XMLHttpRequest = class { open() {} send() {} };
window.fetch = () => Promise.resolve(new Response());

// 监听DOM变动，所有修改直接回滚
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.removedNodes.forEach(node => mutation.target.appendChild(node));
      mutation.addedNodes.forEach(node => node.remove());
    } else if (mutation.type === 'attributes') {
      mutation.target.setAttribute(mutation.attributeName, mutation.oldValue);
    }
  });
});
observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeOldValue: true,
  characterData: true,
  characterDataOldValue: true
});
window.__freezeObserver = observer;

可选：截图完成后的解冻逻辑 #

如果用户需要截图后恢复页面正常使用，可以注入以下代码恢复状态：

// 恢复定时器与原生方法
Object.assign(window, window.__backupTimers);
window.XMLHttpRequest = window.__backupXHR;
window.fetch = window.__backupFetch;

// 移除冻结样式
document.getElementById('__freezePageStyle')?.remove();

// 移除事件监听
['click', 'mousedown', 'mouseup', 'mousemove', 'scroll', 'keydown', 'keyup', 'keypress', 'input', 'change']
  .forEach(evt => document.removeEventListener(evt, window.__freezeHandler, true));

// 停止DOM监听
window.__freezeObserver.disconnect();

// 清理挂载的全局变量
delete window.__backupTimers;
delete window.__backupXHR;
delete window.__backupFetch;
delete window.__freezeHandler;
delete window.__freezeObserver;

以上方案已经覆盖了普通页面99%的动态修改场景，完全可以满足你截图前冻结页面的需求。如果遇到特殊的自定义异步逻辑，可以在上述基础上针对性补充拦截规则即可。

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