1<!doctype html> 2<html> 3<head> 4<style> 5body { 6 font-family: sans-serif; 7} 8#attributions { 9 margin-top: 20px; 10 color: #666666; 11 Xfont-size: 10px; 12} 13.sound { 14 cursor: pointer; 15} 16</style> 17<script> 18 19function playSound(id) { 20 console.log(id); 21 chrome.extension.getBackgroundPage().playSound(id, false); 22} 23 24function stopSound(id) { 25 chrome.extension.getBackgroundPage().stopSound(id); 26} 27 28function soundChanged(event) { 29 var key = event.target.name; 30 var checked = event.target.checked; 31 if (checked) { 32 localStorage.setItem(key, "enabled"); 33 playSound(event.target.name); 34 } else { 35 localStorage.setItem(key, "disabled"); 36 stopSound(event.target.name); 37 } 38} 39 40function showSounds() { 41 var sounds = document.getElementById("sounds"); 42 if (!localStorage.length) { 43 sounds.innerText = ""; 44 return; 45 } 46 sounds.innerText = "Discovered sounds: (uncheck to disable)"; 47 var keys = new Array(); 48 for (var key in localStorage) { 49 keys.push(key); 50 console.log(key); 51 } 52 keys.sort(); 53 for (var index in keys) { 54 var key = keys[index]; 55 var div = document.createElement("div"); 56 var check = document.createElement("input"); 57 check.type = "checkbox" 58 check.name = key; 59 check.checked = localStorage[key] == "enabled"; 60 check.onchange = soundChanged; 61 div.appendChild(check); 62 var text = document.createElement("span"); 63 text.id = key; 64 text.innerText = key; 65 text.className = "sound"; 66 text.onclick = function(event) { playSound(event.target.id); }; 67 div.appendChild(text); 68 sounds.appendChild(div); 69 } 70} 71</script> 72</head> 73<body onload="showSounds()" onFocus="showSounds()"> 74<div id="sounds"></div> 75<div id="attributions"> 76Sounds from: 77<ul> 78<li><a href="http://www.freesound.org">www.freesound.org</a></li> 79<li><a href="http://www.free-samples-n-loops.com/loops.html">www.free-samples-n-loops.com/loops.html</a></li> 80<li>Googlers with microphones.*</li> 81</ul> 82<span style="font-size:10px">* Canadian sound made by actual Canadian.</span> 83</div> 84</body> 85</html> 86