在 Chrome 扩展程序中使用 JQuery答案

【问题标题】：Using JQuery in a Chrome Extension在 Chrome 扩展程序中使用 JQuery
【发布时间】：2014-02-01 17:01:10
【问题描述】：

我正在为我的世界服务器创建一个 chrome 扩展。这个扩展的目的是返回服务器的在线状态。我正在使用 JQuery 的 getJSON 函数来解析位于网络服务器上的 JSON 文件的状态，当我在浏览器中将它作为实际网页运行时，它工作得很好，但我无法让它在扩展中工作。

manifest.json

{
  "manifest_version": 2,

  "name": "CJFreedom",
  "description": "Displays the status of the Minecraft server CJFreedom.",
  "version": "1.0",


  "permissions": [
    "https://www.thecjgcjg.com/panel/scripts/stats.php",
    "https://www.thecjgcjg.com/",
    "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
  ],

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

popup.html

<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="popup.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <img src="header.png" alt="diz iz header" width="300px"> <br/>
    <a href="http://www.twitter.com/CJFupdates" target="_blank"><img src="twitter.png" alt="Follow CJFreedom on twitter" width="16px" style="float: right; margin: 5px;"></a>
        <p style="float: right;">Follow: </p>

    <div id="content">
        <p style="float: left;" id="status"> CJFreedom is <span style="color: orange;">?...</span></p> <br />
        <p> IP: <b>play.thecjgcjg.com </b></p>
        <p> Forum: <b><a href="http://www.thecjgcjg.com/forum/" target="_blank">thecjgcjg.com/forum</a></b></p>
    </div>
</body>
</html>

popup.js

$.getJSON("https://www.thecjgcjg.com/panel/scripts/stats.php", function(result){
    status = result.status;

    if (status == "Offline")
        $('#status').html('CJFreedom is <span style="color: red;"><b>Offline</b>.(</span>');
    else
        $('#status').html('CJFreedom is <span style="color: #3AC400;"><b>Online</b>!</span>');

});

如您所见，当扩展程序解析 JSON 文件时，状态为“？...”，服务器启动时为“在线”，当服务器关闭时为“离线”。正如我之前提到的，当我在浏览器中将它作为网页运行时它工作正常，但是当我打开扩展程序时它卡在“？...”部分，就好像它只是忽略了 javascript...

【问题讨论】：

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

【解决方案1】：

您可能遇到了Content Security Policy 的问题，它阻止了外部脚本的加载。

您是否尝试过下载 jQuery 文件并将其作为扩展的一部分，就像任何其他 JavaScript 文件一样？这在过去对我来说非常有效，并且支持 Chrome 应用程序和扩展程序通常首选的“离线优先”模式。 this page底部的“捆绑”部分提到了这一点：

如果您想使用浏览器不提供的库（例如 jQuery），您可以将该库的 JavaScript 文件与您的扩展程序捆绑在一起。捆绑的库在扩展程序中的工作方式与在其他网页中的工作方式一样。

【讨论】：