crossrider binding to DOM events

Question

I have just started out looking at crossrider to develop a browser extension. I am impressed with the concept, but it could do with a little more help in the odcumentation and examples.

My specific problem is that I want the extension.js file to be able to recognise and work with specific DOM events on the loaded page i.e. the onblur event

In a normal inline javascript, I would use $(":input").on("blur", function(e){ // do stuff });

but I am completely lost as to how/where I would place this code in the exension.js file. I have tried both within and outside of the appAPI.ready function, but neiher of these seems to trigger anything on the loaded page

I know I could forcibly include a remote JS file containing my code, but that would mean I would lose access to the appAPI functions and I would have to use the messaging API to pass information between the web page and the extension. This approach seems messy

Where am I going wrong in trying to use get the extension to bind to the onblur event on the web page?

Thanks in advance

Answer 1

In general, it's as easy as adding the jQuery code within the appAPI.ready method's callback function in the extension.js file, as you mentioned. I tested your example using the following code on Win7/Chrome:

appAPI.ready(function($) {
  $(":input").on("blur", function(e){ console.log(':input blur'); });
});

If this isn't working for you, I recommend opening a Crossrider support ticket (support@crossrider.com) specifying the extension id and we will be happy to investigate for you.

Disclaimer: I am a Crossrider employee.