提问人:Patrick Matte 提问时间:10/6/2023 更新时间:10/8/2023 访问量:33
如何在不使用 new 函数的情况下呈现模板文字,因为 chrome 扩展程序清单 v3 不允许 unsafe-eval
How to render template literals without using new Function because chrome extension manifest v3 does not permit unsafe-eval
问:
我使用 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,因此它是异步的,我宁愿避免这种情况。
我还阅读了有关预编译模板或使用标记模板的信息,但这意味着对我的代码进行重大重构。
我只是想找到一种方法来呈现模板字符串,而无需使用新函数,并且对代码的更改最小。
答:
0赞
Patrick Matte
10/8/2023
#1
我发现 https://github.com/shepherdwind/simple-evaluate 该方法可以计算数学表达式和字符串模板,但它不能调用函数或设置 eval 和 new Function 等属性。但它应该帮助我进行扩展重构。
上一个:重用 Vue 组件
下一个:嵌套包含双节棍中传递的数据
评论