FireLink was inspired by a need to organize multiple sets of links for separate college courses. Often times courses would require numerous links to be readily available at any given time. Obviously, this became a problem fast as a separate set of links for each course would require you to keep an unreasonable number of tabs open concurrently. Enter FireLink! A solution to this mess.

What it does

FireLink is a chrome extension that allows users to take any number of links and condense them down to a single, 16 character, alpha-numeric code. This code can then either be bookmarked by the user, under a uniquely assigned name, or shared amongst other FireLink users. After this code is generated/received, it can then be entered into our extension, to reopen the links originally used to generate the code.

How we built it

We created a chrome extension with javascript, css, and html. The chrome extension has multiple views including: a bookmarks page to create nicknames for a users most commonly used FireLinks, a FireLink generation page where users can provide links by typing them in or importing them from the currently active tabs and then click a button to receive a unique identifier that was tied to all those links, and finally a page to enter a FireLink, which will open all condensed links into separate tabs in your active window.

When a user clicks the button to generate a new FireLink, a request is sent to a Java web server, acting as a wrapper around a MySQL database, that will calculate the MD5 hash of all the links that the user is trying to condense, concatenated together. The web server will store the hash and the string of the concatenation of all the links into a table in a MySQL database. After storing the data, the web server will send back a JSON response containing that hash (which we call the FireLink) and the concatenation of the links. From then on, all users will be able to enter that FireLink and receive the original mapping of that FireLink in the MySQL database and open all the links attached to that FireLink in their current chrome window.

The chrome extension uses a small bit of local disk space to create a bookmarks options that allows you store nicknames for your favorite FireLinks and record them in the bookmarks table so that you don't have to worry about writing FireLinks down so that you wont't forget them!

Challenges we ran into

We ran into four major issues during the creation of our chrome extension. The first issue we ran into was an external server issue related to setting up the EC2 instance. The second issue was processing data from a dynamically created input field, with a dynamically created button. The third issue we ran into was creating the local storage within the chrome browser allowing us to save and retrieve bookmarks. The fourth and final issue we ran into was resolving the HTTP GET request which was not synchronous with the program.

Accomplishments that we're proud of

We had four major accomplishments during our time at HopHacks. The first achievement we made was writing a Java HTTP server from scratch and wrapping the server around a SQL database. The second achievement was being able to send and receive data from our self-created Java server from our JavaScript code. The third achievement was being able to import active tabs and generate new links in the process. The fourth achievement was the creation of persistent data that can be locally saved and retrieved during separate uses of the chrome extension.

What we learned

Mainly, our group gained deeper insight into understanding how to communicate across applications over the internet. Additionally, we learned a great deal about front-end development.

What's next for FireLink

Moving forward, we would potentially like to push our extension onto the chrome store. But before committing to pushing out the product, we would like to spend some time reworking our design, primarily focusing on security and scalability. Additionally, we would like to revisit our UI and potentially look to new CSS extensions capable of giving us a more professional look and feel.

Share this project: