# QHacks 2019

## Chrome Extension Project : Spoiler No Spoiling!

###### By Brian Arthur, Jacob Laframboise, Catherine Wu, Emily Zhao

#### Description

This extension prompts and accepts user input to prevent spoilers from appearing on webpages while on Chrome.

#### Installation

Download the qhacks folder. Go to "More Tools" --> "Extensions". Load unpacked and choose the qhacks folder.
Now in a new webpage, there should be an icon prompt which allows input of a movie name. After hitting [Enter],
instances of text spoilers for that movie should be hidden from your online adventures!

#### GUI:

![alt](https://res.cloudinary.com/devpost/image/fetch/s--LlRHP4Zs--/c_limit,f_auto,fl_lossy,q_auto:eco,w_900/v1/res/GUI.PNG "The interface for the Chrome extension.")

#### Structure

This project in primarily a Google Chrome extension written in Javascript and a little bit of CSS.
It relies upon two custom Javascript API's which interact with the movie database site.

#### User Experience and Program Flow

1. The user opens their browser and clicks our extension.
2. They type in the name of the movie that they don't want spoiled.
3. The Javascript makes a call to a custom API on stdlib based off of the nemo web scraper.
This API returns a link to a movie database site where more information on the movie can be found.
4. This link is used in a call to a second custom API on stdlib, also based off of the nemo web scraper.
5. A list of characters in the movie is returned to the extension.
6. The extension blurs any paragraph that contains a character name in the movie or a key word you typed.
7. The extension will automatically run on any new page that is loaded.
## Inspiration

You know what sucks? Spoilers. They're EVERYWHERE. And especially for shows like Game of Thrones where spoilers are inevitable, it can be extremely difficult to really enjoy shows these days... :( Luckily, with the Spoilers Suck! chrome extension, you don't have to worry about having your favourite shows spoiled anymore!

## What it does

Spoilers Suck parses through text and images in your browsing page, sends the content to a backend that uses an algorithm to determine whether or not the content is related to a show you opted to remove spoilers for.

## How we built it

The Backend is built with Flask. We used several image recognition and text significance processing APIs and a self-made algorithm inspired by existing NLP libraries.
Frontend is built with HTML/CSS/Javascript and Chrome Devtools.
The application is hosted on Heroku.

## Challenges we ran into

Learning how to build a chrome extension, figuring out how to make the process efficient.

## Accomplishments that we're proud of

We are proud of creating something that is functional, tangible, and can be used by many people. We hope to better the lives of all television addicts and Netflix users.

## What we learned

We learned about how to build a Chrome Extension, the principles of NLP, and algorithm design. We also used many new APIs that will be handy for future development.

## What's next for Spoilers Suck!

We want to make the experience more tailored for users! In the future, we want to implement a system where as user can input the season and episode they are on, and our application will parse the internet and be trained to blcok spoilers succeeding the season/episode.

This app can also be pivoted away from spoilers, and used to block other content such as Trigger warnings, hateful speech, or even distracting dank memes.
## Inspiration

Food is tastier when it's in season. It's also better for the environment, so we decided to promote seasonal foods to have a positive impact on both our taste buds and the planet!

## What it does

When you navigate to a recipe webpage, you can use our chrome extension to view which recipe ingredients are in season, and which ones are not, based on the current month. You also get an overall rating on the "in-season-ness" of the recipe, and you can hover over the produce to view the months when they will be the freshest.

## How we built it

The UI of the extension is built using vanilla JavaScript, HTML and CSS. The backend is written in python as a flask app, and is hosted on Heroku for it to be widely accessible.

## Challenges we ran into

We had trouble writing the logic to determine which produce appears in the ingredient list of the recipes.
We also had a really tough time uploading our backend server to Heroku. This was because we were running into CORS issues since we wanted our extension to be able to make a request from any domain. The fix was quite simple, but it still took a while for us to understand what was going on!

## Accomplishments that we're proud of

Pretty UI and nice animations.
Compatibility with most recipe sites.
We finished the project in time.
First hackathon for 3 out of 4 of our team members!

## What we learned

How to make a chrome extension.
How to build an API.
What CORS is.
Basic frontend development skills.
Onions have a season!

## What's next for Well Seasoned

Support locations outside of Canada.
Functionality to suggest recipes based on the season.