Chrome扩展Manifest V3环境下报DOMParser未定义错误如何解决？

问题根因 #

Manifest V3将扩展的后台运行环境从原来的Background Page替换为Service Worker，Service Worker是无DOM的执行上下文，原生不支持DOMParser、document等DOM相关API，这是报错的直接原因。
除此之外你的代码存在参数使用错误：chrome.scripting.executeScript的回调参数results是结果数组，每个元素对应一个注入frame的返回结果，不能直接将整个results对象传入parseFromString解析，需要先提取GetSource.js返回的HTML字符串。

解决方案 #

方案1：将解析逻辑移到Content Script中（最推荐） #

Content Script运行在网页上下文，拥有完整的DOM环境，可以正常使用DOMParser。你可以直接把解析逻辑放到GetSource.js中，解析完成后将需要的结构化结果返回给后台即可。
GetSource.js示例代码：

// GetSource.js 内容
const html = document.documentElement.outerHTML;
const parser = new DOMParser();
const content = parser.parseFromString(html, "text/html");
// 这里处理解析逻辑，提取你需要的字段
const result = {
  // 把你需要的结果整理到这里
  title: content.querySelector('title').textContent,
  // 其他字段...
};
return result;

后台调用代码调整为：

chrome.scripting.executeScript( 
  {
    target: {tabId: tab.id, allFrames: true},
    files: ['GetSource.js'],
  }, async function(results) {
    // 直接拿到解析后的结果
    const parseResult = results[0].result;
    // 后续逻辑
  }
)

方案2：使用Offscreen API（需要后台保留解析逻辑时使用） #

如果你的业务逻辑要求必须在后台侧完成解析，可以使用Chrome 109+支持的chrome.offscreen创建离屏文档，获得DOM环境后再使用DOMParser。
首先需要在manifest.json中声明权限：

"permissions": ["offscreen"]

后台解析示例代码：

// 先创建离屏文档
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument()) return;
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['DOM_PARSER'],
    justification: '用于解析网页HTML源码'
  });
}

// 解析逻辑
async function parseHtml(html) {
  await createOffscreen();
  // 调用离屏页面的解析方法
  return chrome.runtime.sendMessage({
    action: 'parseHtml',
    html: html
  });
}

// 调用executeScript拿到HTML后调用解析方法
chrome.scripting.executeScript( 
  {
    target: {tabId: tab.id, allFrames: true},
    files: ['GetSource.js'],
  }, async function(results) {
    // 先拿到GetSource返回的HTML字符串
    const rawHtml = results[0].result;
    const content = await parseHtml(rawHtml);
    // 后续逻辑
  }
)

新增offscreen.html和对应的JS文件实现解析逻辑即可。

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