Archive for the ‘Chrome Extension’ Category

As a tutor and coding help forum poster, I notice many instances of people using OOP, but using it incorrectly. Now, i don’t necessarily mean that they have errors in their code, or that it isn’t logically correct, but rather that the programmer in question has problems with their concepts of OOP. In this post I’ll be discussing the very basic and common problems I see, and ways to think about OOP such that these mistakes can be avoided. I’ll only be going over two of the simplest OOP concepts, encapsulation and inheritance.

Object Oriented Programming: The Why?

Many people simply use Object Oriented Programming because its the “latest and greatest” paradigm in the computer science field. The problem is that they learn the syntax and semantics of OOP, but never truely learn what OOP is. Let me start by giving a basic explanation of what OOP brings to the table as far as programming is concerned.

First, the basic concept of OOP is instead of programming procedurally, or functionally, you program in such a way that your entire program consists of discrete, separate objects that interact with each other in certain ways. This concept is fairly easy to understand, but doesn’t quite explain how to implement such a program that takes advantage of all OOP has to offer. However, lets take a simple example to further illustrate this concept. Lets say we are writing a program to model driving a car. Each car is a separate object of course, but these objects are instances of the same class (in the case, a car), but have different properties. Some are fast, some are strong, and some have great gas mileage. Each car, consequently, is composed of many other discrete objects. Like the rear view mirror, or the engine (which in turn could be composed of other objects) and the tires (and of course these each have their own attributes). Then there is the driver of the car which is another object that interacts directly with the car. The Driver tells the car to drive, and the car in turn tells the engine to turn on, and tells the wheels to spin. The Driver doesn’t ever interact with the individual components of a car, but rather the car itself. The car interacts with each individual components. In (very PHP-like) pseudo code, this interaction might look something like

$Honda_Accord =  new Car();
$Honda_Accord->addEngine(new Engine());
//add rest of components
$bob = new Driver();

//inside the drive method,


This is probably the most widely known but often misunderstood concepts that OOP brings to the table. The basic concept is that of data hiding. Each discrete object in your program has data inside of it, that it hides from the rest of the program. If we consider the example above, each car would have certain properties (like speed, gas mileage, etc.). These properties would only be changed or acted with by the car. The rest of the program cannot (and should not) have access to any of these properties. For example, the driver tells the car to start, but the car is the one that sends the signals to the tires to move. The driver doesn’t (and can’t) interact with each individual wheel.

Encapsulation is often widely misused though. I see misuse in many forms, but the most common are as follows. The programmer may completely forgo encapsulation (For example, he makes all data members public). The programmer also may take it too far (he makes every single data member private, even those that conceptual shouldn’t be). I also see many people doing a very curious thing. They make all (or most) of the classes data members private, but create mutators and accessors for all of them, essentially making them public, but writing a lot more code to do so. For example

