Crossrider - How to trigger events on user's activities in a page?

Question

I am new to Crossrider and I want be able to trigger events based on the user's interaction with the page.

For example, have a sound played when user hovers over an html input element:

extension.js

appAPI.ready(function() {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav') 
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

The code above does not work. Does anyone know what is the proper way to do this?

I've also tried to put it in background.js - that does not work either. I am using Chrome as my browser.

The idea is to have the user select an event in a popup (for example, play Alarm01 on hover over an input element) and then have it immediately applied to the current web page. So that the next time the user hovers over an input element Alarm01 is played.

What is the proper way to access HTML page elements in a Crossrider extension?

Thank you!

EDIT: Follow up question

Is it possible to trigger events on user's interaction with JQuery Mobile elements ? For example an element of data-role="slider":

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('[data-role=slider]').on('change', function(){
        Alarm01.play();
    })

});

Thank you!!!!

EDIT: If I include JQuery Mobile in extension.js I get double of every element on a the mobile website. So instead of getting one element of data-role="slider", I get two...

I get this: as opposed to this:

Answer 1

You're almost there. As your code stands you created the audio object in the extension scope. However, to play the audio you must add it to the page scope (HTML DOM). Hence, simply add it to the body of the page and it works, something like:

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

[ Disclosure : I am a Crossrider employee]