Using JQuery in a Chrome Extension

Question

I'm creating a chrome extension for a minecraft server. 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.

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

});

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

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? 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. 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. Bundled libraries work in extensions just as they do in other web pages.

Using JQuery in a Chrome Extension

Question

1 answers

solution1
2 ACCPTED 2014-02-01 17:08:49

Using JQuery in a Chrome Extension

Question

1 answers

solution1 2 ACCPTED 2014-02-01 17:08:49

solution1
2 ACCPTED 2014-02-01 17:08:49