Web Extension：如何延迟URL加载至获取到Native Messaging返回的Cookie？

在MV3中，declarativeNetRequest确实无法实现阻塞式的请求等待——因为动态规则更新是异步操作，没法和请求加载流程同步。但你可以通过以下两种可行方案解决问题：

方案一：使用WebRequest API的阻塞模式（推荐） #

MV3并未完全移除WebRequest的阻塞能力，只要在manifest中声明对应权限，就能像MV2一样拦截请求并等待Cookie返回：

1. 配置Manifest权限 #

添加必要的权限到manifest.json：

"permissions": ["webRequest", "webRequestBlocking", "tabs"],
"host_permissions": ["<你的目标URL规则>"]

2. 实现阻塞式拦截代码 #

const MY_CUSTOM_RULE_ID = 1012;
const url_id = "<你的目标URL>";
let cookiePromise = null;

// 封装Native Messaging获取Cookie的Promise
function fetchCookie() {
  return new Promise((resolve) => {
    const port = chrome.runtime.connectNative("overseas.media.example");
    port.postMessage("Get cookie!!");
    port.onMessage.addListener((message) => {
      resolve(message.text);
      port.disconnect();
    });
  });
}

// 拦截目标URL的请求，等待Cookie后再继续
chrome.webRequest.onBeforeSendHeaders.addListener(
  async (details) => {
    // 仅处理目标URL
    if (!details.url.match(url_id)) return;

    // 避免重复请求Cookie
    if (!cookiePromise) {
      cookiePromise = fetchCookie();
    }
    const cookieValue = await cookiePromise;

    // 修改请求头添加Cookie（先移除原有Cookie头）
    const updatedHeaders = details.requestHeaders.filter(h => h.name.toLowerCase() !== "cookie");
    updatedHeaders.push({ name: "cookie", value: cookieValue });
    
    return { requestHeaders: updatedHeaders };
  },
  { urls: [url_id] },
  ["blocking", "requestHeaders", "extraHeaders"] // extraHeaders是修改Cookie头的必需参数
);

这种方式可以在请求发送前直接阻塞，等待Cookie获取完成后再放行，没有页面闪烁问题，体验最优。

方案二：拦截导航并延迟跳转 #

如果不想用WebRequest，可以通过拦截导航事件，先取消当前跳转，等Cookie就绪后再重新导航：

const MY_CUSTOM_RULE_ID = 1012;
const url_id = "<你的目标URL>";

chrome.webNavigation.onBeforeNavigate.addListener(async (details) => {
  if (details.url.match(url_id)) {
    // 临时取消当前导航
    chrome.tabs.update(details.tabId, { url: "about:blank" });

    // 获取Cookie并更新规则
    const port = chrome.runtime.connectNative("overseas.media.example");
    port.postMessage("Get cookie!!");
    port.onMessage.addListener(async (message) => {
      await chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: [MY_CUSTOM_RULE_ID],
        addRules: [{
          id: MY_CUSTOM_RULE_ID,
          priority: 1,
          action: {
            type: "modifyHeaders",
            requestHeaders: [{
              operation: "set",
              header: "cookie",
              value: message.text
            }]
          },
          condition: { urlFilter: url_id, resourceTypes: ["main_frame", "sub_frame"] }
        }]
      });
      // 重新导航到目标URL
      chrome.tabs.update(details.tabId, { url: details.url });
      port.disconnect();
    });
  }
}, { urls: [url_id] });

注意：这种方式会出现短暂的页面闪烁（先跳转到空白页），用户体验不如方案一。

关键说明 #

• declarativeNetRequest的动态规则更新是异步的，无法和请求加载流程同步，因此不能用来实现阻塞等待。
• WebRequest的阻塞模式在MV3中仍被支持，但要注意：阻塞逻辑不能过于耗时（浏览器会限制超时时间），且必须在扩展的Service Worker中运行。

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