Chrome扩展Manifest V3：如何确保自定义JS优先于页面脚本执行？

针对你需要在页面脚本访问原生Window函数前完成覆盖的需求，以下是几种可靠的实现方案，按优先级排序：

1. 使用chrome.scripting.executeScript直接注入页面上下文（推荐） #

这是Manifest V3中最稳定的方式，无需手动处理DOM注入和CSP限制，Chrome会原生保证脚本执行顺序。

实现步骤： #

• 在manifest.json中声明必要权限：

  {
    "permissions": ["scripting"],
    "host_permissions": ["<all_urls>"] // 或指定目标网站域名
  }
  

• 在设置为run_at: document_start的contentscript.js中调用API：

  // contentscript.js
  chrome.scripting.executeScript({
    target: { frameId: 0 }, // 目标为主页面框架
    world: 'MAIN', // 注入到页面主上下文（而非隔离的content script环境）
    runAt: 'document_start',
    files: ['script.js'] // 你的核心覆盖逻辑脚本
  });
  

• 在script.js中编写覆盖逻辑：

  // script.js
  // 示例：覆盖window.fetch
  const originalFetch = window.fetch;
  window.fetch = async function(...args) {
    console.log('拦截Fetch请求:', args);
    return originalFetch.apply(this, args);
  };
  

该方案的核心优势是：Chrome会确保脚本在页面任何代码执行前注入并运行，完全规避DOM解析顺序和CSP的问题。

2. 同步注入Blob URL脚本（无scripting权限时备选） #

如果无法申请scripting权限，可通过Blob URL绕过CSP的unsafe-inline限制，同时在document_start阶段同步注入脚本：

// contentscript.js (run_at: document_start)
// 编写需要执行的覆盖代码
const injectCode = `
const originalAlert = window.alert;
window.alert = function(msg) {
  console.log('Alert被拦截:', msg);
  return originalAlert(msg);
};
`;

// 创建Blob URL，避免inline脚本触发CSP
const blob = new Blob([injectCode], { type: 'text/javascript' });
const scriptEl = document.createElement('script');
scriptEl.src = URL.createObjectURL(blob);

// 插入到<html>最前端，确保优先解析
document.documentElement.prepend(scriptEl);

// 脚本加载后释放Blob资源
scriptEl.onload = () => URL.revokeObjectURL(scriptEl.src);

关键注意事项：

• 必须在contentscript.js中同步执行这段代码，不能放入异步回调（如Mutation Observer），否则页面脚本可能抢先执行。
• Blob URL不属于inline脚本范畴，可绕过绝大多数网站的CSP限制。

3. 修复Mutation Observer的异步问题（不推荐） #

如果坚持使用Mutation Observer，需解决其异步回调滞后的问题：

// contentscript.js (run_at: document_start)
const injectScript = () => {
  const code = `/* 你的覆盖逻辑代码 */`;
  const blob = new Blob([code], { type: 'text/javascript' });
  const script = document.createElement('script');
  script.src = URL.createObjectURL(blob);
  // 插入到<html>第一个子节点位置
  document.documentElement.insertBefore(script, document.documentElement.firstChild);
  script.onload = () => URL.revokeObjectURL(script.src);
};

// 立即检查并注入，避免等待Observer触发
if (document.documentElement) {
  injectScript();
}

// 监听<html>子节点变化，兜底注入
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.addedNodes.length) {
      const existingScript = document.querySelector('script[src*="blob:"]');
      if (!existingScript) injectScript();
      observer.disconnect(); // 注入成功后停止监听
      break;
    }
  }
});

observer.observe(document.documentElement, { childList: true });

该方法仍存在概率性滞后问题，因为Observer回调属于微任务，可能晚于浏览器的HTML解析队列，仅作为前两种方案的备选。

为什么你之前的方法失效？ #

• Mutation Observer异步性：回调是异步触发的，浏览器解析页面脚本的线程可能先于回调执行，导致页面脚本抢先运行。
• 直接写入script.text：被页面CSP的unsafe-inline规则拦截，Blob URL方式则不属于inline脚本范畴，可规避该限制。
• 禁用再启用页面脚本：破坏了网站脚本的初始化依赖链，导致对象引用时序错误。

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