Crossrider - 如何觸發頁面中用戶活動的事件？

Question

我是Crossrider的新手，我希望能夠基於用戶與頁面的交互觸發事件。

例如，具有當用戶懸停在一個HTML輸入元件的聲音播放：

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(); 
    }) 
}); 

上面的代碼不工作。有誰知道什麼是正確的方法來做到這一點？

我也試過把它放在background.js中 - 那也行不通。我使用Chrome作爲我的瀏覽器。

這個想法是讓用戶在彈出窗口中選擇一個事件（例如，將鼠標懸停在一個輸入元素上來播放Alarm01），然後立即將其應用於當前網頁。以便下次用戶將鼠標懸停在輸入元素上時播放Alarm01。

在Crossrider擴展中訪問HTML頁面元素的正確方法是什麼？

謝謝！

編輯：跟進問題

是否有可能觸發與jQuery Mobile的元素在用戶的交互事件？例如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(); 
    }) 

}）;

謝謝!!!!

編輯： 如果我包括jQuery Mobile的在extension.js我得到雙倍的每一個元素上的移動網站。因此，而不是讓數據角色=「滑蓋」的一個組成部分，我得到兩個...

我得到這個： 與此相反：

Answer 1

你幾乎沒有。隨着代碼的立場，您在擴展範圍內創建了音頻對象。但是，要播放音頻，您必須將其添加到頁面範圍（HTML DOM）。因此，簡單地把它添加到頁面的身體和它的作品，像：

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(); 
    }) 
}); 

[披露：我是一個Crossrider員工]