Airbnb is awesome and super convenient for booking a place to stay when traveling somewhere new. Unfortunately, just like other hotel booking sites, the price per night is never the actual price you end up paying. Hidden fees or additional charges are tacked on as you go to book your place and honestly, it’s annoying. NPR recently covered this and it was mentioned that even a couple cents off the price can make a customer choose a different chain over another. To be fair to Airbnb, their fees are mostly upfront and spelled out nicely, but still, why do I need to click the actual listing to see the complete price? AirSort fixes that problem and here’s how it works.
AirSort is a chrome extension that takes the user’s search criteria, executes it, collects all total prices and then redisplays the search results by lowest total cost for the trip. When making the extension, I wanted to make the process as natural for the user as possible. In other words, I wanted the extension to literally feel like an extension of the Airbnb site. This meant respecting the search filters, loading processes and result tiles for each listing.
For the technical aspects, it wasn’t terribly difficult to work with the Airbnb site. The first aspect to this process is to look at the general site structure and understand the important parts.
Making notes of the main div containers wasn’t difficult and by playing around with the search filters, it was clear that the filters themselves persisted through the URL. This ends up working in our favor later on since Airbnb forces a second web request to get the actual pricing information later on. When viewing a single listing, you can get an idea of what I am talking about with the additional fees.
This web request back to the Airbnb servers gives us exactly what we want and includes a bonus — well structured JSON responses!
The only slight issue is the “authenticity_token” included in the web request. Fortunately, Airbnb doesn’t do too much to hide this little piece of information and is nice enough to include within a hidden element inside the page.
At this point, all the puzzle pieces are collected in order to make this work. Using the chrome extension features, we can easily take the URL from the browser, ship it off to my backend server and begin processing the results. In order to return data in a timely manner, only 3 pages (60 choices) of results are obtained and then crawled for their pricing information. This works better with 10 pages, but it’s a trade off between waiting without adding a lot more processing logic. The only tricky part of this process was preserving the tiles to display the results. As each result is crawled, the original tile HTML is extracted, it’s price modified and base64 encoded for easy transport.