🔎

Create a Search (6 min)

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

In this tutorial, we'll automate a simple process: searching for TechCrunch articles related to a company directly from its Crunchbase profile, all with the click of a button.

In this tutorial, we'll use the Microsoft Crunchbase profile page to develop our workflow.

1. Place a Button

Open the Page Editor

Start by navigating your browser to Microsoft's Crunchbase profile page: Microsoft. Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.

Place a Button

  • Click Add in the top left of the Page Editor and choose Button
  • Then hover your cursor over the three dots to the right of the SAVE button on the webpage
  • Hold down the "Option" key (Mac) or "Alt" key (PC) and click the three dots to expand the dropdown.
  • Then click "Compare" and PixieBrix will add a new custom button to the button group.
image

Customize the Caption and Icon

To customize the caption, click the Page Editor Menu Item tab. Then delete the word "Action" from the Caption text box and type "TechCrunch"

To customize the icon, type "newspaper" in the Icon dropdown.

Your button should look like this:

image

Click on the webpage outside of the dropdown to collapse it.

🚨

You must collapse the dropdown before continuing to the next step.

2. Select Data

Select the Page Element

  • Start by clicking the Data tab in the Page Editor. In this case, PixieBrix does not detect a Framework, so you will use jQuery.
  • Click Add a Property, and the click the pointer icon under Value.
  • Then hover your mouse over the word "Microsoft" until the shaded blue area looks like the image below, and click to select this page element:
image

Label the Property

Scroll to the bottom of the Page Editor Data tab and you will see the following Raw Data:

image

In the Selectors section of the Page Editor Data tab change "property1" to "companyName"

The Raw Data section will now look like this:

image

3. Perform an Action

Define Your Search Parameters

Next we'll figure out how to construct a search URL for TechCrunch.

In a separate tab, go to the TechCrunch homepage and search for "microsoft"

image

After you click "Enter" you will be taken to search results page, which has this URL:

https://search.techcrunch.com/search;_ylc=X3IDMgRncHJpZANQbzdDS3kzdVE2LlZmNk01S0RLSjJBBG5fc3VnZwMxMARwb3MDMARwcXN0cgMEcHFzdHJsAzAEcXN0cmwDOQRxdWVyeQNtaWNyb3NvZnQEdF9zdG1wAzE2MTE1MzgxMTY-?p=microsoft&fr=techcrunch

Toward the end of the URL (scroll the URL to the right, if needed), you will see p=microsoft. TechCrunch uses "p" as the search parameter.

Configure the Search

  • Go to the Effect tab of the Page Editor. Click Add a Block and search "open a tab"
  • In the URL put https://search.techcrunch.com/search
  • Click Add a Property. Delete "property1" and replace it with "p", the search parameter we identified in the URL
  • In the Value text box type "companyName".

image

Test Your Search

Press the TechCrunch button to test your search. Try it from different company pages to see how the search dynamically changes. Once you're happy with the button, click Save to use this search in the future.