My JS file won't load on my Chrome web application

I'm writing a Chrome web application and am trying to load a clock onto it, but this is not working. The HTML & CSS files are showing up but not the JS, meaning that the application just looks like an empty box.

I would really appreciate your help - thank you very much!

Here is my popup.html file:

<!DOCTYPEhtml>
    <link rel="stylesheet" type="text/css" href="popup.css">
        <title>Your Personal Homepage</title>
        <script src="popup.js"></script>
        <script src="clock.js"></script>
      </head>
       <body>
    <div id="clock" class="light">
                <div class="display">
                    <div class="weekdays"></div>
                    <div class="ampm"></div>
                    <div class="alarm"></div>
                    <div class="digits"></div>
                </div>
            </div>
    <!-- JavaScript Includes -->
            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
            </body> 
</html>

And here is my clock.js file:

$(function(){

// Cache some selectors

var clock = $('#clock'),
    alarm = clock.find('.alarm'),
    ampm = clock.find('.ampm');

// Map digits to their names (this will be an array)
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

// This object will hold the digit elements
var digits = {};

// Positions for the hours, minutes, and seconds
var positions = [
    'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];

// Generate the digits with the needed markup,
// and add them to the clock

var digit_holder = clock.find('.digits');

$.each(positions, function(){

    if(this == ':'){
        digit_holder.append('<div class="dots">');
    }
    else{

        var pos = $('<div>');

        for(var i=1; i<8; i++){
            pos.append('<span class="d' + i + '">');
        }

        // Set the digits as key:value pairs in the digits object
        digits[this] = pos;

        // Add the digit elements to the page
        digit_holder.append(pos);
    }

});

// Add the weekday names

var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
    weekday_holder = clock.find('.weekdays');

$.each(weekday_names, function(){
    weekday_holder.append('<span>' + this + '</span>');
});

var weekdays = clock.find('.weekdays span');

// Run a timer every second and update the clock

(function update_time(){

    // Use moment.js to output the current time as a string
    // hh is for the hours in 12-hour format,
    // mm - minutes, ss-seconds (all with leading zeroes),
    // d is for day of week and A is for AM/PM

    var now = moment().format("hhmmssdA");

    digits.h1.attr('class', digit_to_name[now[0]]);
    digits.h2.attr('class', digit_to_name[now[1]]);
    digits.m1.attr('class', digit_to_name[now[2]]);
    digits.m2.attr('class', digit_to_name[now[3]]);
    digits.s1.attr('class', digit_to_name[now[4]]);
    digits.s2.attr('class', digit_to_name[now[5]]);

    // The library returns Sunday as the first day of the week.
    // Stupid, I know. Lets shift all the days one position down, 
    // and make Sunday last

    var dow = now[6];
    dow--;

    // Sunday!
    if(dow < 0){
        // Make it last
        dow = 6;
    }

    // Mark the active day of the week
    weekdays.removeClass('active').eq(dow).addClass('active');

    // Set the am/pm text:
    ampm.text(now[7]+now[8]);

    // Schedule this function to be run again in 1 sec
    setTimeout(update_time, 1000);

})();

Is there any way to make this show up?

Thank you!

Upvotes: 0