Brixplore

Explore the web and the cosmos with your very own brick-making Mars rover!

Comment

Inspiration

Going into BrickHack7, our team was very intrigued by the theme, bricks. Most hackathons target the broad subject of social good, open to extensive interpretation. So when given "bricks," we were a bit stumped on where to begin. That in mind, we leveraged our past experience and wondered if we could create an extension that solved a simple problem - ultimately, to relieve stress when learning about today’s ever-changing world, while providing useful features.

While thinking along the lines of bricks and the clay and mud that go into making them, one of our team members suddenly perked up with an idea - it would be so cool if we could implement the 2D, side-scrolling digging mechanism of the game Terraria into our hack! From this, we decided on making a Chrome extension game that would allow the user to control a character to “dig” through the components of a webpage and collect links to other pages as if they were precious metals, offering them more fun and engaging way to explore the web and avoid doom scrolling.

But how exactly would we incorporate bricks into this hack? We took inspiration from the recent event of NASA’s Perseverance rover making a successful landing on Mars. The surface of Mars is red and made mostly out of clay. Hmm...what else is red and made mostly out of clay? That’s right, bricks! And thus, the Mars exploration aesthetic of our game was born. Not only does the user control their own personal Mars rover, but the links they collect on the page are also “samples of Mars’ surface”, saved in the form of “bricks” and stored in the Brixtack located on the game’s sidebar. The Brixtack gives the user easy access to observe their sampled links.

What it does

The Brixplore Chrome Extension will scour a webpage and look for all related links on a webpage, and allow you to navigate through them without having to go back and forth to click on each link. This is especially useful for sites where the user may desire to click on several links, such as news sites where the user wants to read multiple stories. Each of the links on the page is marked by a small floating rock on the screen, a "sample of Mars," which can be collected by the user-controlled Mars rover. If the user hovers over them with their rover, these samples will be "processed" into bricks, and stored in the game's sidebar, called the Brixstack. The Brixstack will provide an easy and convenient location for you to navigate through all the links that you've collected, and give you an easy way to "observe" your collected samples. (i.e. go directly to the webpage of interest). In this way, Brixplore presents a new, interesting way for users to explore websites, as well as a convenient way of finding and accessing other points of interest on those sites.

Brixplore's functionality doesn't just stop there! Brixplore’s additional functionality is that it will summarize the text on the site and provide it to you in an easy-to-read format. Additionally, Brixplore can create citations for the sites on which the Chrome extension is opened, and copy the citations directly to your clipboard with the press of a button! The summarization feature is beneficial for users who want their information in a quick and condensed manner, as they can simply select through the links they’ve collected in their Brixtack and read/listen to the summaries of each article. This and the citation feature make it perfect for those needing to find and cite sources for research papers. Additionally, users have the ability to listen to summaries of articles rather than having to read through large amounts of text.

How we built it

Building Brixplore was much like building a house out of bricks: there were many steps and we had to start from the ground up.

Our first task was to build a Chrome extension that safely scraped and modified information on a given webpage. To build the extension, we moved as quickly from the scope of the extension to the modified webpage as was possible, injecting all of our HTML elements through a single Javascript file that had permission to read and write on chrome tabs.

Afterward, we needed to build the game’s functionality in a way that could interface with the HTML information manipulated by the Javascript. To create the game’s functionality, we modified the 2D collision and physics elements from an open-sourced engine from Eloquent Javascript that ran using only HTML elements instead of the canvas. This way, we could ensure that the elements of any webpage the user was on could successfully interact with the game. This step also included the capability for the rover within the game to “collect samples” and store the sampled links as bricks in the Brixtack for quick access later.

Finally, we built a Python Flask API in Herokuapp that connected with other APIs (namely EasyBib) and used trained Machine Learning models to scrape the text of pages where the extension was activated. The API takes in a URL and sends back the citation and summary data, which we can then incorporate within our extension.

Challenges we ran into

As we were building new game functionality, we needed the game environment to interact directly with a webpage - any webpage. At first, when we were thinking about “brickifying” a webpage, we considered modifying a webpage’s individual elements (words, small images, and the like) to the point of being the primary elements of this environment. However, breaking HTML, which is responsive, into smaller chunks proved too variable. Instead, we wrote code to regulate each element of a given page to a grid, knowing that links and images have their own tags. Developing new game functionality is difficult on its own, as is web scraping. Making sure these two systems could interact reliably required an intense amount of abstraction, planning, and teamwork, as the time constraints ensured that we needed to work on these elements in parallel.

Accomplishments that we're proud of

Every member of our team stayed up all night working on some portion of the project together. Staying awake is no accomplishment, but keeping the code flowing certainly made this project better than anything we could have done alone.

This project is functional. On other time-constrained projects in the past, we sometimes found the need to limit our functionality or design in some way. During this project, we were able to develop three separate systems in tandem, incorporate them, and, in fact, add more design and interactive elements once the basic functionality was laid down.

We like that our project is fun and stress-relieving. It’s a difficult time to scroll around the news right now, and we’re glad to have created something that addresses the moment without being too ambitious.

What we learned

None of us had ever built a Chrome extension before. Interaction between our code, a person's browser, and a web experience, and the security workarounds that came with it, provided an interesting challenge.

From a technical perspective, we learned the importance of planning our data structures, abstractions, and workflows ahead of time. Knowing what needed to be done and when, and knowing where our code was going meant that we spent less time explaining our own code to ourselves and one another with fewer bugs.

As a team, we learned that we could improve a bit on our brainstorming process. We weren’t wholly satisfied with all of our ideas, and while we came up with a plan in the end, we used 3 hours of development time debating.

What's next for Brixplore

Brixplore will likely provide us (in the immediate future) with a solid boilerplate for Chrome extensions, HTML5 games, 2D platformer games, and other small, web-based code projects. To expand the capability of the extension, we would likely create a more visually satisfying experience and clean up the code: adding animations, “brickifying” pages in a clearer way, and using a more efficient text summarizer that does not require numerous API calls are a few of the improvements we imagine Brixplore would need to become a mass-distributed Chrome extension.

Share this project:

Updates