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

Question

I'm building my first chrome extension, and I'm having some trouble.我正在构建我的第一个 chrome 扩展程序，但遇到了一些麻烦。 I want to use jQuery on popup.html.我想在 popup.html 上使用 jQuery。 The popup otherwise works fine, but the jQuery doesn't work.否则弹出窗口工作正常，但 jQuery 不起作用。

Edit: I changed it, here's the new code, which still doesn't work.编辑：我改变了它，这是新代码，它仍然不起作用。 Any ideas?有任何想法吗？ I've spent over two hours trying to figure it out.我花了两个多小时试图弄清楚。 I'm a beginner to extensions and quite rusty in javascript and jquery, so it could definitely be something small and embarrassing... Thanks so much!我是扩展的初学者，并且在 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弹出窗口.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弹出窗口.js

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

Answer 1

You need to: 你需要：

Learn to debug extension popups . 学习调试扩展弹出窗口。 It will show you an informative error. 它会向您显示信息错误。
Said error will refer to Content Security Policy. 所述错误将参考内容安全策略。 So you need to read about extensions' CSP . 所以你需要阅读有关扩展的CSP 。
After you read the above documentation, the first problem you need to fix is trying to use a remote script. 阅读上述文档后，您需要解决的第一个问题是尝试使用远程脚本。 This is possible , but for something like jQuery it's best to download a copy of it, add it to extension's folder and include it as a local file: 这是可能的，但对于像jQuery这样的东西，最好下载它的副本，将其添加到扩展的文件夹并将其包含为本地文件：
```
  <script src="jquery.min.js"></script> 
```
Second, you need to collect your own scripts inside a file and include it like that as well; 其次，您需要在文件中收集自己的脚本并将其包含在内; inline code is not allowed in any form , and content scripts do not apply for extension pages. 不允许以任何形式使用内联代码，内容脚本不适用于扩展页。

Answer 2

Also make sure to include jQuery.min.js before popup.js .还要确保在jQuery.min.js之前包含popup.js 。 I made this silly mistake, was loading popup.js before jQuery.min.js and it doesn't work that way.我犯了这个愚蠢的错误，在popup.js之前加载jQuery.min.js并且它不能那样工作。 So always load jQuery.min.js first.所以总是先加载jQuery.min.js 。

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

问题描述

2 个解决方案

解决方案1
9 已采纳 2015-10-11 20:29:36

解决方案2
7 2019-09-29 23:02:13

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

问题描述

2 个解决方案

解决方案1 9 已采纳 2015-10-11 20:29:36

解决方案2 7 2019-09-29 23:02:13

解决方案1
9 已采纳 2015-10-11 20:29:36

解决方案2
7 2019-09-29 23:02:13