1

I'm trying to make an options page for my chrome extension. I've followed this tutorial exactly: https://developer.chrome.com/extensions/options.html

Now it doesn't do anything when pressing the 'save' button. I inspected the code and it returns Uncaught TypeError: Cannot call method 'addEventListener' of null at the line: document.querySelector('#save').addEventListener('click', save_options);

Niek
  • 1,000
  • 2
  • 9
  • 19
  • 3
    Are you sure you've included the ` – apsillers Jun 13 '13 at 16:50
  • Thanks, it works. I'd put the script in its head. – Niek Jun 13 '13 at 17:29
  • Possible duplicate of [Cannot set property InnerHTML of null](http://stackoverflow.com/questions/11163060/cannot-set-property-innerhtml-of-null) -- the situation is slightly different, but the solution is identical. – apsillers Jun 13 '13 at 18:30

1 Answers1

2

I met this problem and thanks for @apsillers's comment by which I have solved my problem.

In the Chrome Extension tutorial, the JavaScript <script> tag is placed in <head>, which results in this TypeError.

Solution

Move the <script> in <head> tag to <body>.

Example:

change

<!doctype html>
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status"></div>
    <img id="image-result" hidden>
  </body>
</html>

to:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="status"></div>
    <img id="image-result" hidden>
    <script src="popup.js"></script>
  </body>
</html>
Xan
  • 74,770
  • 16
  • 179
  • 206