Can i use addon code in jquery content script file (Firefox addon sdk)? if yes how?

Question

I recently started learning addon-sdk plugin development and now stucked in a problem. In this plugin i have used togglebutton and panel for now. In panel i have loaded an html file that is "myform.html". When i fill the form i.e loaded in panel and click the submit button, with this, an ajax request sends the post data to the server and response returns. The ajax code is in a jquery file named "script.js". Now, After receiving the response i want to access current tab page components (eg. form, input type text etc.). when i use chrome objects like self, panel etc in ajax success function, it gives me errors. I searched alot to get rid of this error but nothing found useful for me. So tell me if i am going in a wrong direction or i am missing something in it.

i am doing something like this (script.js):

$(document).ready(function(e) {
     $('#form').on('submit',function(login){
           $.ajax({
                .....
                .....
                success:function(result){
                     self.port.emit(...);
                }
           });
     });
});

Answer 1

You can specify one or more content scripts to load into a panel using the contentScript or contentScriptFile options to the Panel() constructor.

You should ensure jQuery is included with your content scripts.

var self = require("sdk/self");

var panel = require("sdk/panel").Panel({
  contentURL: "https://en.wikipedia.org/w/index.php?title=Jetpack&useformat=mobile",
  contentScriptFile: [
    self.data.url("jquery.js"),
    self.data.url("script.js"),
  ]
  contentScriptWhen: 'ready',

});

panel.port.on('ajaxComplete', function (){
  console.log('completed!');
});

panel.show();

In your script.js you will not need to listen for the ready event as the contentScriptWhen ready.

 // script.js
 $('#form').on('submit',function(login){
       $.ajax({
            ...
            ...
            success:function(result){
                 self.port.emit('ajaxComplete');
            }
       });
 });

Best of luck with your project