Building Your First Mod

Let's build a simple mod that shows you how to create browser automations with PixieBrix.

In this simple example, we'll build a mod that sends information from a LinkedIn profile page to a Google Sheet.

You'll learn how to:

Initiate PixieBrix mods (such as right-clicking on a page)
Scrape information from a page (such as profile information)
Send data to other tools (such as Google Sheets)
Add visual effects to your screen (such as spraying confetti)

You'll be able to build this in just a few minutes! Let's get started!

0. Setting up your environment

To build this mod with PixieBrix, you'll need to:

Create a PixieBrix account
Install the PixieBrix Chrome Extension (you'll be prompted to do this when you create an account)
Open a new tab and go to a LinkedIn profile (!)
In the new tab, open the Page Editor in the PixieBrix tab of the Chrome Dev Tools

Open the Page Editor by right-clicking anywhere on the page and choosing Inspect. By default, you'll be on a tab named Elements. Look for a tab that says PixieBrix. You'll find the Page Editor is easiest to use when you dock your Chrome Dev Tools at the bottom instead of the side. Learn more about how to do that in Open the Page Editor.

1. Trigger the mod

a. Click New Mod in the top left of the Page Editor, next to the PixieBrix icon, and select Context Menu.

This opens a menu allowing you to choose how to trigger a mod. You can learn more about them in Types of Mods, but we will use a basic Context Menu so the mod runs when we choose it from the Context Menu (what appears when you right-click a page).

b. Configure the starter brick

You'll notice a panel appear in the Page Editor with configuration options. Change the Name and Title fields to Scrape LinkedIn.

You can leave the other fields as is.

Right-click anywhere on the page above the Page Editor, and you should see an action in the menu for Scrape LinkedIn.

Anytime you click that, this mod you're building will execute. Next, let's add bricks for scraping information from LinkedIn.

2. Scrape profile information

PixieBrix mods are made up of bricks. You can learn more about Using Bricks, but they're essentially functions that you can string together to make your automation workflow.

Since we want to get data about a profile in this mod, we'll need to use the Extract from Page brick to extract text from the page.

This second panel is where you willBrick Actions Panel. You'll add, copy, delete, or re-order bricks here to execute your workflow.

b. Add the Extract from Page brick.

In the modal, search extract from page and hover on the Extract from Page brick, then click the blue Add button.

c. Define the property you want to scrape

Inside the Extract from Page brick configuration options, you'll see a property field. Change the name of the property to something describing what you want to extract, like name.

Next, click the green mouse icon on the Selector field and choose the element on LinkedIn that you want to scrape. In this case, we want to scrape the name, so click the name on the profile page.

You'll see that PixieBrix sets the Selector value to a class or id that describes references that selector.

PixieBrix makes its best guess as to what selector should be used, but in some cases, you may need to manually specify the selector if you don't find this brick to be extracting data consistently. You can do this by going to the Elements tab to view an item's HTML attributes, and then reference those attributes in the Selector field of the Extract from Page brick.

To scrape more information, click the blue + Add Property button and specify more elements. We'll stick with just the name for now.

d. Run your mod and check the output in the data panel.

To confirm your selector works, run your mod by right-clicking on the page and choosing Scrape LinkedIn from the context menu. Look on the far right side of the Page Editor, and you'll see an Output tab with an object called @data. Click the caret to open the object and confirm the correct value was scraped from the page.

Now, you can reference that value in other bricks. Let's add a brick to send that value to a Google Sheet.

It's a good practice to run your mod after you add a brick to check the brick's output and confirm your mod continues to work as expected. It's especially helpful for Troubleshootingso you can notice exactly when a mod starts experiencing an issue.

3. Add data to Google Sheet

Since we have scraped some information, now we want to do something with it. In our example, we will add a new row to a Google Sheet with that information from the page. We have a brick that does exactly that!

a. Add the Add Google sheet row brick.

Click the + button below the Extract from Page brick and search for Add Google sheet row. Hover over the brick and click the blue Add button.

b. Connect your Google account.

Click inside the Google Account field, you'll be able to select an integration if you've already created one. If you haven't already integrated your Google Drive, click the link below the Google Account field to configure your integration.

In the tab that appears, select the + Add Integration action in the top right. Search for Google Drive and click Configure.

Give it a name to reference the integration later, and click Save. Go back to your mod and click the refresh icon in the Google Account field and you should see your newly created integration in the dropdown field. Select the integration and a pop-up will appear asking you to confirm your Google Account.

Don't see the pop-up? It's probably hiding behind another window. For issues connecting Google Drive, check out our Google Drive integration docs.

c. Select a spreadsheet

Once you've connected your account, use the dropdown to select a spreadsheet that you want to add data to. You can search in the field for the name of a sheet.

Next, pick the name of the tab.

Once you pick the tab, you'll see the Row Values section populate to include the headers from that tab.

d. Set the values of rows with data from the mod.

Now, we need to define what data actually goes into the new row in the spreadsheet. You can map them to their corresponding column.

To do this, click the Value field for a given header and type the path of the variable you want to reference. To set the name to our value from our previous brick, click the clipboard next to the item in the Output from that brick, then paste it into the field.

Want to include a link? Every starter brick produces output that can be accessed throughout the mod, including the current URL of the page it's triggered on. To do this, you can reference @input.url,which will return the current URL.

When your Google Sheet brick looks like this, you're ready to run your mod and try it out.

e. Run the mod and confirm a new row was added to your Google Sheet.

You should see a new row in the Google Sheet you specified that contains information from the current page you're on!

4. Save your mod

Click the save icon on the mod name on the first panel on the left of the Page Editor.

Clicking the Save icon will open a modal for Packaging a Mod. Create an alias if you haven't already, then confirm or modify the unique ID and description for the mod. When you're ready, click Create and your mod will be saved and accessible via the Page Editor and Extension Console.

Now, you can close the Page Editor (click the X in the top right corner).