JavaScript won't load into preferences window

I'm making a Firefox extension and trying to access a separate JavaScript file.

The directories for the files look like this:

├───defaults/
├───content/
│   └───preferences.xul
│   └───preferences.js
└───locale/

Inside of preferences.xul, I include the following line:

<script type="application/javascript" src="preferences.js" />

For some reason, the JavaScript file isn't being loaded even though they're in the same location. I've made some test code that allows input on a textbox and moves that text to a listbox. If I include it in the preferences.xul file in a <script></script> tag, it works fine but once I move it into preferences.js, it stops working.

Are there any things I can do to check what scripts are being loaded or the current directory? Thank you.

preferences.xul

  <script type="application/javascript" src="preferences.js" />

  <script>
    //this function works fine and works like I want it to 
    //but I would like it to work while in preferences.js
    function addItem(){
      var url = document.getElementById('url').value;
      //check user input
      if(url){
        document.getElementById('urlList').appendItem(url, url);
      }
      document.getElementById('url').value = '';
    }
  </script>
  <prefpane id="idlealert-prefpane" label="&prefpane.title;">

    <groupbox id="IdleAlertGroup">
      <caption label="&group.label;"/>

    ...

    <separator class="thin"/>
    
    <row>
      <vbox>  
        <label value="&urlList.new;" />
      </vbox>
      <vbox>
        <textbox id="url" />
      </vbox>
      <vbox>
        <button id="addUrl" 
                label="Add" 
                oncommand="addItem();"
                />
      </vbox>
    </row>

    <separator class="thin"/>

    <row>
      <vbox>  
        <label value="&urlList.label;"/>
      </vbox>

      <listbox  id="urlList"
                seltype="multiple">
      </listbox>
    </row>

    ...

preferences.js

var IdleAlert = {
        addItem: function(){
    var url = document.getElementById('url').value;
    //check user input
    if(url){
      document.getElementById('urlList').appendItem(url, url);
    }
    document.getElementById('url').value = '';
}