Browser extension from an IT perspective: challenges & solutions

We launched a new browser extension not that long ago. It's for comparing hotel prices on different booking websites. After seeing how many challenges the IT team faces daily, I asked them to share their experience when creating this tool. They were more than willing to share their journey. You'll find the challenges they faced & the solutions they found. Even though it's a story of developing one particular product, there's a lot of general information worth keeping in mind when working with a browser extension.

Learning new stuff

Like every new project, we try to overcome our previous challenges and create something even more remarkable. Our team has never worked with chrome extensions or scraping libraries. So there were a lot of topics to cover before starting any development of the extension and price scraping from different hotel providers. We have collected a lot of information on how hotel providers work and how strongly they depend on internationalization.

Gather intel on hotel providers

While creating price comparison, we had to dig deep into every hotel provider and find out how they are structured. With each provider, we have faced new challenges. For example, some providers may include taxes to the hotel price while others display taxes only in the booking step, which creates a mismatch between scraped prices and incorrect results. One of the most complex parts was how hotel providers approach internationalization. Hotel data might change according to user location, browser, or even the type of hotel selected. That means we must manually encounter every possible use case available to check if the extension will work as expected.

Different stores

RatePunk extension is available in 3 different stores: Chrome, Safari, and Firefox. Each store requires different extension configurations to be approved. Chrome Store involves using the newest Manifest Version 3, representing one of the biggest shifts in the extensions platform since it launched a decade ago, including enhancements in security, privacy, and performance. While Safari and Firefox still use older Manifest V2. Because of the changed structure and implementation of the newer manifest version, we have to create two versions of extensions to support all stores. In fact, Firefox requires even more configuration, which means each time we make an update, we have 3 new versions in total to create.

Review phase

While configuring an extension to support different stores is just a matter of minutes, it takes an eternity from submitting a new version to getting approved in different stores. For example, in most cases, Firefox approves extensions instantly, while Chrome and Safari stores might take a day or two to approve new versions. If Safari finds irrelevant keywords in your extension or doesn't work as expected, it will reject the extension with no hassle. Still, the medal for the worst review phase goes to the Chrome store for not allowing us to cancel the submission. That means that if we find a bug in the extension after we submit it, we have to wait until the new version rolls out, and only then can we submit a patched version that will be pending for the next couple of days.

Data tracking

We have never imagined how lucky we are that we can track anything we want and identify trends and patterns in how visitors engage with just a snippet of Google Analytics code on our website. Unfortunately, you can forget everything about it when working with extensions because tracking data that extension stores provide is impractical and inaccurate, to put it mildly. For example, the Chrome store might show you more installs than product page visitors on the same day. All stores do not track UTM codes, so there is no way to find out where your customers are coming from. But the worst thing is that we cannot add an analytics viewer account in either of the following 3 stores, and only the developer has access to all tracking data. However, we were able to solve this problem using Google Measurement Protocol. There are a lot of workarounds on how we are tracking data in our extension, but at least we can get accurate data that we can use in further research.

Different countries - different rules

Currencies, taxes included or excluded, price per night or per stay, just to name a few standards that depend on different countries. This means we have to adapt our extension to support as much variety as possible. Because of this, a big part of our extension development process was taken by internationalization which we can separate into two types. Automatic - these changes will apply automatically according to the user browser, location, and hotel provider page. Manual - these changes don't have a unified solution. That is why we allow users to personalize our extension as they want.

Starting point

We knew that the project would become more and more complex with every update from the beginning. So with that in mind, we decided to create an extension using the Webpack module bundler. So that we could develop our extension in the way we want while maintaining high performance.
You can find various Chrome extension boilerplate projects on the Internet, but most are outdated and do not support the newest Manifest-Version. So, we decided to create our own boilerplate, which took us a while, but at least we have a fully adjustable boilerplate that meets all our needs.

Working with plain JavaScript

Extensions still don't have much support and implementations in today's modern world of front-end frameworks like React and Angular. This means the only proven and well-functioning way to develop an extension is by using plain JavaScript. We were used to working with React framework when creating websites. Coming back to the JavaScript roots for extension was a bit frustrating to remember the life before components, state management, and overall simplicity when working with dynamic content.

You can see their work on our website: https://www.ratepunk.com/

Share your experience with browser extensions. What biggest challenges are you facing? Did you find the solutions?