- What is Page State?
- Page State Structure
- Page State Bricks
- Isolating State with Namespaces
- Merge Strategy
- Example: Replace State
- Example: Shallow Merge
- Example: Deep Merge
- Common Patterns
- Run Mod Once
- Show Action Information in Sidebar Panel
- Append to an Array
What is Page State?
Page State is used to track data for reuse across mods and runs of a single mod on the page. Common uses of Page State are:
- Track if an mod has already run on the page, e.g., to prevent it from running again
- Collect information from actions to show in a side panel
- Pass context to a page opened with the Open New Tab brick (also see )Multi-Page Automation
Page State Structure
The Page State is an object with properties and values. A value can be of any type, including nested objects and arrays.
Page State Bricks
There are two bricks for working with Page State:
Isolating State with Namespaces
- Shared: can be access by any mod
- Mod Group(default): mods in the exact mod. If the mod is not part of a mod group, it behaves the same as shared. Use this to coordinate across mods
- Mod: use this to track state for a single mod across runs
namespace field controls which mods have access to the Page State. The primary purpose of namespace is to prevent other mods from overwriting/corrupting the page state used by your mod
mergeStrategy of the “Set shared page state” brick controls how the values provided impact existing values:
- Shallow (default): properties provided overwrite existing properties. Other properties are preserved
- Replace: replace the page state with the new values
- Deep: merge properties, including nested objects. For arrays, items are merged pairwise. If two values are different types, the value is replaced
Example: Replace State
hasRun: false message: "Some text"
# The message field is removed, because the whole state is replaces hasRun: true
Example: Shallow Merge
hasRun: false message: "Some text"
hasRun: true # The `message` key is not modified message: "Some text"
Example: Deep Merge
hasRun: false exampleObject: key1: "Text value"
exampleObject: key2: "Key from @data object"
hasRun: false exampleObject: key1: "Text value" # key2 is deep merged into exampleObject key2: "Key from @data object"
Run Mod Once
To run an mod at most once, use the page state to track if the mod has been run.
In this example, we’ll set a
hasExtensionRun property on the mod’s state.
Use the Get shared page state brick to get the mod state. NOTE: use the “extension” namespace to isolate the state to this trigger
Cancel the trigger if the mod has already been run by passing
@state.hasExtensionRun for the condition:
When the mod has run, set the shared page state. Be sure to use the same namespace as used in the “Get shared page state” step:
Show Action Information in Sidebar Panel
This pattern uses two starter bricks:
- A context menu/button/trigger to fetch information
- A sidebar panel to show the information
In the first mod, fetch some data and store the data in the shared Page State with the “Set shared page state brick”. Optional use the “Show Sidebar” brick to automatically open the PixieBrix sidebar:
In the Sidebar Panel mod, use the “Get shared page state” brick to get the state from the button:
In the panel, handle the case where the state has not been set yet. For example, use if/else tags in the template:
Append to an Array
In this pattern, the state will have an
arrayExample property that will track our array.
Get the shared page state
Use the jq brick to append to the array:
(.state.arrayExample // ) + [.data]
//  is used to handle the initial state of
arrayExample, where arrayExample is undefined because it has not been saved yet
Set the shared page state using the outputKey of the previous step: