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.
- Open the PixieBrix Page Editor.
- In the left pane, click Add > Sidebar Panel.
- Type a name in the Extension Name field.
- 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 at least one URL matches the pattern(s) you added. |
- In the Panel Refresh section, enter the following information:
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.) |
- 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 URL pattern matching rules. These rules restrict where the extension runs.Â
• 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. |
- 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.