CODEWITHSUNDEEP
javascriptjqueryfirefoxfirefox-addonfirefox-addon-sdk
Sunil Kumar
Sunil Kumar

Reputation: 632

Create new function in contentScriptFile in Firefox extension

I'm developing a firefox extension in which I've these functions in contentScriptFile of myPanel:

...
function myFun(param){
    console.log("myFun with "+param)
}

self.port.on('myTrigger',function(value){
    $("#myFavDiv").append("<a onclick='myFun(\'"+value+"\')'> click me!</a>")
});
...

I'm including script file like (in main.js):

myPanel = panel.Panel({
  width: 400,
  height: 200,
  contentURL: self.data.url("panel.html"),
  contentScriptFile: [self.data.url("jquery-1.10.2.min.js") , self.data.url("mScript.js")]
});

Everything is working fine, just the problem is onclick method which is with dynamically added anchor tag in div#myFavDiv

Error thrown when I click anchor:

Timestamp: 8/10/2013 1:24:48 AM
Error: ReferenceError: myFun is not defined

I tried to write this myFun function in main.js still same error is there.

Any idea(s)/solution(s)?

Upvotes: 1

Views: 472

Answers (1)

jsantell
jsantell

Reputation: 1268

I think the content script is being sandboxed from the HTML, so when the anchor is injected into the HTML, it doesn't know what myFun is. Within your content script, you can just bind the handler there, keeping it within the same environment.

self.port.on('myTrigger',function(value){
    $("#myFavDiv").append("<a onclick='myFun(\'"+value+"\')'> click me!</a>")
    $("#myFaDiv a").click(myFun);
});

Upvotes: 2

Related Questions