Chrome Extension Development: Options Page Does Not Load Javascript

February 5th at 12:00am

Today I spent way too much time trying to debug an issue encountered while developing a Chrome extension. While attempting to create an Options page, I setup a separate 'options.js' file (to comply with security requirements that don't permit inline-JS) and found that the .js file would not load and that there were no error messages listed in the chrome developer tools view.


References


Symptoms

When creating an Options view for a chrome browser extension you notice:

  • The HTML for the web UI may not load (when your JS is referenced in the HEAD section of the view)
  • JavaScript events don't work in your UI
  • Loading the Chrome debugger tools show that the .js file is not being loaded
  • When you inspect your extension's options page you see something like this where the script contents should be:

    <script src="options.js" <="" script="">
    </body>
    </html>
    </script>


Solution

The issue was subtle and did readily show up as a syntax error using the Atom text editor. I was adding the options script like this: 

    <script src="options.js"</script>


When I needed to do this: 

    <script src="options.js"></script>

The issue came down to a missing > symbol: This causes the browser to not interpret the script as a script inclusion. Because of this bad syntax, when scripts are loaded in the head area of the page, the body fails to load. The body ends up looking like this in the chrome inspector (notice the empty body tag at the end): 

<html>
<head>
    <title>My Test Extension Options</title>
    <script src="options.js" <="" script="">
  </head>

  <body>
    <h1>Enter Scripts</h1>
    <input rows="25" cols="100" style="width:400px;height:400px" type="textarea" id="scriptArea">
    <input id="saveBtn" type="button" value="Save">

  </body>
  </html>
  </script>
</head>
<body></body>
</html>


Conclusion

The primary take-away for me is to make sure I check both the HTML as well as the JavaScript Syntax if I run into weird behavior when developing chrome extensions in the future. Doing a simple HTML check would have saved me a few hours of hassle.