Banana Bulletin

• 

  Screenshot of extension open on an npr article

Inspiration

Our inspiration for this came from the narrow perspective that people have on reading the news. Most people (us included), whether intentional or not, default to the same news source every time. For many this is either a force of habit, a strong preference, or a heavy political bias. Many Americans also exclusively view American news sources, even when viewing international events. Our goal for this project was to make a convenient way for our users to broaden their perspectives by being given a list of similar articles published by other news publications.

What it does

Our program is a Google Chrome extension, that, when opened, reads the title of the current page, and then searches for similar results on other news sources. These results are then read out for users to click on to be redirected.

How we built it

We built this program using HTML, CSS, and Javascript with Node.js, Axios, Cheerio, and Browserify. Our program runs fully in the browser. It uses Axios to request HTML data from the current website and Cheerio is used to parse that data. This data is used to form new URLs which direct to searches for the title of the current news article in other news sources. These responses are then also read with Cheerio to generate a list of links for the user.

Challenges we ran into

We ran into many challenges as this was our first attempt at creating a browser extension beyond the most basic parts and also our first time using Node.js, Axios, Cheerio, npm, and Browserify. One of our largest problems was requesting data from searches on websites. Much of the data on websites cannot be read with just the basic HTML from a simple request. Instead, Javascript code has to receive data from the website’s backend, but these can't be run in an extension. The first ideas we had for this were to use packages like puppeteer and Selenium but they also wouldn't work in a browser extension. The next idea was to create an API backend server to run these browser pages and send data back to the browser through GET requests. This would work but would take a long time to program and would run slower then our final idea. This idea was to request data from a search engine instead of directly from a news source. This idea was very effective and didn't require us to host a server (currently it would have to be locally) and could instead be done fully in the browser extension's Javascript code.

Accomplishments that we're proud of

First and foremost we are proud of making a functional minimum viable product for our idea. We participated as a group in the previous CruzHacks and were way over our heads with our idea and couldn't create a product we felt satisfied with. This year our product fulfilled all the necessities we wanted met and even some of our stretch goals. It also looks visually appealing and is easy enough to use. We also came out of this event much more proficient in tools and languages we previously haven't touched.

What we learned

This project taught all of us many valuable skills. We learned how to create stylings with CSS, how to make and await asynchronous HTML requests with Axios, how to create a full Javascript project with Node.js, how HTML is laid out and how to parse it with Cheerios, how to install and manage packages with npm, and some basics of how backend development works.

What's next for the Banana Bulletin

All four of us are genuinely interested in continuing development of this project and are thinking of next steps. At the end of the day this is a hackathon project and many shortcuts were taken that should be implemented in better ways that we didn’t have time for. One of the larger things that needs some improvement for this project is how we request HTML data. The GET requests have to be followed by a timer so we don’t send too many requests as Axios only allows so many requests in a given time so we ideally should switch to some other way to request page information. There are also many features we didn’t have the time to add or complete. Some of these include options for users such as only showing news sources that don’t require subscriptions, or allowing users to choose which news sources to search. We are also interested in adding support for an LLM to help summarize and compare articles.

Built With

• axios
• cheerio
• chrome
• github
• javascript
• node.js
• nvm