jQuery在Chrome扩展程序弹出窗口中无法工作

Question

jQuery在Chrome扩展程序弹出窗口中无法工作

javascriptjquerygoogle-chromegoogle-chrome-extension

6

我正在开发我的第一个谷歌浏览器扩展程序，遇到了一些问题。我想在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!");  
});

- microslayer

2个回答

7

同时确保在popup.js之前包含jQuery.min.js。我曾经犯过这个傻瓜错误，先加载了popup.js再加载jQuery.min.js，但是这样是行不通的。所以请始终先加载jQuery.min.js。

- nilesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xan · Accepted Answer

您需要：

学习调试扩展弹出窗口，它会向您显示有用的错误信息。
上述错误将指向内容安全策略。因此，您需要了解有关扩展程序CSP的信息。
在阅读上述文档之后，您需要解决的第一个问题是尝试使用远程脚本。这是可能的，但对于像jQuery这样的东西最好下载一份副本，将其添加到扩展文件夹中并将其作为本地文件包含：

<!-- refers to extension's own folder -->
<script src="jquery.min.js"></script>

第二步，您需要将自己的脚本收集到一个文件中，并像这样包含它；任何形式的内联代码都不允许，并且内容脚本不适用于扩展程序页面。