如何在chrome.runtime.sendMessage完成前阻止页面加载？

这个问题我之前做Chrome扩展的时候也踩过坑，异步通信和页面加载节奏的冲突确实挺头疼的，给你几个实际用过的解决方案：

首先，在你的manifest.json里，把Content Script的run_at改成document_start——这个时机下，脚本会在页面DOM开始解析前就跑起来，比页面里的任何代码都早：

"content_scripts": [
  {
    "matches": ["<你的页面匹配规则>"],
    "js": ["content.js"],
    "run_at": "document_start"
  }
]

然后在content.js里这么写：

// 先暂停页面加载，别让它乱跑
window.stop();

// 发消息给后台拿状态
chrome.runtime.sendMessage({ action: "getCurrentState" }, (response) => {
  if (response.shouldInject) {
    // 要注入的话，就把代码插进去
    const injectScript = document.createElement('script');
    injectScript.textContent = `// 这里写你要注入的页面代码逻辑`;
    document.documentElement.appendChild(injectScript);
  }
  // 状态处理完了，重启页面加载
  window.location.reload();
});

这个方法好处是逻辑简单，容易上手，唯一的小问题是页面会先停一下再刷新，用户可能会看到短暂的空白，但绝对能保证你的注入代码在页面逻辑之前执行。

这个方案更彻底，直接在后台拦截页面的主请求，根据状态决定要不要把代码直接嵌到页面内容里，完全不用等Content Script的异步请求：

首先在manifest.json里加权限：

"permissions": [
  "webRequest",
  "webRequestBlocking",
  "<你的目标网站权限，比如https://example.com/*>"
]

然后在Background Script里写拦截逻辑：

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 后台本身就能直接拿到状态，不用发消息
    const shouldInject = getExtensionState(); // 替换成你获取状态的代码

    if (shouldInject) {
      // 这里可以用同步请求拿到原页面内容，然后把你的代码插进去
      const xhr = new XMLHttpRequest();
      xhr.open('GET', details.url, false); // 同步请求，确保拿到内容
      xhr.send();
      const originalContent = xhr.responseText;
      // 把注入代码插到页面最前面
      const modifiedContent = `<script>// 你的注入代码</script>${originalContent}`;
      // 重定向到修改后的内容
      return { redirectUrl: `data:text/html,${encodeURIComponent(modifiedContent)}` };
    }
  },
  { urls: ["<你的匹配规则>"], types: ["main_frame"] },
  ["blocking"]
);

这个方法完全不会干扰用户的加载体验，注入代码肯定是第一个执行的，但逻辑稍微复杂点，还要处理同步请求的兼容性（不过Chrome里没问题）。

如果不想暂停或拦截页面加载，可以用监听DOM变化的方式，一旦发现页面要插脚本了，立刻把你的代码插在它前面：

在document_start时机的content.js里写：

// 先创建观察者，盯着DOM节点的添加
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      // 发现页面要插脚本了
      if (node.tagName === 'SCRIPT') {
        // 把我们的代码插在它前面
        const injectScript = document.createElement('script');
        injectScript.textContent = `// 你的注入代码`;
        document.documentElement.insertBefore(injectScript, node);
        observer.disconnect(); // 完事就撤，别再监听了
        return;
      }
    }
  }
});

// 开始监听根节点的变化
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

// 同时发消息给后台确认要不要注入
async function checkState() {
  const response = await new Promise((resolve) => {
    chrome.runtime.sendMessage({ action: "getState" }, resolve);
  });
  if (!response.shouldInject) {
    observer.disconnect(); // 不需要注入就停止监听
  }
}

checkState();

这个方法不会打断页面加载，但要注意——如果页面的脚本加载执行得特别快，可能还是会有漏网的情况，适合对注入时机要求不是极端严格的场景。

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