當使用帶有各種腳本的 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() function？ 是因為 Google Chrome 擴展程序的內在工作原理嗎？ 我想我可以將 jQuery JS 粘貼到每個依賴 jQuery 的 JS 文件中，但這不會很有效。 有人對此有解決方案嗎？

Answer 1

是的，這是 CSP 的一個問題，因為 chrome 不希望人們鏈接外部庫並在以后惡意更改它們。 您可以獲得 jQuery 庫並將其顯式添加到您的項目中，但是是的，它需要更多的工作：（

Answer 2

我沒有足夠高的代表來評論我上面的答案，但是將 jQuery 與您的代碼和您希望使用的庫捆綁在一起應該可以解決問題。 也就是說，使用更新版本的 jQuery 可能是個好主意，因為它自 1.11 版以來已收到許多重要的安全補丁。