Question

对不起，很长的帖子。我对Chrome Extension开发很陌生。当我点击我的浮动元素时，我试图注入一个可见的侧边栏。模板加载正常但我已经从我的脚本中加载的任何类型的脚本都没有在我的模板中得到尊重。例如，我尝试使用Mustache.js模拟事物，这使得Mustache未定义。这是我的清单：

{
    "name": "The Explorer", "manifest_version": 2,
    "description": "An extension for chrome", "version": "1.0.0",
    "background": {
        "persistent": false,
        "scripts": [ "background.js" ]
    },
    "permissions": [ "tabs", "<all_urls>" ],
    "web_accessible_resources": [ "app/html/*", "vendor/*" ]
}

background.js：

chrome.tabs.onUpdated.addListener(function(tabId) {
    var scripts = ["vendor/jquery-3.1.0.min.js", "vendor/mustache.min.js", "script.js"],
    injectScripts = function(scriptArr) {
        if (Array.isArray(scriptArr)) {
            var script = scriptArr.splice(0, 1)[0];
            chrome.tabs.executeScript(tabId, {file: script},
                injectScripts.bind(null, scriptArr));
        } else {
            chrome.tabs.executeScript(tabId, {file: scriptArr});
        }
    };
    injectScripts(scripts);
});

的script.js：

(function() {
    var myIcon;

    (function createmyIcon() {
        myIcon = document.querySelector('.my-shortcut-icon');

        if (!myIcon) {
            myIcon = document.createElement('div');
        }
        myIcon.addEventListener('click', toggleSidebar);
        document.body.appendChild(myIcon);
    })();

    var sidebarOpen = false;

    function toggleSidebar() {
        var sidebar = document.getElementById('my-sidebar');

        if (sidebarOpen) {
            sidebarOpen = false;
            myIcon.style.right = '0px';
            sidebar.style.width = '0px';
        } else {
            if (!sidebar) {
                sidebar = document.createElement('div');
                sidebar.id = "my-sidebar";

                document.body.appendChild(sidebar);

//Loads my template here
                $("#my-sidebar").load(chrome.extension.getURL('app/html/test.html'));
            }

            sidebarOpen = true;
            myIcon.style.right = '300px';
            sidebar.style.width = '300px';
        }
    }
})();

这是我的模板（test.html）：

<div id="target">Loading...</div>

<script id="template" type="x-tmpl-mustache">
    Hello {{ name }}!
</script>

<script type="text/javascript">
    Mustache.parse($('#template').html());
    $('#target').html(Mustache.render($('#template').html(), {
        name: "Luke"
    }));
</script>

我知道我在哪里犯错误吗？

脚本未在Chrome扩展程序的加载模板中运行

0 个答案: