PixieBrix Docs
CommunityTemplates
  • Welcome to PixieBrix!
  • Quick Start
    • Productivity Enthusiasts
    • Mod Developer
    • Team Member
    • Enterprise Admin
  • Activating Mods
    • Linking Your PixieBrix Account
    • Using the Marketplace
      • Finding Mods
      • Activating From the Marketplace
    • Activating Your Assigned Mods
    • Updating Mods
    • Troubleshooting
  • Developing Mods
    • Building Your First Mod
    • Developer Concepts
      • Types of Mods
        • Context Menu Item
        • Button
          • Troubleshooting Buttons
        • Sidebar Panel
        • Trigger
          • Working with Custom Events
        • Quick Bar Action
        • What Are URL Match Patterns?
      • Text Template Guide
        • Basic Text Templates
        • Transforming Data with Filters
        • Writing Conditional Statements
        • Template Examples
      • Using Bricks
        • Brick Input Data Types
        • Bricks for Scraping Data
          • Retrieving Attributes from Elements
        • Bricks for Interacting with the DOM
        • Bricks for AI
          • Passing Custom Data to an LLM
      • Data Context
        • Types of Variables
        • Using Mod Variables
        • Using Page State (Advanced)
        • Referencing Variables
      • User Input
        • Show a Modal or Sidebar Form
        • Prompt for Input
      • Working With APIs
        • API Providers
        • Encoding URL Parts
        • Selecting and Transforming API Results
      • Working with Markdown
      • Control Flow
        • Conditional Field on Bricks
        • Control Flow Bricks
          • When to Use Control Flow Bricks
          • Control Flow Brick Output
          • Raising Exceptions/Errors
          • FAQs
      • Transforming Data
        • Using JQ in PixieBrix
        • Using JavaScript in PixieBrix
      • Building Interfaces
        • Understanding the Preview Panel
        • Styling Elements
        • Adding Advanced Elements
        • Custom Themes/CSS
      • Advanced: Brick Runtime
    • Customizing Existing Mods
    • Sharing Mods
      • Packaging a Mod
      • Exposing Activation-Time Mod Options
      • Sharing a Mod With Your Team
      • Updating Published Mods
    • Troubleshooting
    • Mod Development Best Practices
    • Advanced: Workshop
  • Platform Overview
    • Page Editor
      • Open the Page Editor
      • Page Editor Components
        • Mod Listing Panel
        • Brick Actions Panel
        • Brick Configuration Panel
        • Data Panel
    • Admin Console
      • Campaigns
    • Extension Console
  • Managing Teams
    • Creating a Team
    • Inviting Members
    • Access Control
      • Roles
      • Groups
    • Managing Team Integrations
    • Assigning Mods
    • Billing
    • Advanced: Isolating Development, Test, and Production Environments
  • Deploying Mods
    • Deployment Keys
  • Integrations
    • Configuring Integrations
    • Integration Scenarios
    • Embed Web Apps via IFrames
    • Integrate with Desktop Apps via Custom URL Schemes
    • Airtable
    • Atlassian
    • Automation Anywhere
      • Configure Automation Anywhere Integration in PixieBrix
      • Embedding the Automation Co-Pilot
      • Running AA Bots via Control Room
      • Creating AARI Requests
      • Enhancing AARI Table Fields
      • Enhancing AARI Forms
      • AARI Extensions Enterprise IT Setup Guide
        • Point PixieBrix Extension to Staging AuthConfig App
      • Create a Control Room Certificate on Windows
    • Google Drive
      • Creating Google Drive Integration
      • Google Drive Bricks
      • Migrating from Google Sheet to Google Drive Integration
      • Reactivating Your Google Sheet Mods
      • Troubleshooting Google Integration Errors
      • Sheety: Sharing Google Sheets without Google Workspace
      • [LEGACY] Configure Google Sheets Integration
      • [LEGACY] Adding a Google Sheet to Mod Input
    • Guru
    • Hunter.io
    • HTTP Basic Authentication
    • Microsoft
      • Connect to Custom Azure Applications/APIs
      • Add a Power BI chart to the Sidebar
      • Microsoft Power Automate
      • Microsoft Office
        • Microsoft OneDrive / Files
        • Microsoft Excel
        • Microsoft Sharepoint
        • Microsoft Teams
        • FAQs & Troubleshooting
    • Notion
      • Public (OAuth2)
      • Internal (API Token)
    • OAuth2 Client Credentials
    • Ollama
    • OpenAI/ChatGPT
    • Pipedrive
    • Retool
      • Embed a Retool App
      • Trigger Retool Workflows
    • Robocorp Control Room Integration
    • Salesforce
    • SerpAPI
    • ServiceNow
    • Slack
    • Streamlit
    • Trello
      • Configure Trello integration
      • Find board and list IDs in Trello
    • UiPath
      • Running unattended bots via UiPath Cloud Orchestrator
      • Embed a UiPath App
      • Running local bots via UiPath Assistant
    • Val Town
    • Zapier
    • Zendesk
    • Advanced: Custom Integrations
  • Storing Data with Team Databases
  • Enterprise IT Setup
    • Authentication
      • Enabling Login with Microsoft
      • Enabling Login with Google
      • Setting Up SAML/SSO
    • Browser Extension Installation and Configuration
      • Browser Extension Installation Policy
        • Google Workspace Policy
        • Windows Group Policy/ADMX
        • Windows Registry
        • Citrix Profile Configuration
        • Advanced: Create a Windows Installer EXE
      • Browser Extension Configuration Policy
        • Extension Authentication Configuration
        • Microsoft Edge Mini Menu Configuration
        • Microphone and Audio Capture Configuration
        • Extension Logo Configuration
        • Managed Storage Schema
      • Browser Extension Security
    • Network/Email Firewall Configuration
    • Custom Branding and Themes
    • Security and Compliance
    • Performance
    • Version Control and Backups
    • Web Application Platform Configuration
    • Enterprise Troubleshooting
  • Developer API
    • Service Accounts
    • Making an API Request
    • Team Management APIs
    • Package Management APIs
    • Deployment APIs
    • Database APIs
    • Health Check APIs
    • OpenAPI Specification
    • Deprecated Resources
  • How To
    • Installing the PixieBrix Chrome Browser Extension
    • Changing the Quick Bar Shortcut
    • Pinning the Chrome Extension
    • Updating the Browser Extension
    • Installing a PixieBrix Pre-Release Build
    • Editing Pages with iFrames
    • Adding bricks to mods
    • Opening the PixieBrix Sidebar
    • Troubleshooting
      • Troubleshooting Bad API Requests
      • Troubleshooting Network Errors
      • Troubleshooting IndexedDB Errors
      • Troubleshooting Browser Extension Performance and Crashes
      • Troubleshooting extension corruption errors
  • Release Notes
    • 🏗️Release 2.3.0
    • ✅Release 2.2.10
    • 📜Release Notes Archive
      • ✅Release 2.2.9
      • ✅Release 2.2.8
      • ✅Release 2.2.7
      • ✅Release 2.2.6
      • ✅Release 2.2.5
      • ✅Release 2.2.4
      • ✅Release 2.2.3
      • ✅Release 2.2.2
      • ✅Release 2.2.1
      • ✅Release 2.2.0
      • ✅Release 2.1.7
      • ❌Release 2.1.6
      • ✅Release 2.1.5
      • ✅Release 2.1.4 (Hotfix)
      • ✅Release 2.1.3
      • ✅Release 2.1.2
      • ✅Release 2.1.1
      • ✅Release 2.1.0
      • ✅Release 2.0.7
      • ✅Release 2.0.6
      • ✅Release 2.0.5
      • ✅Release 2.0.4
      • ✅Release 2.0.3
      • ✅Release 2.0.2
      • ✅Release 2.0.1 (Hotfix)
      • ✅Release 2.0.0
      • PixieBrix Browser Extension 2.0.0 Migration Guide
      • ✅Release 1.8.14
      • ✅Release 1.8.13
      • ✅Release 1.8.12
      • ✅Release 1.8.11
      • ✅Release 1.8.10
      • ✅Release 1.8.9
      • ✅Release 1.8.8
      • ✅Release 1.8.7
      • ✅Release 1.8.6
      • ✅Release 1.8.5
      • ✅Release 1.8.4
      • ✅Release 1.8.3
      • ✅Release 1.8.2
      • ✅Release 1.8.1
      • ✅Release 1.8.0
      • ✅Release 1.7.41
      • ✅Release 1.7.40
      • ✅Release 1.7.39
      • ✅Release 1.7.38
      • 🚫Release 1.7.37
      • ✅Release 1.7.36
      • ✅Release 1.7.35
      • ✅Release 1.7.34
      • ✅Release 1.7.33
      • ✅Release 1.7.32
      • 🚫Release 1.7.31
      • ✅Release 1.7.30
      • ✅Release 1.7.29
      • ✅Release 1.7.28
      • ✅Release 1.7.27
      • ✅Release 1.7.26
      • ✅Release 1.7.25
      • ✅Release 1.7.24
      • ✅Release 1.7.23
      • ✅Release 1.7.22
      • ✅Release 1.7.21
      • ✅Release 1.7.20
      • ✅Release 1.7.19
      • ✅Release 1.7.18
      • ✅Release 1.7.17
      • ✅Release 1.7.16
      • ✅Release 1.7.15
      • ✅Release 1.7.14
      • ✅Release 1.7.13
      • ✅Release 1.7.12
      • ✅Release 1.7.11
      • ✅Release 1.7.10
      • ✅Release 1.7.9
      • ✅Release 1.7.8
      • ✅Release 1.7.7
      • ✅Release 1.7.6
      • 🚫Release 1.7.5
      • ✅Release 1.7.4
      • ✅Release 1.7.3
      • ✅Release 1.7.2
      • ✅Release 1.7.1
      • ✅Release 1.7.0
      • ✅Release 1.6.4
      • ✅Release 1.6.3
      • ✅Release 1.6.2
      • ✅Release 1.6.1
      • ✅Release 1.6.0
      • ✅Release 1.5.11
      • ✅Release 1.5.10
      • ✅Release 1.5.9
      • ✅Release 1.5.8
      • ✅Release 1.5.7
      • ✅Release 1.5.6
      • ✅Release 1.5.5
      • ✅Release 1.5.4
      • ✅Release 1.5.3
      • ✅Release 1.5.2
      • ✅Release 1.5.1
      • ✅Release 1.5.0
      • ✅Release 1.4.12
      • ✅Release 1.4.11
      • ✅Release 1.4.10
      • ✅Release 1.4.9
      • ✅Release 1.4.8
      • ✅Release 1.4.7
      • ✅Release 1.4.6
      • 🚫Release 1.4.5
      • ✅Release 1.4.4
      • 🚫Release 1.4.3
      • 🚫Release 1.4.2
      • ✅Release 1.4.1
      • ✅Release 1.4.0
      • 🚫Release 1.3.2
      • ✅Release 1.3.1
      • ✅Release 1.3.0
      • ✅Release 1.2.11
      • ✅Release 1.2.10
      • ✅Release 1.2.9
      • ✅Release 1.2.8
      • ✅Release 1.2.7
      • ✅Release 1.2.5
      • ✅Release 1.2.4
      • ✅Release 1.2.3
      • ✅Release 1.2.2
      • ✅Release 1.2.1
      • ✅Release 1.2.0
      • ✅Release 1.1.12
      • ✅Release 1.1.11
      • ✅Release 1.1.10
      • ✅Release 1.1.9
      • ✅Release 1.1.8
      • ✅Release: 1.1.7
      • ✅Release: 1.1.6
      • ✅Release: 1.1.5
      • ✅Release: 1.1.4
      • ✅Release: 1.1.3
      • ✅Release: 1.1.2
      • ✅Release: 1.1.1
      • ✅Release: 1.1.0
      • ✅Release: 1.0.3
      • ✅Release: 1.0.2
      • ✅Release: 1.0.1
      • ✅Release: 1.0.0
      • ✅Release: 0.2.2
      • ✅Release: 0.2.1
  • Tutorials
    • Developer Tutorials
      • Beginner
        • Search Yelp Reviews from OpenTable
        • Right-click Currency Conversion
        • Web Highlighter Tutorial
        • Trello Status Sidebar
        • Right-click Google Scholar Search
        • Google Dorking
        • Tweet a Link
        • Ask AI To Generate a LinkedIn Connection Request
        • How to Customize the AI Rate and Fix Mod
        • Right-click Translate Language
        • Basic Translation Tutorial
        • AI Bot Sidebar
        • Search and Highlight Words on a Page
      • Intermediate
        • Create a status nudge button in Github
Powered by GitBook
On this page
  • 0. Setting up your environment
  • 1. Trigger the mod
  • 2. Scrape profile information
  • 3. Add data to Google Sheet
  • 4. Save your mod

Was this helpful?

  1. Developing Mods

Building Your First Mod

PreviousDeveloping ModsNextDeveloper Concepts

Last updated 6 months ago

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!

0. Setting up your environment

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

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.

c. Confirm you can see the context menu.

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.

a. Click the + button below the Context Menu brick.

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).

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 💜!)

you can use this one
like this one
share on LinkedIn