Sidebar Panel

The Sidebar Panel is a custom panel that displays when you click the PixieBrix icon in the Chrome toolbar. You can use it to streamline common tasks and quickly access information without switching between pages or tabs.

Here are a few examples of how you can use a Sidebar Panel:

• Create modals that contain checkboxes, drop-down menus, or text fields to request information from users.

• Add buttons with actions

• Include iframe data from external resources

Follow these steps to create and configure a Sidebar Panel.

1. Open the PixieBrix Page Editor.

2. In the left pane, click Add > Sidebar Panel.

   
3. Type a name in the Name field.

4. In the Configuration section, enter the following information:

Field	Description
Tab title	The text that will appear in the tab along the top of the Sidebar Panel
Sites	Enter the URL location(s) where the Side Panel displays. • Click the Site, Domain, HTTPS, or All URLs shortcuts to insert URLs automatically. • Click Add Site to enter a URL manually. • Click ABC Text > Remove to remove a site from the list. PixieBrix runs faster and more accurately when you specify URLs in the action, but make sure that you add at least one URL.

5. In the Panel Refresh section, enter the following information:

This is optional information. In many cases, you may not need to configure any of these settings unless you're trying to do something specific.

Field	Description
Trigger	Select the trigger event that refreshes the panel. • Page Load/Navigation. Refreshes the sidebar on load. • Selection Change. Refreshes the sidebar when the selection changes. • State Change. Refreshes the sidebar when the page state changes. • Custom Event. Refreshes the sidebar with a custom event occurs. If you select this trigger, enter the event name in the Custom Event field below. • Manual. Refreshes the sidebar when the user manually refreshes the page.
Debounce	To optimize performance, debouncing prevents trigger actions from running too quickly. You can toggle the Debounce button on or off to control how fast the browser responds.
Delay Millis	Enter or change the number of milliseconds to delay rerunning the trigger. (This option is available only if you enable the Debounce toggle.)
Leading	Toggle the Leading button to invoke debugging on the leading edge of the debouncing timeout. (This option is available only if you enable the Debounce toggle.)
Trailing	Toggle the Trailing button on to invoke debouncing on the trailing edge of a debouncing timeout. (This option is available only if you enable the Debounce toggle.)

6. Next, go to the Advanced: Match Rules section, and enter the following information:

Field	Description
URL Patterns	Click the Add URL Pattern button to add rules. These rules restrict where the extension runs. Learn more about What Are URL Match Patterns? • hostname. Match the URL’s hostname. • pathname. Matches the URL’s path name. • hash. Matches the URL’s hashes. • search. Matches the search part of a URL. If you specify URLs in the action, make sure that at least one URL matches the pattern(s) you added.
Selectors	You can use selectors to restrict when the sidebar panel displays. • To add a selector, click the Add Selector button, click the green selector arrow, and then click on an area in the web page. The purple highlighted border indicates the selected area. • To remove a selector, click the $(...) drop-down, and then select Remove. If provided, make sure that at least one selector matches on page load. Otherwise, the extension will not run.

7. URL match patterns determine which extensions run on a site or call an API. You can add URL match patterns in the Advanced: Extra Permissions section if the extension performs actions on a target not included in the site match patterns or if it calls an API without using an Integration. To do so:

• Click the Site, Domain, HTTPS, or All URLs shortcut to insert URLs automatically.

• Click ABC Text > Remove to remove a site from the list.

Learn more about What Are URL Match Patterns?