如何在不使用 new 函数的情况下呈现模板文字,因为 chrome 扩展程序清单 v3 不允许 unsafe-eval

How to render template literals without using new Function because chrome extension manifest v3 does not permit unsafe-eval

提问人:Patrick Matte 提问时间:10/6/2023 更新时间:10/8/2023 访问量:33

问:

我使用 v2 清单制作了一个 chrome 扩展,该扩展使用了大量来自 json 文件的模板文字。我使用新函数渲染它们,这使得它变得如此简单。但是使用 chrome 扩展 manifest v3,无法使用 new Function。有人会有什么不需要大量重构的建议吗?

下面是我如何使用 new Function 呈现模板文字的示例。可悲的是,这是不允许的,因为我用反引号包装了整个表达式,所以在这种情况下,我真的没有看到使用 new Function 的问题。

function renderTemplate(expression, data) {
  return new Function("data", "return " + "`" + expression + "`")(data);
}

const json = {
  "test":"Hi I'm ${data.name}. It's ${data.time} and I'm almost ${data.age} years old."
};

const renderedTemplate = renderTemplate(json.test, { name: "Patrick", age: 30, time: "3pm" });
console.log(renderedTemplate); // Hi I'm Patrick. It's 3pm and I'm almost 30 years old.

我知道可以在扩展中运行可以执行新函数的沙盒页面,但它需要在两个脚本之间使用 postMessage,因此它是异步的,我宁愿避免这种情况。

我还阅读了有关预编译模板或使用标记模板的信息,但这意味着对我的代码进行重大重构。

我只是想找到一种方法来呈现模板字符串,而无需使用新函数,并且对代码的更改最小。

JavaScript 函数 模板 EVAL 文字

评论

0赞 Patrick Matte 10/6/2023
找到此尝试复制本机字符串文字功能的填充码。不幸的是,这不能执行像 ${count + 1} 这样的数学运算 stackoverflow.com/a/55594573/3598370

答:

0赞 Patrick Matte 10/8/2023 #1

我发现 https://github.com/shepherdwind/simple-evaluate 该方法可以计算数学表达式和字符串模板,但它不能调用函数或设置 eval 和 new Function 等属性。但它应该帮助我进行扩展重构。