Question

我正在构建我的第一个chrome扩展，我遇到了一些麻烦。我想在popup.html上使用jQuery。弹出窗口工作正常，但jQuery不起作用。

编辑：我更改了它，这是新代码，但仍无效。有任何想法吗？我花了两个多小时试图搞清楚。我是扩展的初学者，在javascript和jquery中相当生疏，所以它绝对可能是小而且令人尴尬......非常感谢！

的manifest.json

  "content_scripts": [{
    "matches": [website], 
    "js": [
    "content.js", 
    "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"]
   }],

popup.html

<!DOCTYPE html>
<html>
<head>
    <title>First Google Extension</title>
    <style>
    body { 
        font-family: "Segoe UI"; 
        width: 300px; 
        font-size: 14px; 
        }; 

    #changeMe {
        color: blue; 
        font-style: bold; 
        }; 
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    Welcome to my first Google Chrome Extension! <br> 
    <div id="changeMe">
        I'm different!
    </div>
</body>

</html>

popup.js

$(document).ready(function() {
        $("#changeMe").append("Test!");  
});

Answer 1

你需要：

了解debug extension popups。它会向您显示信息错误。
所述错误将参考内容安全策略。所以你需要阅读extensions' CSP。
阅读完上述文档后，您需要解决的第一个问题是尝试使用远程脚本。这是possible，但对于像jQuery这样的东西，最好下载它的副本，将其添加到扩展程序的文件夹并将其作为本地文件包含在其中：
```

<script src="jquery.min.js"></script>
```
其次，您需要在文件中收集自己的脚本并将其包含在内; inline code is not allowed in any form，内容脚本不适用于扩展程序页。

Answer 2

还要确保在jQuery.min.js之前包括popup.js。我犯了一个愚蠢的错误，就是在popup.js之前加载jQuery.min.js，但这种方式不起作用。因此，请始终先加载jQuery.min.js。

jQuery无法在chrome扩展弹出窗口中工作

2 个答案: