Self.port undefined error [on mozilla add-on SDK 1.8]

Question

Following this guide, I made a small change, and I keep getting this error :

self.port undefined in base.js [my content code]

here is my extra code :

PageMod({ include: [data.url('base.html')], contentScriptWhen: 'start', contentScriptFile: [data.url('jquery-1.7.2.min.js'),data.url('jquery-ui-1.8.21.custom.min.js'),data.url('base.js')], contentStyleFile: [data.url('css/mint-choc/jquery-ui-1.8.21.custom.css'),data.url('css/base.css')], onAttach: function(worker) { worker.port.on("request", function(txt) { console.log(txt); worker.port.emit("response","response for "+txt); }); } }); 

and my content code :

 // initialized by jQuery $(function() { self.port.on("response",function(txt){console.log("response "+txt);}) //this line is where the error point to. $('#tabs').tabs(); testLoadLinks(); }); function testReceiveRequest(request) { console.log('received:',request); self.port.emit("request",request); } 

I am using a browser editor with SDK version 1.8, can someone please help me fix this?

Answer 1

After some testing and debugging, I found two errors, and I regret that I did not put all the code because I thought it was not connected:

I had this in base.html

 <link type="text/css" href="css/mint-choc/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <link type="text/css" href="css/base.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" src="js/base.js"></script> 

and this is on main.js

 PageMod({ include: [data.url("base.html")], contentScriptWhen: 'start', contentScriptFile: [data.url('jquery-1.7.2.min.js'),data.url('jquery-ui-1.8.21.custom.min.js'),data.url('base.js')], contentStyleFile: [data.url('css/mint-choc/jquery-ui-1.8.21.custom.css'),data.url('css/base.css')], onAttach: function(worker) { console.log("attaching...") worker.port.on("request", function(txt) { console.log(txt); worker.port.emit("response","response for "+txt); }); } }); 

My scripts are located in the / data / js / folder, they cannot be found, so the pageMod part of the script is not loaded into main.js, but they are loaded by the contents of the script inside the DOM, where self.port is undefined. I just deleted the script and style tags from base.html because they are already in the pageMod module and the path in data.url ('js / base.js') and others has been fixed. Now I learned that scripts in the add-in area can access and modify the DOM, but scripts inside the DOM cannot (can they?) Communicate with the add-in area. If you want scripts to interact with the add-in, you must leave them in the add-in area. I hope to help someone who makes the same mistake. Thanks canuckistani.