0

How do I include jquery and other scripts in my firefox extension? I know this topic is a copy of many other questions asked on SO, but none of them were so helpful.

I tried using in one of the JS files where i want to use jquery,

Components.utils.import('chrome://myaddon/content/jquery.min.js');

but it gives me an error saying,

ReferenceError: window is not defined

I also tried adding the script in XUL file, but somehow, I cant get it to work as well.

Is there any other way around it?

prateekkathal
  • 3,482
  • 1
  • 20
  • 40

2 Answers2

1

Ok man here's the solution to using Custom Events.

Much thanks to @M.J. Saedy for figuring this one out.

Gist - HERE is a template that will listen to custom events dispatched from non-privileged scope.

Noitidart
  • 35,443
  • 37
  • 154
  • 323
0

You can't import a library to use in your addon. What you gotta do is inject that into the web page you want to use it on.

Is this a bootstrap addon? Did you make a chrome.manifest? Before injecting to websites you have to make the injectable stuff contentaccessible in the manifest.

so an example manifest file:

content myaddon ./ contentaccessible

then your code of Cu.import('chrome://myaddon/content/jquery.min.js') will work

if you want to use this library in an iframe for like a panel. put in that iframe <script src="chrome://myaddon/content/jquery.min.js">

Let me know if you need more help, if you upload it to GitHub I can see what exactly you're doing

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • Its the same sample addon I had given you(if your remember? :P - ToDoist one...). So its not bootstrap. It has chrome.manifest.I am not sure how to solve the ReferrenceError given to me by jquery. cause contents.utils.import does import the query but gives error. any other way around? – prateekkathal Mar 01 '14 at 09:37
  • Ah because you are importing that module into the privelaged scope. In privelaged scope there is no such thing as window. That's why you have to inject jquery into windows you want to use it in, also it has to be an HTMLDocument jQuery doesn't work with XUL. Are you trying to make the jquery work in the iframe? – Noitidart Mar 01 '14 at 09:48
  • No, not the iframe. See, I can get jquery to work in an iframe. but then in that case, I will have to postMessage back to the window. And lets say the iframe is not native. Its some random http link that is supposed to postMessage to browser when a user clicks a button. How should I go about that, coz it gives me an error of `chromeWindow.postMessage is not permitted from http//blahblah.com/` – prateekkathal Mar 01 '14 at 09:52
  • I would say abandon postMessage, is this an option? Add event listener for a custom event, and then have addEventListener to buttons on that http page to dispatchEvent the custom event you are listening for. What do you think? – Noitidart Mar 01 '14 at 09:59
  • 1
    Might be a goodIdea, can you edit the above answer and give me a demo code? What I really want to do is change the icon in the browser when user clicks the button. For eg, lets say I make API call to fetch Notifications, So, there is a notification, the icon changes to something else(lets alerted) and as soon as its read, the icon changes again to the old icon. I have done the changeIcon part. Whats left is communication between the iframe and browser window. So write me a demo code above please? :D – prateekkathal Mar 01 '14 at 10:05
  • Lol hey man check this out [here](https://gist.github.com/Noitidart/9287185) it shows you how to watch for a page load and when it matches it inserts a div. Ill make the next rev show how to add event listener. – Noitidart Mar 01 '14 at 11:11
  • Added rev4 which shows you how to addEventListener. can addEventListener to any element on the page. – Noitidart Mar 01 '14 at 11:18
  • 1
    Ummm,I did understand a few of it. But can you make it a little simple? There are so many other functions involved in this step. Just tell me, if I do `window.dispatchEvent("myCustomEvent");` from the iframe and `addEventListener("myCustomEvent",function () { });` to my overlay.js file. Will it work? – prateekkathal Mar 01 '14 at 11:51
  • 1
    oh i didnt even do that custom event part yet. but yes it will work but like you see in the template i add ```aDOMWindow.gBrowser.addEventListener``` you must do the same thing but ```aDOMWindow.addEventListener('myCustomEvent', doThisFuncInYourAddon, true)```, ill make another template for that one :P – Noitidart Mar 01 '14 at 11:55
  • I'll try it out and let you know :) – prateekkathal Mar 01 '14 at 11:56
  • Ok I also added Rev5 which shows how to add event listener to existing html element and also how to remove it, be sure to read the README at bottom. :) Ill make a custom event one right now. – Noitidart Mar 01 '14 at 12:16
  • ok man i made a demo for [CustomEventListeners](https://gist.github.com/Noitidart/9288991) but I'm actually having a hard time myself. When I create and dispatch the event to content window its not bubbling to gBrowser. – Noitidart Mar 01 '14 at 13:22
  • I see, you'll be the one who'll have to figure it out. M not as good as you at this. :( I can surely wait though :) I'll try it out on my side as well. If its working or not and then tell u – prateekkathal Mar 01 '14 at 13:26
  • Are you sure we can use dispatchEvent for the browser to know we have a new custom event? and it can be used from the extension? – prateekkathal Mar 01 '14 at 13:54
  • 1
    I tried it myself. It told me the same for dispatchEvent(permission not granted type of phrase). It seems, for security reasons, it doesn't allow iframes to interact with the browser unless its native. – prateekkathal Mar 01 '14 at 15:38
  • I'm absolutely sure we can use dispatchEvent, you just write dispatch it to the window of any web page. so you dont have to dispatch it to the chrome window but the html window. its as easy as going ```window.dispatchEvent('blah')``` but im just having a tricky time getting the bubbling to work out, i really want to fix this so hang in there. from extension yes you can dispatchEvent too you can pick any window and dispatch it to there ie: ```Services.wmgetMostRecentWindow('navigator:browser').dispatchEvent('blah')``` – Noitidart Mar 01 '14 at 20:38
  • I actually tried using `parent.dispatchEvent(myEvent);` and it gave me the permission error. I tried using `window.dispatchEvent(myEvent);` and used `window.addEventListener('peekAhBoo',function (e) { alert(e.detail); }, false);` but it didn't work. There was no alert window. Was I correct in doing so? – prateekkathal Mar 01 '14 at 20:48