Question

I am developing a Firefox addon using the Addon Builder. I use JQuery UI in my addon panel, and also would like to use it from the content script tied to the panel. In the panel page everything works fine. In the content script, JQuery seems to work, but I see no effect of JQuery UI calls, such as the slider case below.

Here is part of my main.js that defines the panel:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panel.js")
        ]
});

and here’s the call that triggers the custom event:

panel.port.emit("loadingDataEvent", t );

In panel.js, the following part tries to use JQuery and JQuery UI. The JQuery call is completed sucessfully, however the JQuery UI call that tries to update the slider object does not have any effect on anything:

self.port.on("loadingDataEvent", function (t) {
    $("#load-counter").html("<br />Not enough data yet. Approx. " + t + " secs. to go...");
    $( "#progressbar" ).progressbar( "option", "value", (60-t)/60*100 );
    document.defaultView.postMessage('{}', '*');
});

In my panel.html I can use both JQuery and JQueryUI without any problems by including them the conventional way:

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
 ...
<script>
  $(function() {
    $( "#tabs" ).tabs();
    ....
  });
</script>

Any ideas on where I could be doing a mistake?

Answer 1

It took me much shorter than I expected to find the answer. My mistake was to use JQuery inside of script tags in the html file, such as declaring a slider, so these objects were not accessible to the content script. Separating all scripts to a different file and adding it to the list of script files that the content script will use, solved the problem:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panelpage.js"), // <------ this is the new file
        data.url("panel.js")
        ]
});

EDIT:

Some time after I wrote this, I also found out the following: Once the data.url(“panelpage.js”) is passed into the contentScriptFile, the corresponding reference to the script file needs to be deleted from the HTML file that includes it between script tags, otherwise that seems to cause some conflicts.