Using JQuery in a Chrome Extension

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

Answers


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.


Need Your Help

populate input field using javascript problem

javascript html

Thanks for the responses.. i put a live version of the code.. to see if that helps resolve this. It is here:

Timed Tasks (cron-like) in PHP

php automation cron scheduling

Is there a full featured, job scheduling package available for PHP? I'm looking for the PHP equivalent to Java's Quartz. I'm fine having things triggered externally from cron to drive the system. The