Adding Jquery and Other JS libraries to Firefox Extension

Question

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?

Noitidart · Accepted Answer · 2014-03-03 03:43:23Z

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.

answered Mar 3, 2014 at 3:43

Noitidart

37.6k41 gold badges182 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Noitidart · Accepted Answer · 2014-03-01 09:22:58Z

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

answered Mar 1, 2014 at 9:22

Noitidart

37.6k41 gold badges182 silver badges365 bronze badges

17 Comments

prateekkathal Over a year ago

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 Over a year ago

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 Over a year ago

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?

Noitidart Over a year ago

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

prateekkathal Over a year ago

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.

|

Collectives™ on Stack Overflow

Adding Jquery and Other JS libraries to Firefox Extension

2 Answers 2

Comments

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related