Chrome扩展Manifest V3针对无onload触发的站点如何自动注入内容脚本

你对问题的判断完全正确，该电商站点属于SPA（单页应用）架构，内部跳转通过前端路由实现，仅通过XHR/fetch拉取页面数据后前端渲染，不会触发浏览器页面重载，因此不会触发内容脚本的默认注入逻辑，document.readyState也不会重置。

以下是两种比轮询、全局DOM监听更优雅的实现方案：

方案1：通过webNavigation API主动注入（推荐，资源占用更低） #

该方案无需全局注入内容脚本，仅当用户进入目标路径时才触发注入，性能更好。

配置步骤： #

1. 修改manifest.json，添加对应权限：

{
  "manifest_version": 3,
  "permissions": ["webNavigation", "scripting"],
  "host_permissions": ["https://目标电商站点域名/*"],
  "background": {
    "service_worker": "service-worker.js"
  }
}

2. 编写service-worker.js逻辑，监听路由变化后注入脚本：

// 监听前端路由跳转事件
chrome.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
  // 匹配你需要注入的目标路径
  if (details.url.includes('目标路径特征')) {
    // 主动注入内容脚本
    await chrome.scripting.executeScript({
      target: { tabId: details.tabId },
      files: ['contentScript.js']
    });
  }
}, {
  // 过滤目标站点，减少无效触发
  url: [{ hostSuffix: '目标电商站点域名' }]
});

方案2：全局注入+路由劫持（实现更简单） #

如果你的逻辑本身需要在站点全路径运行，选择这个方案更便捷，无需申请后台权限。
在全局注入的contentScript.js中，劫持前端路由的pushState、replaceState方法，监听路由变化：

// 劫持history方法，触发自定义路由变化事件
const wrapHistoryEvent = (type) => {
  const original = history[type];
  return function() {
    const result = original.apply(this, arguments);
    const event = new Event(type);
    window.dispatchEvent(event);
    return result;
  };
};
history.pushState = wrapHistoryEvent('pushState');
history.replaceState = wrapHistoryEvent('replaceState');

// 监听路由变化
['pushState', 'replaceState', 'popstate'].forEach(event => {
  window.addEventListener(event, () => {
    // 每次路由变化时检查当前路径是否为目标路径
    if (window.location.pathname.includes('目标路径特征')) {
      // 执行你的DOM修改逻辑
      console.log('进入目标页面，执行注入逻辑');
    }
  });
});

// 首次加载时也执行一次检查，避免刷新直接进入目标路径的情况
if (window.location.pathname.includes('目标路径特征')) {
  console.log('首次进入目标页面，执行注入逻辑');
}

补充说明 #

你之前尝试的Mutation Observer方案未生效，大概率是监听范围、配置项不正确，如果需要监听特定DOM元素渲染，可以搭配路由监听事件使用，仅在进入目标路径后再启动Mutation Observer监听，减少不必要的性能消耗。

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