Under construction: this tutorial is currently being updated for PixieBrix release 1.4.0
Before you begin this tutorial, make sure you've completed the Quick Start Guide
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.
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:
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:
Label the Property
Scroll to the bottom of the Page Editor Data tab and you will see the following Raw Data:
In the Selectors section of the Page Editor Data tab change "property1" to "companyName"
The Raw Data section will now look like this:
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"
After you click "Enter" you will be taken to search results page, which has this URL:
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
- 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".
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.