class A {
private $some_int;
private $some_string;

public function get_some_int(){ return $this->some_int; }

public function set_some_int($i){ $this->some_int = $i; }

public function get_some_string(){ return $this->some_string; }

public function set_some_string($s){ $this-> some_string = $s; }


Now, trying to explain how to correctly use encapsulation is almost impossible, since it can be applied in so many ways. However, I often try to tell my students the following, which has mixed, but predominantly positives results: When deciding what data members to make public, which to make private, and which to make accessors or mutators for, consider the following. If we consider a data member, say int x, how is it going to be used? Is it only ever going to be accessed and modified inside the class. If so make it private. If it will be accessed outside of the class, but you only want to be able to change it inside, then make it a private variable with an accessor (like GetX()). If you are going to be accessing and changing it outside of the class without any restrictions (IE a programmer using this class can set the value of x to any reasonable value) Then make it public. If you want to make it so that the data member can be set and retrieved outside the class, but setting the variable has restrictions (Like x cannot be over 10 or below 0) then make the variable private, and use an accessor and mutator.

Lets take an example. Lets say we are creating a Person class. The name of the person would obviously be private (since no one can change someone’s name but the person) but with an accessor (people can still ask for their name). The amount of cash someone has would again be private, but would have an accessor (someone can ask how much money they have) and a restricted mutator (someone can’t just set the amount of money they have, but a store keeper can ask for a certain amount, or give a certain amount back as change.) The class could look something like:

class Person {
private $name;
private $cash;

public function getName(){ return $this->name; }

public function getCash(){ return $this->cash; }

public function giveChange($c){ $this->cash += $c; }//function to return change back to user

public function pay($price) { $this->cash -= $price; }//function to pay for something

Inheritance is one of the most commonly misused concepts I see. Sometimes even more than encapsulation (since its a bit easier to understand the implications of it in a conceptual sense, so its much easier to correct past mistakes). However, inheritance is slightly more complex than encapsulation. The basic concept is rather easy to understand. Inheritance in OOP models inheritance in real life fairly closely. You have a Base or Parent object, and you have a Derived or Child object that inherits from it. The child has all the properties that a parent has, and more.

The main problem I see many students and novice programmers trip up on is having children inherit from parents for no apparent reason. For example (and this is a real example) one of my students had a lab recitation to model a car (much like the example above, but much simpler). Cars were composed of Engines, and Wheels and had some basic attributes (like model name and number). This student decided to have the engines and wheels inherit from the car because they were part of the class, and he took this to mean that they had to inherit from cars. This shows two things. One, laziness, and two, a complete misunderstanding of the concept of inheritance.

When deciding on using inheritance, take the following into consideration:

Say we have a system where we have a few different classes. Lets say that these classes all have some sort of similarities. If they do, then I would take these similarities (generally in the form of the same attributes, or the same methods) , move them into a base class, and have my other classes derive from them. Inheritance can be used to avoid having to repeat code. However, inheritance is unnecessary or irrelevant if we have two classes that are quite different from each other, even if they seem to have some similarities. For example, if we are creating a GUI system, we may have a bunch of different shapes. Each shape would have some similar methods and attributes (Like the name of the shape, and a method for drawing the shape). Each shape should derive from some Base shape class. Another example would be a system where we have musicians and a music store. Each musician and each store would have a store of instruments (for example, a musician may have a guitar and drums, and a store may have a whole selection of guitars, basses, drums, etc.) Musicians and stores would also each have names, and other things. However, it really wouldn't make sense for either musicians to inherit from stores, or stores from musicians since each has unique data members that the other doesn't have.

Taking the shapes example, the code may look something like

class Shape { //base shape class
protected $name= "abstract shape";//protected so derived class can access of course

public function draw(){ ... }


class Triangle extends Shape {//triangle class that inherits from shape class

private $height;
private $base;

function _construct(){ $this->name = "triangle"; } //constructor to set name of this class to triangle



If you have any questions, comments or feedback, please let me know in the comments!

public function draw() { ... draw the triangle ... }

This will be the first of many “Plans for Version x.x.x” post. In this posting I will detail what my plans are for the next version.

Bug Fixes:

  • Image expansion is still being finicky. Sometimes images that are too big pop out into a new div popup window, and sometimes they try to expand, and will only pop out into the div when you un-expand the image and re-expand it.
  • Item and Champion names seemed to have stopped working inexplicably. This will be an easy fix but must be done.

New Features:

