使用各种脚本注入带有 Google Chrome 扩展名的 HTML 模板时，jQuery 似乎无法导入

Question

为了详细说明，我在我的 Google Chrome 扩展中注入并加载了一个 HTML 模板，如下所示：

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        // Typical action to be performed when the document is ready:
            
            var PBSKPage = xhttp.responseText;
            document.querySelector('html').innerHTML = "";
            loadPBSKPage();
            function loadPBSKPage() {
                
                document.querySelector('html').innerHTML = PBSKPage;
            }
        }
    };
function insertAndExecute() {
    var scripts = Array.prototype.slice.call(document.getElementsByTagName("script"));
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src != "") {
            var tag = document.createElement("script");
            tag.src = scripts[i].src;
            document.getElementsByTagName("head")[0].appendChild(tag);
        }
        else {
            eval(scripts[i].innerHTML);
        }
    }
}

并且在我的 HTML 模板中，我清楚地将请求 jQuery 的脚本标记放在 jQuery 依赖脚本之前：

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="chrome-extension://niabfndainielhgpcjenbpodannhfofj/2015/pbsk_resources/wildkratts/js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
        <script src="chrome-extension://niabfndainielhgpcjenbpodannhfofj/2015/pbsk_resources/wildkratts/js/vendor/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script src="chrome-extension://niabfndainielhgpcjenbpodannhfofj/2015/pbsk_resources/wildkratts/js/vendor/jquery.touchSwipe.min.js" type="text/javascript"></script>
        <script src="chrome-extension://niabfndainielhgpcjenbpodannhfofj/2015/pbsk_resources/wildkratts/js/vendor/retina.min.js"></script>
...

jQuery 似乎没有导入，当执行 JS 文件时，浏览器总是会在导入 jQuery 时定义的内容上吐出一个 Uncaught TypeError。

那我该怎么办？这是因为 CSP 吗？是因为 insertAndExecute() 函数吗？是因为 Google Chrome 扩展的内在内部运作吗？我想我可以将 jQuery JS 粘贴到每个 jQuery-reliant JS 文件中，但这不是很有效。有人对此有解决方案吗？

Answer 1

是的，这是 CSP 的一个问题，因为 chrome 不希望人们 link 外部库并在以后恶意或无意地更改它们。您可以获得 jQuery 库并将其显式添加到您的项目中，但是是的，它需要更多的工作:(

Answer 2

我没有足够高的代表来评论我上面的答案，但是将 jQuery 与您的代码和您希望使用的库捆绑在一起应该可以解决问题。也就是说，使用更新版本的 jQuery 可能是个好主意，因为它自 1.11 版以来收到了许多重要的安全补丁。

使用各种脚本注入带有 Google Chrome 扩展名的 HTML 模板时，jQuery 似乎无法导入

When injecting an HTML template with a Google Chrome extension with various scripts, jQuery doesn't seem to import

javascript

jquery

dom

google-chrome

google-chrome-extension