Posts Tagged ‘League of Legends Forum Extension’

Unfortunately, due to many different reasons, the main ones being that i’ve become very busy as of late, I am discontinuing support for the League of Legends Forum Extension for the time being. Very sorry to anyone who was using the extension, but based on the feedback, (or rather the lack thereof) it seems that no one is using it, so I have decided to not waste my time. If anyone has any reasons for why this should not be, don’t hesitate to let me know

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 “youtube.com/watch” 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 “youtube.com/watch” 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 “youtube.com/watch” 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 Mikesta707@yahoo.com. 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 Mikesta707@yahoo.com

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 Mikesta707@yahoo.com. 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 Mikesta707@yahoo.com