在Chrome扩展程序中使用JQuery

Question

I'm creating a chrome extension for a minecraft server. 我正在为一个Minecraft服务器创建一个chrome扩展。 The purpose of this extension is to return the online status of the server. 此扩展的目的是返回服务器的在线状态。 I'm using JQuery's getJSON function to parse the status from a JSON file located on a webserver, and this works just fine when I run it in my browser as an actual webpage, but I can't get it to work in the extension. 我正在使用JQuery的getJSON函数来解析位于Web服务器上的JSON文件中的状态，当我在浏览器中将其作为实际网页运行时，这很好用，但是我不能让它在扩展中工作。

manifest.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 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 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>');

});

As you can see, when the extension is parsing the JSON file, the status is "?...", when the server is up it's "Online" and when it's down it's "Offline". 正如您所看到的，当扩展程序正在解析JSON文件时，状态为“？...”，当服务器启动时它处于“在线”状态，当它处于关闭状态时它处于“离线”状态。 As I previously mentioned, it works fine when I run it as a webpage in my browser, but when I open the extension it is stuck at the "?..." part, as if it just ignores the javascript... 正如我之前提到的，当我在浏览器中将其作为网页运行时它可以正常工作，但是当我打开扩展程序时它会停留在“？...”部分，好像它只是忽略了javascript ...

Answer 1

You may be running into an issue with the Content Security Policy which prevents the loading of external scripts. 您可能遇到内容安全策略的问题，该问题会阻止加载外部脚本。

Have you tried downloading the jQuery file and including it as part of your extension, like any other JavaScript file? 您是否尝试过下载jQuery文件并将其作为扩展程序的一部分包含在内，就像任何其他JavaScript文件一样？ This has worked perfectly adequately for me in the past, and supports the "offline first" pattern that is generally preferred with Chrome apps and extensions. 这在过去对我来说非常合适，并且支持Chrome应用和扩展程序通常首选的“离线优先”模式。 This is mentioned in the "Bundling" section at the bottom of this page : 这在本页底部的“捆绑”部分中提到：

If you want to use a library that the browser doesn't provide (for example, jQuery), you can bundle that library's JavaScript files with your extension. 如果要使用浏览器未提供的库（例如，jQuery），可以将该库的JavaScript文件与扩展名捆绑在一起。 Bundled libraries work in extensions just as they do in other web pages. 捆绑的库在扩展中工作，就像在其他网页中一样。

在Chrome扩展程序中使用JQuery

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-02-01 17:08:49

在Chrome扩展程序中使用JQuery

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-01 17:08:49

解决方案1
2 已采纳 2014-02-01 17:08:49