在 chrome 扩展清单 v3 中使用 jsdom

Question

在 chrome extensions manifest v3 中声明 background.js 现在已替换为 service worker 并且 dom 在 service worker 中不可用。然后建议使用 undom 或 jsdom 作为 DOMParser API.

的替代品

Libraries such as jsdom can be used to emulate a typical browser window environment, complete with DOMParser, event propagation, and other capabilities like requestAnimationFrame. Lighter-weight alternatives like undom provide just enough DOM to power many frontend frameworks and libraries.

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

我尝试导入 jsdom，当我在简单的 HTML 文件，它按预期工作，但不在 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;

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

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，转而在内容脚本中完成这项工作，并使用“消息传递”与 service worker 进行通信，这非常有效。我认为 google 人应该从文档中删除他们的 jsdom 建议。

在 chrome 扩展清单 v3 中使用 jsdom

Using jsdom in chrome extension manifest v3

jsdom

browserify

chrome-extension-manifest-v3