时间戳

首页 > 解决方案 > 在 Chrome 扩展程序中呈现树枝模板

javascript - 在 Chrome 扩展程序中呈现树枝模板

问题描述

我正在尝试在 chrome 扩展中渲染一个 twig (with twigjs) 模板。我目前正在使用 browserify 构建脚本编译以下打字稿。

import * as twig from "twig"

const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");

document.addEventListener("DOMContentLoaded", () => {
        twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
            document.querySelector("body").innerHTML = html;
        });
});

我已确保将文件包含在我manifest.json的 .

...
    "web_accessible_resources": [
        "twig/*.html.twig"
    ]
...

但是，在运行此程序时，我得到以下堆栈跟踪。我不确定该怎么做，因为chrome.runtime.getURL如果我将返回的 URL 打入地址栏，它会解析。

Uncaught TypeError: t.stat is not a function
    at Object.<anonymous> (twig.js:1)
    at Object.e.Templates.loadRemote (twig.js:1)
    at Object.e.exports.twig (twig.js:1)
    at Object.e.exports.renderFile (twig.js:1)
    at HTMLDocument.<anonymous> (browser-action.ts:7)

标签： javascriptgoogle-chrome-extensiontwig

解决方案

挖掘一些twigjs源代码，看起来使用renderFile助手是我的错误。这更正确。

const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};

document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});

我使用 async false 因为它只会从本地连接获取，所以同步加载模板确实不应该有任何延迟。

推荐阅读