  • Add more boards to the drop down menu.
  • Better post preview than is currently implemented
If you have any ideas for new features, or have any bugs you would Like to report, please leave a comment or email me at Thank you for reading!

In this post I am going to discuss how I went about making the League of Legends extension, and what goes into making a Chrome extension in general. For an introductory tutorial on making a Chrome extension, click here.

Skills Used: For the creation of the extension, I used Javascript, and HTML. The bulk of the extension is Javascript.For the Javascript, I use Jquery, because it makes development a lot quicker and easier, and allowed me to add quite robust features without doing a lot of work, debugging, or coding.

Basics of a Chrome Extension: Everyone Google Chrome extension is different, but what they all have in common is one file required by Google Chrome called manifest.json. JSON stands for Javascript Object Notation, and is basically the standardized notation that Javascript uses when creating object.

The next file(s) common to most extensions are content scripts. These are Javascript files that run in the background of the webpage that your extension works on. For the League of Legends Forum Extension, there are a few content scripts that run in the background. The main script loads all the features, while the others are support scripts. For example, There are two files that contain the Javascript array that holds all the item and champion names with links to their respective wiki pages. There is also the Jquery library file, and a file that has the code that creates the quick navigation bar.

Icons… Icons Everywhere: Most Chrome extensions have an Icon associated with them, and mine is no different. My extension actually has two icon files. One icon is the icon for the extension that you can see on its Chrome Store page. The second icon is the icon that you can see on your chrome extension page (which can be reached by clicking on the wrench in the upper right corner of your browser, and going to Tools > Extensions/

Feature Explanation: In this section, I am going to go into detail about how I went about developing the various features of the extension. This section is going to be heavy in programming terminology, so if you don’t  know much about Computer Science or Programming, feel free to skip this section, as it probably won’t make much sense.

  • Quick Navigation Bar:
    • This simply consists of a string variable that contains the HTML that makes up the quick navigation bar. I use Jquery to add this actual object to the page body. I set it up so that it starts with an opacity of .2 (or 20%). I created a hover event that, when fired, increases the opacity to 100%. Obviously, the quick navigation bar only appears if the option is enabled. It is enabled by default.
  • Image Expansion:
    • This one took a bit of doing. I start off by using Jquery to select all the links that surround the image attachment thumbnails, and disabling them. I them select all the images, and give them an OnClick event. When this event fires, I change the source of the image to the actual big version of the image. I do this by simply taking the source of the thumbnail, and removing the part of the source that says “thumb=1”. The way that attachments in the forums work is they are served to the user by a PHP page that sends the MIME type as an image. After I change the source, I set the display style to none, which will hide the image. I do this so that I can check the width of the image first, and if it isn’t too big, I fade it in. If it is too big, then I create a new div with the image inside, and add it to the page body via Jquery. I set the position as absolute, and use the mouse’s X and Y coordinates (retrieved via Jquery) as the left and top position respectively.
  • Red Post Preview
    • This is probably my favorite feature. When the page loads, I select all the red post icons, and get the URL that they each link too. I then use an AJAX (If you don’t know what this is, read about it here) request to get the content of the page, and use Jquery to parse the page content and get just the content of the red post. Using this content, I create a hidden div which I append to the bottom of the page. I then add a hover event to the red post icons that, when fired, creates a new div positioned at the mouse X and Y position and fades it in. When your mouse leaves the red post icon and div fades out. However, it won’t fade out if your mouse stays hovered over the actual div with the red post content. I did this so that longer posts can be viewed if you need to scroll your window down.
  • Youtube Link Conversion:
    • This was actually the second feature I implemented. I used Jquery to select all the links to a Youtube video. I did this by selecting all links with the string “” anywhere in the href attribute. I then used the href attribute to construct an embed tag that pointed to the specific video. Using Jquery I also selected all the text inside the post content div which contained the string “” and used that text to create an embed tag much in the same way I used it with links. Theoretically, because I do this, someone could write the text “” with some nonsense after it, and it will attempt to embed a video that doesn’t exist.
  • Champion and Item name Conversion:
    • This was the first feature I implemented in the extension, and the first version (1.0.0) basically consisted of this functionality. I used Jquery (surprise, surprise) to select all the div tags with an id attribute that starts with the string “post_message”. I then took that text, and did a regular expression replace that with a pattern that matches a specific item or champion name (as long as its not part of a link) and replaces it with a link to that specific champion or items wiki page. I keep an array with the item and champion names and links in two separate files. The array uses the champion/item names as keys, and the links to the wiki pages as values. I generate these arrays with a PHP script that spiders the League of Legends webpage for all the champion and item names. The unfortunate thing about this process is Riot doesn’t update their information database very often, so when new champions or items are released, sometimes I have to enter the key/value pairs by hand. For certain champions/items with single quotes in their names (like Cho’Gath or Kog’Maw) I have multiple entries in the array to match not only the champion with a quote is his name, but his name without a quote, or with a space instead of a quote. For example, Cho’Gath has three entries. Cho’Gath, ChoGath, and Cho Gath. The pattern matching is also case insensitive, so CHO’gath would also be matched, as well as many others.
  • Left/Right arrow Keybindings:
    • This feature was suggested by ItzWartzy. I simply binded the left and right key press event to the body tag using Jquery. When this event fires, I select the Next/Previous link’s href attribute (by selecting all links with a rel attribute equal to next/previous) using Jquery, and change the window.location variable to this href attribute. I make sure to check that the link actually exists (IE your on the last page for left arrow, or first page for right arrow), and if it doesn’t, nothing happens.
  • Thread Number of Pages:
    • This feature was quite simple. I simply select all the links with the anchor text containing “Last Page” using Jquery, and parse the page number out of the href attribute. I then append text with “X pages” (X being the number of the last page) after the selected link.
  • Options Page:
    • This is an ever changing feature, since when I add new features, I must add them to the options page, and make sure the options work. The problem that I ran into with this feature was that content scripts in a Chrome extension run independent of the rest of the extension. Its basically like the content script is part of the actual web page, rather than the extension. Because of this, content scripts can’t access any other part of the extension, unless you send a request from the content script to the extension. You can read more about this process (known as message passing) here. The information I needed to retrieve was the localStorage array, which is a cookie-like array that browsers can use to store information about a website locally on the clients computer.
    • On the options page, whenever an option is selected/deselected, the entry is entered/altered in the localStorage array. When the options page is first loaded, I check/uncheck certain selections based on what is in the localStorage array. If the localStorage array is empty (IE when first installing the extension), all the options are checked by default, and those values are entered into the array. The structure of the array is the id attribute of each check box is the array keys, and the values are true/false if the option is checked/unchecked. If a user never opens the options page, the localStorage array will be empty. Because of this, when I check the options when executing the code for the various features, the if statement consists of two boolean statements OR’ed together. The feature will be loaded if the various option are true (IE they are checked) or if the localStorage array that was retrieved using message passing (link above) is undefined. I do this because by default, all options are enabled. As I continue to add features certain features may be disabled by default, so obviously I would have to change the conditional.
  • Miscellaneous Information:
    • I use the latest version of Jquery, which is version 1.6.1, minified.
    • The Message passing request is a one time request (sendRequest method of the chrome.extension object) to the background.html page. This page consists of a single javascript tag, where I add a listener to the onRequest port. In this listener, I send a response consisting of the localStorage array.
    • My version system is arbitrary and doesn’t really mean anything. However, I use single digits between each period. IE there will never be a version 1.3.11
    • The features are all executed when the document.ready() event is fired.
    • All the features are executed on a single javascript page. Board and Thread features are seperated by an if statement that checks the URL of the current page your on.

 If anyone has any questions or comments on how I am doing things, Please don’t hesistate to leave a comment, or email me at Thanks to everyone for your support. Hope you enjoy the extension.

Hello everyone. This post is going to go into detail about the League of Legends Forum Extension. This extension is for Google Chrome. I do plan on making ports of this extension to Firefox and Opera, but currently Chrome is the only browser this extension supports.

 Feature List:

  • Quick Navigation bar:
    • This is a drop down menu that sits in the top left corner of the page. It allows you to quickly navigate to various other boards from whatever board you are currently looking at. It is there on every page of the League of Legends website. The boards it has are as follows:
      • New Player Forums
      • Announcements
      • General Discussion
      • Guides and Strategy
      • Server Status
      • Clan & Team Recruitment
      • Help & Support
      • Champion Guides
      • Lore Discussion
  • Image Expansion:
    • This changes all image attachments in threads so that when you click an image, instead of opening up in a new tab, it expands on the page. This feature is very useful for threads that have a lot of images (like art threads, or comic threads). Images to are too wide (IE they get cut off by the left side of the post box) create a popup box with the image inside. This popup box also has a link that will allow you to open up the image in a new tab.
  • Red Post Preview:
    • When a Riot Staff member posts in a thread, an icon is shown next to the link to the thread. This feature changes that icon so that when you hover over the icon, a small popup window fades in with the content of the red post. This box has a link which will take you to the actual post, and you can click the actual icon to take you to the post (which is the standard functionality that the forums have)
  • Youtube link conversion:
    • This converts Youtube links to the actual embedded video so instead of clicking the link to go to the Youtube page, the video itself appears in the post.
  • Champion and Item name conversion:
  • Left and Right arrow Key Binding:
    • This feature makes it so that when you click the left/right arrow key, you go the the previous/next page respectively of the board/thread you are currently viewing
  • Thread number of Pages:
    • When a thread has more than 3 pages, the forums creates a last page link. This feature shows how many pages the thread has when it has more than 3 pages.
  • Options Page
    • There is an options page that comes with the extension. This lets you enable/disable an feature you like, so you can customize the extension to your own personal needs

Updates: This list will contain the last few updates that the extension has. For the full list of updates since the creation of the extension, go to the Extension page in the Chrome store

  • Current Version: 1.3.4
  • Next Stable Release: 1.4.0
  • Fixed a bug with thread features where they weren’t being loaded with a page refresh
  • fixed a bug with image expansion where images that were too big weren’t creating a popup box
  • Fixed several bugs with the options page and Red Post Previews
  • Changed Red Post Preview to show when you hover over the icon, rather than when you click it

Ports to other Browsers: I currently plan on porting this extension to Firefox and Opera. There is no ETA at the moment, because I have to figure out some issues with the Opera extension, and figure out how Firefox extensions work. If anyone has experience making either Opera or Firefox extensions, please leave a comments, or email me at

Thank you to everyone who has offered suggestions/critiques for this extension, or has reported bugs. Special thanks to Itzwartzy and Killsteel, who have posted quite a few bugs and suggestions.

If anyone has any comments/suggestions/critiques/Desired Features, please leave a comment or email me at Also, feel free to add me in game. My Summoner name is BlakMike. I also have a smurf, whose name is MiguelDelNegro. Note: I will be updating this post whenever new updates are added

Hello everyone! I am Mike, also known as Black Mike by friends (and BlakMike in League of Legends). I am a Computer Science major at NYU-Poly, and I created this blog so I could post about my projects that I am involved in. Currently, my main project is the League of Legends Forum Extension, so most of my posts will be about that. It is a Google Chrome extension that adds extra functionality to the League of Legends forums. It adds some awesome features to the forums, including image expansion, Youtube link embedding, and many others. The next post I make will contain all the information about the extension, including the feature list, and a description about what it does, and how to make use of the features.

Anyone who has any ideas for new features for the extension, or projects that you would like to see done, but don’t have the skills to complete them can feel free to request them! Thanks to everyone who gives ideas/comments/critiques/suggestions to the various projects I do.

I play quite a few games, but I currently am playing League of Legends mostly (this is the main reason I decided to create an extension for the forums.) I play a lot of different characters, but my favorites are Kayle, Miss Fortune, Kassadin, Leblanc, Amumu, and Tristana. I also play Malphite, Mordekaiser, Lux, Caitlyn, and Warwick quite often. If you would like to play a few games with me, or simply chat, add me in game. My summoner name is BlakMike. I also have a smurf named MiguelDelNegro (but I don’t play on this account much.)

I will also be posting about other various things related to technology, gaming, and any other miscellaneous subjects that interest me. So stay tuned! If you aren’t a programmer or Computer Science major/hobbyist, but are interested in technology, video games, or other random crap, you may enjoy reading what I have to write! So please stay a while, post some comments, and I hope you enjoy Blacks Corner!

I hope everyone enjoys the projects I am working on! If you would like to contact me about my projects, please feel free to leave a comment, or email me at