Chrome扩展MV3迁移：contentPort.onMessage抢占nativePort.onMessage优先级问题

核心原因 #

MV3的Service Worker采用单线程事件驱动模型，和MV2的常驻后台页面逻辑不同：当内容脚本每秒发送60条消息时，contentPort.onMessage的回调会持续占据事件循环队列，导致Native Messaging的nativePort.onMessage回调被积压，必须等内容脚本停止发送后才会被处理。而MV2的后台页面拥有更灵活的事件调度机制，不会出现这类阻塞问题。

解决方案 #

1. 批量合并内容脚本的消息（从源头减少回调频率）

在内容脚本侧把高频消息合并成批量消息发送，直接降低后台的回调触发次数：

// 内容脚本代码
let messageBatch = [];
const BATCH_INTERVAL = 16; // 对应约60帧/秒的间隔

// 替换原有的单条消息发送逻辑
function sendToBackground(msg) {
  messageBatch.push(msg);
}

// 定时发送批量消息
setInterval(() => {
  if (messageBatch.length > 0) {
    port.postMessage({ type: 'BATCH', payload: messageBatch });
    messageBatch = [];
  }
}, BATCH_INTERVAL);

后台侧接收批量消息后再拆分处理，这样contentPort.onMessage的触发频率从60次/秒降至1次/秒，大幅减少事件循环的占用。

2. 用优先级队列调度消息处理

在Service Worker中实现优先级队列，优先处理Native Messaging的消息，确保其回调不会被内容脚本消息阻塞：

// Service Worker代码
const messageQueue = [];
const PRIORITY = {
  NATIVE: 1,
  CONTENT: 2
};
let isProcessingQueue = false;

// 监听内容脚本连接消息
chrome.runtime.onConnect.addListener(contentPort => {
  contentPort.onMessage = (msg) => {
    messageQueue.push({ priority: PRIORITY.CONTENT, data: msg, port: contentPort });
    scheduleProcessing();
  };
});

// 监听Native Messaging消息
const nativePort = chrome.runtime.connectNative('your.host.id');
nativePort.onMessage = (msg) => {
  messageQueue.push({ priority: PRIORITY.NATIVE, data: msg, port: nativePort });
  scheduleProcessing();
};

// 调度队列处理
function scheduleProcessing() {
  if (isProcessingQueue) return;
  isProcessingQueue = true;
  processNextMessage();
}

// 优先处理高优先级消息
function processNextMessage() {
  // 优先取出Native类型的消息
  const highPriorityIdx = messageQueue.findIndex(item => item.priority === PRIORITY.NATIVE);
  const nextMsg = highPriorityIdx !== -1 
    ? messageQueue.splice(highPriorityIdx, 1)[0] 
    : messageQueue.shift();

  if (!nextMsg) {
    isProcessingQueue = false;
    return;
  }

  // 处理对应消息
  if (nextMsg.priority === PRIORITY.NATIVE) {
    // 你的Native消息处理逻辑
    console.log('处理Native消息:', nextMsg.data);
  } else {
    // 你的内容脚本消息处理逻辑（如果是批量消息，这里拆分处理）
    if (nextMsg.data.type === 'BATCH') {
      nextMsg.data.payload.forEach(subMsg => {
        console.log('处理内容脚本消息:', subMsg);
      });
    } else {
      console.log('处理内容脚本消息:', nextMsg.data);
    }
  }

  // 让出事件循环，确保其他事件有机会执行
  setTimeout(processNextMessage, 0);
}

3. 使用requestIdleCallback处理低优先级内容脚本消息

把内容脚本的消息处理逻辑放到浏览器空闲时段执行，避免抢占Native消息的处理资源：

// Service Worker代码
let contentMsgBuffer = [];
let isBuffering = false;

contentPort.onMessage = (msg) => {
  contentMsgBuffer.push(msg);
  if (!isBuffering) {
    isBuffering = true;
    requestIdleCallback(processContentBuffer, { timeout: 100 }); // 设置超时，避免消息被无限延迟
  }
};

function processContentBuffer(deadline) {
  while (contentMsgBuffer.length > 0 && deadline.timeRemaining() > 0) {
    const msg = contentMsgBuffer.shift();
    // 处理内容脚本消息逻辑
  }
  isBuffering = contentMsgBuffer.length > 0;
  if (isBuffering) {
    requestIdleCallback(processContentBuffer, { timeout: 100 });
  }
}

这种方式会让内容脚本的消息处理在浏览器有空闲时才执行，优先保证Native消息的回调能及时触发。

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