限制history.pushState后网站仍改内容，求Chrome扩展解决方案

核心思路拆解 #

你的需求本质是拦截站点的交互触发逻辑，而非单纯阻止历史状态变化或DOM修改——之前的方案只针对了结果（pushState、DOM变动），没触碰到触发动态渲染的源头。

可行方案 #

1. 拦截按钮的点击事件（优先推荐） #

直接在目标按钮上绑定前置拦截逻辑，阻止原点击行为，转而加载内容到iframe：

// 假设目标按钮的选择器是'.target-btn'
document.addEventListener('click', (e) => {
  const targetBtn = e.target.closest('.target-btn');
  if (targetBtn) {
    e.preventDefault();
    e.stopPropagation();
    // 获取按钮对应的目标URL或内容
    const targetUrl = targetBtn.dataset.url || targetBtn.href;
    // 加载到iframe（假设你有id为'crawler-iframe'的iframe元素）
    const iframe = document.getElementById('crawler-iframe');
    iframe.src = targetUrl;
  }
}, true); // 第三个参数设为true，在捕获阶段拦截事件

这种方式直接切断了站点原逻辑的触发路径，不会影响站点其他功能，也不会导致冻结。

2. 重写站点的核心状态更新函数 #

站点的动态渲染肯定依赖某个核心函数（比如updatePageContent、handleRouteChange这类自定义方法），你可以找到这个函数并替换它：

// 先保存原函数（如果需要兼容某些场景）
const originalUpdate = window.updatePageContent;
// 重写为自定义逻辑
window.updatePageContent = function(newContentData) {
  // 这里不执行原渲染逻辑，而是把内容/URL转到iframe
  const targetUrl = newContentData.url;
  document.getElementById('crawler-iframe').src = targetUrl;
  // 如果需要完全阻断，直接return即可
  return;
};

注意：需要在站点脚本加载前注入这段代码（Chrome扩展中可以通过run_at: "document_start"在content script中配置），确保重写先于站点原函数定义。

3. 禁用站点的JavaScript模块（极端场景） #

如果站点的动态渲染完全依赖某几个JS文件，可以通过Chrome扩展的declarativeNetRequest API阻止这些文件加载：

// 在manifest.json中配置
"declarative_net_request": {
  "rule_resources": [{
    "id": "block-site-scripts",
    "enabled": true,
    "path": "rules.json"
  }]
}

然后在rules.json中添加规则：

[
  {
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": {
      "urlFilter": "*://example.com/js/render-module.js",
      "resourceTypes": ["script"]
    }
  }
]

这种方式要谨慎使用，可能会导致站点其他功能失效，仅适合目标站点逻辑单一的场景。

为什么之前的方案无效？ #

• 覆盖history.pushState：站点的动态渲染逻辑可能不依赖pushState，或者在调用pushState之前已经完成了内容渲染，所以只拦截这个方法没用。
• MutationObserver导致冻结：大概率是你在回调中做了同步的DOM操作，或者没有合理配置观察选项（比如观察了过多的DOM节点），导致触发无限循环或性能瓶颈。

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