Firefox add-on declaring functions and use in content script

Question

i am trying to write my first firefox add-on. the main problem seem s to be that i am also new to javascript. at the moment i have:

require('sdk/page-mod').PageMod({
    include: ["*"],
    contentScript: 'window.addEventListener("click", function(e) { alert("blub"); }, false);',
    attachTo: ["existing", "top"]
});

(thx to the answer here.) now i want to use a declared function instead of an anonymous one, but i cant get it to work:

require('sdk/page-mod').PageMod({
    include: ["*"],
    contentScript: 'window.addEventListener("click", function(e) { alert("blub"); }, false);',
    attachTo: ["existing", "top"]
});

getImgData function (e) {
    alert("blubber3");
}

the first problem is i get syntax error by just adding the function "missing ; before statement". But cfx doesn't tell me the wrong line. (Is there any useful tool for js editing with good syntax check/ content assist?) So how to declare a function and use ist somewhere else in the script. At the end the function needs to get the target of click and parse it. (i read the tutorials but thy all use anonymous functions :-P)

thx in advance

Answer 1

It's important to realize the separation between chrome scripts and content scripts. Chrome scripts are those that run with the same security privileges as Firefox - they have full access to Firefox and your computer. Content scripts are those that run with the same privileges as web pages. They can mess around with that web page, but are severely restricted otherwise. To maintain security, the way these two types of scripts can communicate is limited. You wouldn't want a web page to be able to call any function it wants in your extension's internal code!

Your main JS file (the one that includes require('sdk/page-mod')) is a chrome script. What you're injecting (contentScript) is (obviously) a content script. They can't communicate through a direct function call as you're doing.

If your getImgData function is something that can be done with normal web page privileges, you can move your definition of it to within the content script. If it requires additional privileges, you must have your content script communicate with your chrome script via the emit and on functions as described in the link above.

If you are going to make your content script any longer, I would recommend you separate it into its own file to make your life easier.