jQuery 在 chrome 扩展弹出窗口中不起作用答案

【问题标题】：jQuery not working in chrome extension popupjQuery 在 chrome 扩展弹出窗口中不起作用
【发布时间】：2015-10-11 19:54:18
【问题描述】：

我正在构建我的第一个 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!");  
});

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

你需要：

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

<script src="jquery.min.js"></script>
```
其次，您需要将自己的脚本收集到一个文件中并像这样包含它； inline code is not allowed in any form，内容脚本不适用于扩展页面。

【讨论】：

那么，不能在 manifest 中加载 jquery 以便在 popup.js 中使用它吗？
@karlihnos 最佳做法是包含库的本地副本。然后你可以像往常一样将它包含在弹出窗口的 HTML 中。

【解决方案2】：

还要确保在popup.js 之前包含jQuery.min.js。我犯了这个愚蠢的错误，在jQuery.min.js 之前加载popup.js 并且它不起作用。所以总是先加载jQuery.min.js。

【讨论】：