MV3扩展中如何从Offscreen文档传递XMLDocument至Service Worker

将Chrome扩展从MV2迁移到MV3时，使用Offscreen文档处理DOMParser生成XMLDocument，发送给Service Worker后，接收方得到的是无法处理的[object Object]，无法调用querySelectorAll等DOM方法。相关代码如下：

Service Worker代码 #

const OFFSCREEN_DOCUMENT_PATH = "/background/offscreen.html";
let creating;
async function fetchEntries(feed) {
        // 检查feed可用性
        const chk = await fetch(feed.url)
        if (!chk.ok) {
            console.log("error fetchEntries");
            chrome.notifications.create("errfetch",{
                "type": "basic",
                "iconUrl": "assets/logo_color.svg",
                "title": "Attention",
                "message": chrome.i18n.getMessage("errfeed") + feed.name + chrome.i18n.getMessage("errfeed2"),
            })
            const entries = [];
            return entries;
        } else {
       const htmlString = await (await fetch(feed.url)).text();
       const xml = await getParsed(htmlString);
       console.log("xml : " + xml) // 输出为[object Object]
       for (const el of xml.querySelectorAll("entry, item")) { // 无法执行
        entries.push(parse(el, feed));
        return entries
       }
    }
};

async function getParsed(htmlString) {
  await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);

  const parsing = await chrome.runtime.sendMessage({
    type: 'getParsedDOM',
    target: 'offscreen',
    data: htmlString
  });

  await closeOffscreenDocument();
    console.log("parsing : " + parsing);
  return parsing;
}

async function setupOffscreenDocument(path) {
  if (!(await hasDocument())) {
    // 创建offscreen文档
    if (creating) {
      await creating;
    } else {
      creating = chrome.offscreen.createDocument({
        url: path,
        reasons: ['DOM_PARSER'],
        justification: 'Parse DOM'
      });
      await creating;
      creating = null;
    }
  }
}

async function hasDocument() {
  const matchedClients = await clients.matchAll();
  return matchedClients.some(
    (c) => c.url === chrome.runtime.getURL(OFFSCREEN_DOCUMENT_PATH)
  );
}

async function closeOffscreenDocument() {
  if (!(await hasDocument())) {
    return;
  }
  await chrome.offscreen.closeDocument();
}

offscreen.js代码 #

chrome.runtime.onMessage.addListener(handleMessages);

async function handleMessages(message, sender, sendResponse) {
  if (message.target !== 'offscreen') {
    return false;
  }
   if (message.type !== 'getParsedDOM') {
    console.warn(`Unexpected message type received: '${message.type}'.`);
    return;
  }
    
    await getParsed(message.data).then((result) => {
    sendResponse(result); // result是XMLDocument对象
    })
    return true;
}

async function getParsed(data) {
    return new Promise((resolve, reject) => {
        const parser = new DOMParser();
        const xml = parser.parseFromString(data, 'text/xml');
        resolve(xml);
        (err) => reject(err)
  });
}

核心原因 #

Chrome扩展的消息传递机制仅支持JSON可序列化的数据，XMLDocument属于DOM对象，无法直接序列化，传递时会被转换为普通的[object Object]，丢失所有DOM方法和结构信息。

方案一：在Offscreen文档中提前提取结构化数据 #

直接在Offscreen中完成XML解析和数据提取，将所需的结构化数据（如数组、对象）传递给Service Worker，避免传递DOM对象。

修改offscreen.js：

chrome.runtime.onMessage.addListener(handleMessages);

async function handleMessages(message, sender, sendResponse) {
  if (message.target !== 'offscreen') return false;
  if (message.type !== 'getParsedDOM') {
    console.warn(`Unexpected message type received: '${message.type}'.`);
    return;
  }
    
  const entries = await getParsed(message.data);
  sendResponse(entries);
  return true;
}

async function getParsed(data) {
  const parser = new DOMParser();
  const xml = parser.parseFromString(data, 'text/xml');
  // 提取entry/item元素的结构化数据，按需调整字段
  return Array.from(xml.querySelectorAll("entry, item")).map(el => ({
    title: el.querySelector("title")?.textContent || "",
    link: el.querySelector("link")?.getAttribute("href") || el.querySelector("link")?.textContent || "",
    pubDate: el.querySelector("pubDate")?.textContent || "",
    // 根据你的业务需求添加其他字段
  }));
}

修改Service Worker的fetchEntries函数：

async function fetchEntries(feed) {
  // ... 原有错误处理逻辑 ...
  else {
    const htmlString = await (await fetch(feed.url)).text();
    const rawEntries = await getParsed(htmlString);
    // 直接使用结构化数据调用parse函数（需调整parse函数适配对象参数）
    const entries = rawEntries.map(item => parse(item, feed));
    return entries;
  }
}

方案二：将XMLDocument序列化为字符串，在Service Worker中重新解析 #

如果需要保留完整的XML结构，可将XMLDocument序列化为字符串传递，在Service Worker中重新解析为XMLDocument。

修改offscreen.js：

async function getParsed(data) {
  const parser = new DOMParser();
  const xml = parser.parseFromString(data, 'text/xml');
  // 序列化XMLDocument为字符串
  const serializer = new XMLSerializer();
  return serializer.serializeToString(xml);
}

修改Service Worker的getParsed函数：

async function getParsed(htmlString) {
  await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);

  const xmlString = await chrome.runtime.sendMessage({
    type: 'getParsedDOM',
    target: 'offscreen',
    data: htmlString
  });

  await closeOffscreenDocument();
  // 在Service Worker中重新解析XML字符串
  const parser = new DOMParser();
  return parser.parseFromString(xmlString, 'text/xml');
}

方案对比 #

• 方案一：数据传输量更小，性能更优，适合仅需提取特定数据的场景。
• 方案二：保留完整XML结构，适合需要后续灵活处理XML的场景，但会增加数据传输量和二次解析的开销。

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