TravelToday

• 

  Logo

Inspiration

While much of the media is convinced that we are living in a "post-pandemic" world, in reality many aspects of life remain stricter than before. This is especially true for international travel.

To help users navigate the unpredictability of it all, we decided to make a chrome extension that, using Kayak's website on international travel restrictions, can conveniently inform the user of today's confusing travel landscape.

What it does

This is a Chrome extension that allows the user to check a list of countries and their travel restriction status (Closed, Open With Restrictions, Open) from the current page. They can also highlight a country name on the page and specify that as the country of origin.

How we built it

We began with the basic HTML/CSS/JS code needed to create a simple chrome extension. We created a custom popup by adding some HTML elements and CSS rules. To get the extension to display the status of different countries, we had two JSON files representing all country names and common country codes. We fetched those JSON files and then for the popup we used simple message passing to determine what country names are shown on the site, displaying them on the popup too. We used Javascript to also get the status of travel to each country (Open, Open with Restrictions, Closed) by creating a new XMLHttpRequest and doing web scraping on the Kayak International Travel Restrictions site To access Kayak from a highlight + right click we had to create a context menu and also check the highlighted text against country name content from a JSON file before performing the redirect to Kayak.

Challenges we ran into

This is our first-time to build Chrome extension. So we spend a lot of time in researching how to build it. For some of us, it was our first time working with Javascript. We had issues passing variables between JS files and integrating/converting the JSON files. This was also the first time we had to apply web scraping to get information from other sites, so we had to research that too.

Accomplishments that we're proud of

We are most proud that our project is able to find and display data from a completely different website on the extension. We are also proud of the highlighting feature that allows us to visit Kayak's site just by highlighting a word and right clicking.

What we learned

We learned how to make a Chrome extension and also learned how web development works in general; like how functions communicate with each other and how to perform web scraping using JS.

What's next for TravelToday

Currently, for webpages with a very large number of countries the results are displayed in nonalphabetical order in the popup. This is something we would fix. Additionally, we did the web scraping using vanilla JS but we would have preferred using something like Puppeteer, which is generally faster and more robust. This is something we might work on if there was more time.

Built With

• css
• html
• javascript
• json