Chrome Extension Chaing Content From the Javascript

0
votes

So, I am trying to do a basic Google Chrome Hello World kind of extension. Can someone explain me why the below code doesn't work? Thanks.

popup.js:

document.getElementById("foobar").innerHTML = "Hello Chrome Extensions";

popup.html:

<!doctype html>
<html>
  <head>
    <title>Hello Chrome</title>
    <script src="popup.js"></script>
    <div id="foobar"></div>
  </head>
  <body>
  </body>
</html>

I am following the "framework" of http://developer.chrome.com/extensions/getstarted.html.

1
google-chrome-extension
Swap the order of the lines <script .. > and <div ..> OR wrap the code in popup.js in document.addEventListener('DOMContentLoaded', function () { ...code here... });. - Rob W
Thanks! What a silly mistake. Consider adding it as an answer so that it can be accepted. - nunos

1 Answers

1
votes

It can be solved in two ways:

  1. Swap the order of <script .. > and <div ..>.

  2. Wrap the code in popup.js in a domready event:

    document.addEventListener('DOMContentLoaded', function() {
    // Code here...
});

Your code failed because the <div> was unknown at the time of executing the script.