Question

我正在尝试在chrome扩展程序中渲染树枝（带有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)

Answer 1

翻阅某些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，因为它只会从本地连接中获取，因此，同步加载模板确实不应该有任何滞后。

在Chrome扩展程序中渲染树枝模板

1 个答案: