Walkthrough: Calling an API in Multiple Ways with PixieBrix (F1 Example)

Building a mod to solve one problem is great. Building an mod to solve multiple problems? Now you're seriously upping your productivity game.

When it comes to calling APIs, people often try to keep things simple — they're complicated enough, right? In reality, calling an API in multiple ways based on different intents isn't that hard, especially with PixieBrix doing the heavy lifting.

To show you how it works, we've built a sample mod for Formula 1 lovers.

This mod works differently depending on how you interact with it:

• If you highlight a F1 driver’s name on any page and run the mod, it will return information about that specific driver.
• If you call the mod without highlighting a driver's name, it will return information about all F1 drivers.

This walkthrough will show you how you can program a mod to do two (or more) things using API and data manipulation as well as conditionals. It will involve creating two separate PixieBrix mods which combine into a single powerful tool.

Let’s get started.

Have you signed up for PixieBrix?

This walkthrough shows you how to build a browser mod with PixieBrix. So it shouldn’t come as a surprise that you need to create your PixieBrix account before getting started. After visiting the PixieBrix website, you can sign up in seconds by authenticating your account through Google or Microsoft. Then, pick the plan that works for you. There’s a free plan so you can dive in and explore.

Once you’re signed up, install the PixieBrix browser extension. Then on any webpage right click and choose “inspect” from the menu. Scroll through the inspect menu options until you land on the PixieBrix Page Editor. It’s from this editor that you’ll be able to tackle the rest of this walkthrough and build your mod.

Step 1. Create a new "Quickbar" mod

From the page editor, create a new mod by first adding the Quickbar.

Our example mod will be named "Formula 1 Driver Information" and the Action Title will be "Find Driver Information." You can name these whatever suits your own mod.

Set Sites to All URLs and then this first brick is complete.

Step 2. Add a "Show a modal or sidebar form" brick

This step asks the mod user to select a year, which is needed for the API request you'll be building with the next brick.

The year will require four digits (YYYY) and will be part of the GET request URL.

Without this data, the example mod won't be able to determine which Formula 1 season to query through the API.

Configure this form like this:

Form Title: What year?

Name: year

Label: Year driver raced

Input Type: Single line text

Step 3. Add a "HTTP GET" brick

This step represents the actual API query. In the case of our example mod, we're querying the Formula 1 API hosted on ergast.com.

To do so, add the HTTP GET brick and specify the url.

• url: <https://ergast.com/api/f1/>/drivers.json

 ℹ️ If you notice, there is some nunjucks code in the middle of the above endpoint. This code provides a default value in the case where the value for @form.year is empty.

Step 4. Add a "jq - JSON processor" brick

Now to parse the results from your previous API call.

First of all, set the output variable for this brick to @responseDriverOnly.

You only want to extract very specific data data, which in our example mod is about one driver that an mod user has highlighted.

The mod pulls the driver’s information from the text highlighted on the page using @input.selectionText. After it retrieves the highlighted value that you from the body of a page, you'll split it into first name and last name using nunjucks: That’s the