Chrome扩展V3的service worker中如何使用jsdom操作DOM获取DOMParser

你遇到的jsdom报错属于预期情况：jsdom是面向Node.js环境开发的库，依赖大量Node.js原生API，同时你用的CommonJS require()语法在默认的扩展Service Worker中也不支持，无法直接在该环境下运行。

方案1：优先使用原生DOMParser（推荐，无额外依赖） #

Chrome 90及以上版本中，Service Worker全局已经原生支持DOMParser，无需引入任何第三方库，直接使用即可：

const parser = new DOMParser();
// 第二个参数固定为text/html即可解析HTML字符串
const doc = parser.parseFromString(`<!DOCTYPE html><p>Hello world</p>`, 'text/html');
console.log("textContent", doc.querySelector("p").textContent); // 输出 Hello world

方案2：兼容低版本Chrome，使用轻量替代库 #

如果需要兼容更低版本的Chrome，可以选用专门为Worker环境设计的纯前端HTML解析库，操作步骤如下：

1. 下载对应库的ES模块版本到你的扩展本地目录中
2. 修改manifest.json的background配置，开启ES模块支持：

"background": {
    "service_worker": "background.js",
    "type": "module"
},
"manifest_version": 3,

3. 在background.js中导入并使用：

// 路径替换为你本地存放对应库文件的实际路径
import { DOMParser } from './你下载的解析库文件名.js';
const doc = new DOMParser().parseFromString(`<!DOCTYPE html><p>Hello world</p>`, 'text/html');
console.log("textContent", doc.querySelector("p").textContent);

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