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

2024-01-02

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

Edit:我更改了它,这是新代码,但仍然不起作用。有任何想法吗?我花了两个多小时试图弄清楚。我是扩展的初学者,并且对 javascript 和 jquery 非常生疏,所以它绝对可能是一些小而尴尬的东西......非常感谢!

清单.json

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

弹出窗口.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!");  
});

你需要:

  1. 学会调试扩展弹出窗口 https://developer.chrome.com/extensions/tut_debugging。它会向您显示一个信息性错误。

  2. 该错误将参考内容安全策略。所以你需要阅读扩展的 CSP https://developer.chrome.com/extensions/contentSecurityPolicy.

  3. 阅读上述文档后,您需要解决的第一个问题是尝试使用远程脚本。这是possible https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-remote-script,但对于像 jQuery 这样的东西,最好下载它的副本,将其添加到扩展的文件夹中并将其包含为本地文件:

    <!-- refers to extension's own folder -->
    <script src="jquery.min.js"></script>
    
  4. 其次,您需要将自己的脚本收集到一个文件中,并像这样包含它;不允许任何形式的内联代码 https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution,内容脚本不适用于扩展页面。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 在 Chrome 扩展弹出窗口中不起作用 的相关文章

随机推荐