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

Posted 2023-05-09

【中文标题】当使用带有各种脚本的 Google Chrome 扩展注入 HTML 模板时，jQuery 似乎没有导入

【英文标题】：When injecting an HTML template with a Google Chrome extension with various scripts, jQuery doesn't seem to import

【发布时间】：2021-07-31 11:07:40

【问题描述】：

为了详细说明，我在我的 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 的 JS 文件中，但这不会很有效。有没有人可以解决这个问题？

【参考方案1】：

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

【讨论】：

所以唯一的解决办法就是把jQuery粘贴到需要它的JS文件中？

奇怪，每当我转到 HTML 模板本身时，它执行脚本都很好，没有错误，但是每当我转到被 HTML 模板覆盖的实时页面时 (pbskids.org/wildkratts /)，执行有问题。

【参考方案2】：

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

【讨论】：

我认为也可以更改 CSP 使其按您的方式工作，但我不记得该怎么做

所以基本上，我只要把整个jQuery库代码复制过来，粘贴到需要的JS文件中就可以了？

@ThePiGuy 是的，你可以这样做，或者最好将其作为一个单独的文件，并在 html 中使用 <script src="LOCATION/NAME.js"></script> 链接它，其中 LOCATION/NAME 是 jQuery 库的相对位置

所以放这个； <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 并将其插入 HTML 中？还有你所说的“jQuery 库的相对位置”是什么意思？

在此处下载 jQuery：jquery.com/download 并将其移至您的项目中。然后将位置放置为相对于 html 文件放置 jQuery js 文件的位置