Building Your First Mod
Last updated
Was this helpful?
Last updated
Was this helpful?
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!
To build this mod with PixieBrix, you'll need to:
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).
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.
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.
In the modal, search extract from page and hover on the Extract from Page brick, then click the blue Add button.
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.
To scrape more information, click the blue + Add Property button and specify more elements. We'll stick with just the name for now.
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.
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!
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.
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.
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.
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.
When your Google Sheet brick looks like this, you're ready to run your mod and try it out.
You should see a new row in the Google Sheet you specified that contains information from the current page you're on!
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).
Go to another LinkedIn profile page (), and run your mod by opening the context menu (right-click) and choosing the Scrape LinkedIn action. You'll see confetti spray across your screen, and if you look in your Google Sheet, you'll see PixieBrix added a new row with profile information.
🎉 You did it! Feel free to . (Tag us and we'll give it some 💜!)
