Shorterms

Shortening those lengthy Terms of Services so you know what you're signing up for instantly!

Comment

Inspiration

Have you ever wanted to sign up for a service and go out of your way to read their lengthy, wordy, and boring Terms of Service? We neither! After all, why would we go out of our way to read all of that if all we wanted was to make an account for a music streaming service?

That may be true, but there are times when the service that we want to use doesn't allow usage for some cases, such as using a music streaming API to build your own music streaming service. We might think it's okay since we don't profit from it but if the Terms of Service doesn't allow that then it's illegal even for non-commercial purposes! We wouldn't want to receive a lawsuit over a personal project now would we?

That's why we decided to make Shorterms: to shorten those lengthy and complicated terms into a simple and concise summary.

What it does

You're probably thinking you could just use something like Gemini or ChatGPT directly to summarize these pages, but that would require two things:

  1. You actively want to know the contents of the Terms of Service
  2. You are willing to go out of your way to read or at least use a tool to summarize the Terms of Service

This is almost never the case. As of 2024, 77% of consumers admit they don't read the terms and conditions of the apps they use.

What makes Shorterms incredibly useful is that it scans the page you're currently opening (usually either a sign up or sign in page) and tries to find the existence of a link to a Terms of Service page. If we find one, we will tell you through a toast on your screen and offer to summarize it for you. This way, you're aware of the terms' existence and can just receive the summary to know the overview without going out of your way to read everything. With a few keystrokes, Shorterms will open the Terms of Service link and summarize its contents. Once its done, the summary will be available for you to skim through.

If you decided to reopen the summary later, we've got you covered. We save the summaries into your browser's session storage. As long as the current browsing session is open, you can go to any sign up page you visited previously and reopen the summary. No need to regenerate each time you visit the page!

DISCLAIMER: The summary generated by Shorterms sometimes might not represent the service’s terms comprehensively. The summary's purpose is to guide you through the actual terms of service page and not as the primary and/or only source. Shorterms is not responsible for any damages caused by potential or actual misinterpretation and/or misinformation based on the summary.

How to install and run it

We would've recommended you install the extension from the Chrome Web Store but unfortunately we're still trying to get approval from Google to publish it so here's an alternative way to set it up.

  1. Download the zip from our release on GitHub.
  2. Extract the contents of the zip file into its own folder/directory.
  3. Open the Chrome browser and navigate to the Extensions page by typing chrome://extensions into the address search bar.
  4. Enable Developer mode.
  5. Click the "Load unpacked" button and select the folder/directory we previously extracted to install it into your browser.

Once you've done all of that, Shorterms is ready to shorten!

How we built it

We split the code for this project into two: the API and the Browser Extension.

The API

We used Go to build the API because of its simplicity, development speed, and processing speed. To generate the summaries, we used the Gemini 1.0 Pro model through the Gemini API. Fortunately, Go has SDKs to interact with Gemini, so we have everything we need. To scrape through the contents of the Terms of Service, we used Colly, a web scraping library available in Go. The endpoint is a REST API endpoint served through the Chi routing library in Go.

Deploying the API

To make the deployment simple and reproducible, we containerized it using Docker. We used Fly.io to deploy the Docker container in a serverless environment because of how fast and easy it is.

The Browser Extension

We built the extension using TypeScript as the language, React for the components, and Tailwind for the styles. We used Webpack to bundle it into plain HTML, CSS, and JS so the extension could be published. As of now, Shorterms only interacts with the Chrome API, but we plan to support other browsers in the future.

Challenges we ran into

Figuring out the event trigger orders

Shorterms need to scan a sign up or sign in page automatically to get the Terms of Service link. This is done through a series of event triggers and listeners through the document and chrome APIs. However, figuring out where to trigger and where to listen for it was pretty tricky at first. Some components can only be accessed through these things called content scripts. Some can only be accessed on background scripts. It took us a while trying to get it working.

Rendering the toast

We needed to render the toast on the user's browser so that they notice the Terms of Service. However, the resources to do this were pretty hard to find and scattered everywhere. We had to browse through many resources until we found what we needed from several obscure StackOverflow answers. For example, we had to mount the toast on a shadow DOM so that our styling didn't disrupt the web page's styles.

Getting Gemini to write valid JSON

To make things simple, we wanted to extract the Terms of Service's metadata such as the service/service provider and effective date in JSON so we can just parse that into a struct that will also hold the summary. However, getting the prompt hard was pretty tough. Gemini kept trying to pretty print the JSON and adding ```json``` wrappers as if we were going to render it in a Markdown document. We had to readjust the prompts multiple times and experiment with different temperature settings until it gave us what we needed.

Accomplishments that we're proud of

This is the first time we've built a Chrome extension and we're pretty proud of how it turned out. We managed to get all the features we wanted from automatic link detection, toast rendering, and the summary pages themselves built correctly. It's also nice to make something that you personally will use a lot. Shorterms may be for everyone but its definitely something that we will be using ourselves.

What we learned

We learned quite a lot in this project but here are our takeaways:

  1. Browser API interactions
  2. Rendering components on a shadow DOM
  3. Prompt engineering tactics for Gemini and other LLMs (we actually managed to get it writing proper JSON with the right fields and format!)

What's next for Shorterms

We currently only support Chrome, so we plan to add support for other browsers in the future. We're also in the process of getting the extension approved on the Chrome Web Store so in the meantime, you can try it out by adding the extension's zip file to your browser using this release. Please see the YouTube link to find our latest video on Shorterms!

Built With

Share this project:

Updates