jQuery不能在Chrome扩展弹出窗口中工作 | jQuery不能在Chrome扩展弹出窗口中工作

本文介绍了jQuery不能在Chrome扩展弹出窗口中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

编辑：我改变了它，这里是新的代码，但仍然不起作用。有任何想法吗？我花了两个多小时试图弄清楚。我是一个初学者，在javascript和jquery中很容易生成扩展，所以它肯定会是小而尴尬的......非常感谢！

清单.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>首个Google扩展程序< / title> 
< style> 
 body {
 font-family：Segoe UI; 
 width：300px; 
 font-size：14px; 
}; 
 
 #changeMe {
颜色：蓝色; 
 font-style：bold; 
}; 
< / style> 
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> 
< / head> 
 
< body> 
欢迎来到我的第一个谷歌浏览器扩展程序！ <峰; br> 
< div id =changeMe> 
我不同！ 
< / div> 
< / body> 
 
< / html>

popup.js

  $（document）.ready（function（）{
 $（＃changeMe）。append（Test！）; 
}） ;

解决方案

您需要：

了解。

阅读上述文档后，您需要解决的第一个问题是尝试使用远程脚本。这是，但对于像jQuery这样的东西，最好下载一份将其添加到扩展程序的文件夹并将其作为本地文件包含：

<！ - 指扩展程序自己的文件夹 - > < script src =jquery.min.js>< / script>

其次，您需要在文件中收集自己的脚本并将其包含为好;不得以任何形式，而内容脚本不适用于扩展页面。

I'm building my first chrome extension, and I'm having some trouble. I want to use jQuery on popup.html. The popup otherwise works fine, but the jQuery doesn't work.

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!

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!");
});

解决方案

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.
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:
```

<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.

这篇关于jQuery不能在Chrome扩展弹出窗口中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！