Chrome Extensions: Javascript not working

5,526 views
Skip to first unread message

Anacron

unread,
Aug 24, 2012, 10:58:30 PM8/24/12
to chromi...@chromium.org
Hi,

I've created a new Chrome extension and published it for testing. The extension overrides the chrome://newtab page.

So, when a new tab is created, the html page is supposed to call a javascript function on load. But for some reason, the javascript code is not being executed. When I test the HTML page independently outside in chrome, it works. This is my first chrome extension and is very simple.
The HTML snippet (sample.html) is as follows:

<head>
<title>New tab</title>
<script>
function doSomething(){
alert('Hello World!');
}
</script>
</head>
<body onload="javascript: doSomething ();" style="background=color: cyan;">
</body>

The manifest file (manifest.json) looks like this:

{
   "chrome_url_overrides": {
      "newtab": "sample.html"
   },
   "description": "My first extension.",
   "icons": {
      "128": "icon_128.png",
      "32": "icon_32.png",
      "64": "icon_64.png"
   },
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCw87a6DCIVo4jnpZ7Qfwi9uGPppQaGJFn+bHBe+8TEP1ZULfCcMAWhpNwpEfPzGwmd/FthKPF3jBMRNixdsYyGLp2QQqFtsEASuRbQOc6IV6xsRYXvvD2tgyVCcV+Lv5jJ7N3G+4miUo8Mc1Bf3qYnqrFUR2LrQy7fa6ig/vxtWQIDAQAB",
   "manifest_version": 2,
   "name": "Sample New Tab",
   "version": "1.0"
}

The css loads and I can see the background color. And also the title of the page is visible on the Tab bar. The only thing is the javascript code does not get called.

Please let me know if I need to post any more information.

Thanks in Advance.

Joe Marini

unread,
Aug 25, 2012, 1:12:54 AM8/25/12
to Anacron, chromi...@chromium.org

You can't use inline JavaScript in manifest v2 extensions - move the onload inline event handler off of the body tag and put it in an external JS file.

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-apps/-/B6cQZXAc5HkJ.
To post to this group, send email to chromi...@chromium.org.
To unsubscribe from this group, send email to chromium-app...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/?hl=en.

Anacron

unread,
Aug 25, 2012, 6:58:21 PM8/25/12
to chromi...@chromium.org, Anacron
Hi Joe,

Thanks a lot for your input. As per your suggestion, I removed the onload event handler off the body and used the following code:

<html>
<head>
<title>New tab</title>
<script>
$(document).ready(function () {
$("body").css("background-color","lightgreen");
});
</script>
</head>
<body>
</body>
</html>

All I'm trying to do is set the background color when the page loads. I know can use static CSS for this and it works, but I eventually want to be able to do more with JavaScript. Please help me get ahead of this problem.

Thanks,
Ananth

Anacron

unread,
Aug 25, 2012, 11:20:28 PM8/25/12
to chromi...@chromium.org
I hadn't understood your earlier comment properly. I moved all the javascript code to a .js file. Thank you very much for your valuable inputs and your time. This is what I did and it worked. 

sample.html:
<html>
<head>
<title>New tab</title>
<script src="sample.js"></script>
</head>
<body>
</body>
</html>

sample.js:
window.onload=setColor;

function setColor(){
document.body.style.backgroundColor='lightgreen';
}

Joe Marini

unread,
Aug 28, 2012, 3:49:49 PM8/28/12
to Anacron, chromi...@chromium.org
Great!



--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.

To post to this group, send email to chromi...@chromium.org.
To unsubscribe from this group, send email to chromium-app...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/?hl=en.



--
Joe Marini
Developer Advocate / Chrome


Reply all
Reply to author
Forward
0 new messages