Loading

This is my first entry in the Development category of the blog. At Santa Susana, the Computer Science teacher is Darius Clarke. The students, me included, are not necessarily fond of him. He is not a very good teacher, and definitely not the most respectable "man" I know. One thing we do in his class to annoy him is play sounds from a soundboard. The issue with that, is that the school district keeps track of our browsing history. A friend of mine came up with the idea to make a Chrome extension, because those are not kept in the history. He built one, and it works, but it's not the prettiest thing, and adding sounds seems complicated. I decided to learn how to do it, and it is actually surprisingly simple. You only need to know basic HTML to build one, as well as knowing how the manifest.json works. It's pretty easy. Here is an example manifest.json.

{
  "manifest_version": 2,

  "name": "Extension Name",
  "description": "Extension Description",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

Simple right? And everything else is like making a simple website. One problem is that chrome extensions don't allow event handlers. You have to programatically add an event litener. Here's how you add a click listener to an element.

document.addEventListener('DOMContentLoaded', function() {

    document.getElementById('id').addEventListener('click', function() {
      //code goes here
    });

});

 Also pretty simple. My extension works almost completely automatically when it comes to adding a sound. First I add a link to the board itself.

<a class="list-group-item" id="soundFileName">Sound Title</a>

Then I add the sound to an object in the js file.

var audio = {
  "soundFileName": new Audio("sounds/soundFileName.mp3"),
};

It is important that the id of the link and the object property name matches the file name. Next I created some wrapper methods to play, stop and add a listener.

function playSound(prop) {
  stopSound(prop);
  audio[prop].play();
}

function addSound(prop) {
  document.getElementById(prop).addEventListener('click', function() {
    playSound(prop);
  });
}

function stopSound(prop) {
  audio[prop].pause();
  audio[prop].load();
}

From there, in the function to add listeners, all I have to really do is make a for-each loop that adds an event listener for all the sounds in the object.

for(var prop in audio) {
 addSound(prop);
}

I use to have to add each listener individually, but then that is why I added the wrapper function. The extension is currently on it's second release and I am very excited for people in my class to start using it.

-José Rodriguez-Rivas