I have modified this countdown script to countdown to 4:20pm everyday. I have attempted to create a Google Chrome app that displays the countdown. The javascript is supposed replace a paragraph tag with id of “note” with the time left. It works when I load the page in chrome, but does not work when I load the extension. Example, if I put:
<p id="note">asdf</a>
I get just the text, “asdf”, but when I open the html file I get the countdown.
Here is the manifest.json file:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Here is the popup.html code:
<html>
<head>
<title>4:20PM Countdown</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
<link rel="stylesheet" href="http://treesmoke.com/cd/assets/css/styles.css" />
<link rel="stylesheet" href="http://treesmoke.com/cd/assets/countdown/jquery.countdown.css" />
</head>
<body>
<p id="note">asdf</p>
<!-- JavaScript includes -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://treesmoke.com/cd/assets/countdown/jquery.countdown.js"></script>
<script type="text/javascript" src="http://treesmoke.com/cd/assets/js/script.js"></script>
</body>
</html>
Here’s the popup.html page, showing that the script works.
Thanks guys, it isn’t that big of a deal if I can’t get it to work. I was just bored and decided to learn a little.
Edit: The main problem with my page was that I tried to load javascript and css from the internet when I had to do it locally. Now it works.
You should read this SO article that explains the external js loading in extensions.
It should fix your problem.