Chrome扩展Manifest V3中如何导入DOMParser对象及使用Node.js第三方库

1. 如何导入使用DOMParser对象 #

Chrome扩展V3的service worker运行环境没有原生DOM API，无法直接实例化DOMParser，可通过两种方式解决：

• 使用官方提供的chrome.offscreen离屏页面API：
  首先在manifest.json中声明离屏权限：

  "permissions": ["offscreen"]
  

  然后在service worker中调用chrome.offscreen.createDocument创建隐藏的离屏页面，在离屏页面的JS环境中实例化DOMParser完成HTML解析后，再把结果传回service worker即可。
• 轻量解析场景可选择无DOM依赖的纯JS HTML解析库，直接引入库完成解析，不需要调用DOM相关API。

2. 如何在service_worker中使用基于Node.js的第三方库 #

service worker属于标准浏览器环境，默认不支持Node.js原生API，无法直接运行Node.js专属库，可按以下方案处理：

• 优先查找对应库的浏览器兼容编译版本，大部分主流工具库都提供了ESM、UMD格式的浏览器适配版本，直接将编译后的JS文件存入扩展目录，在service worker中通过import语句导入即可使用。
• 如果没有现成的浏览器适配版本，可使用Rollup、Vite等打包工具对Node.js库做打包转换，打包过程中引入对应Node.js API的浏览器polyfill做兼容，最终打包成单文件ESM模块后再引入service worker使用。
• 若第三方库强依赖Node.js独有API且无可用polyfill，无法在service worker中运行，建议更换同功能的浏览器适配类库。

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