在 chrome 扩展清单 v3 中使用 jsdom

Question

在 chrome 扩展清单 v3 中，它声明 background.js 现在已替换为 service worker，并且 dom 在 service worker 中不可用。然后建议将undom 或jsdom 用作DOMParser API 的替代方案。

jsdom 等库可用于模拟典型浏览器 窗口环境，包含 DOMParser、事件传播和 其他功能，例如 requestAnimationFrame。重量更轻 像 undom 这样的替代品提供了足够多的 DOM 来支持许多前端 框架和库。

但是undom 太有限了，只能创建元素，但不能查询我需要的 dom 元素，尽管在 service worker 中很容易使用。所以它尝试使用jsdom，它更彻底，缺点是~6MB。

我尝试导入 jsdom 并且我了解到它可以在对 this 问题的评论中使用 browserify 来完成，当我在一个简单的 HTML 文件中使用 browserifyed 包时，它可以按预期工作但不能在chrome 扩展，它给出了这个错误：

ReferenceError: require is not defined.

我使用this回答加载所需的js文件，如下所示：

try {
  importScripts('assets/jsdom.bundle.js', 'common.js', 'search.js', 'background.js');
} catch (e) {
  console.error(e);
}

并尝试在search.js中这样使用它：

const jsdom = require("./assets/jsdom.bundle");
const { JSDOM } = jsdom;

jsdom 如何在 chrome 扩展服务工作者中正确使用？

Answer 1

感谢@wOxxOm 的评论让我朝着正确的方向前进，我设法让它像这样工作：

1- 创建了一个名为 main.js 的 js 文件：

var jsdom = require("jsdom");
exports.jsdom = jsdom;

2- 使用以下命令对其进行浏览：

browserify main.js -o jsdom.bundle.js --standalone jsdomModule

3- 最后像这样在 service worker 中使用它：

const { JSDOM } = jsdomModule.jsdom;
const jd = new JSDOM('<div>hello</div>');

然后我在调用querySelector函数时遇到了这个错误：

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

所以在我的第 4 个周末之后，我放弃了使用 jsdom，转而在内容脚本中完成这项工作，并使用“消息传递”与服务工作者进行交流，这就像一个魅力。 我认为谷歌人应该从文档中删除他们的 jsdom 建议。