Data Caching

BrowserWorker has two caching systems for storing and reusing data across actions within a task.

Element Cache ($key)

Cache DOM element references for reuse. Use the save option on find/wait actions, then reference with $key.

Save an Element

{ "find": ".submit-button", "options": { "save": "submitBtn" } }

Reuse the Element

{ "click": "$submitBtn" }

Element cache is in-memory only — references are valid within the current task and cleared when the task ends.

Example

{
  "actions": [
    { "openNewTab": "https://example.com" },
    { "find": "input[name=search]", "options": { "save": "searchInput" } },
    { "fill": ["$searchInput", "BrowserWorker"] },
    { "findByText": "Search", "options": { "selector": "button", "save": "searchBtn" } },
    { "click": "$searchBtn" }
  ]
}

Data Cache (${key})

Cache string/number values for interpolation in later actions. Use save on data extraction actions.

Save a Value

{ "getText": ".username", "options": { "save": "userName" } }

Interpolate in Actions

Use ${key} syntax to insert cached values:

{ "fill": ["input#greeting", "Hello ${userName}!"] }

Push to Array

Use push to build an array of values:

{ "getText": ".item-name", "options": { "push": "itemNames" } }

Retrieve Cached Data

{ "getSavedData": ["userName", "itemNames"] }

Returns:

{
  "userName": "John Doe",
  "itemNames": ["Item 1", "Item 2", "Item 3"]
}

Clear Cached Data

{ "clearSavedData": true }
{ "clearSavedData": ["userName"] }

Escape $

Use $$ for a literal dollar sign:

{ "fill": ["input.price", "$$19.99"] }

This types $19.99 without attempting data interpolation.

Cache Types Summary

Feature	Element Cache	Data Cache
Prefix	$key	${key}
Stores	DOM element references	String/number values
Save with	save on find/wait actions	save on getText/getAttribute/etc.
Persistence	In-memory (current task only)	chrome.storage.local (synced across tabs)
Array support	No	Yes (via push)
Interpolation	Used as selector (e.g., "click": "$btn")	Used in values (e.g., "Hello ${name}")

Example: Extract and Reuse Data

{
  "actions": [
    { "openNewTab": "https://example.com/product/123" },
    { "getText": "h1.product-name", "options": { "save": "productName" } },
    { "getText": ".price", "options": { "save": "productPrice" } },
    { "getAttribute": ["a.brand-link", "href"], "options": { "save": "brandUrl" } },
    { "open": "${brandUrl}" },
    { "waitForElement": ".brand-page" },
    { "fill": ["input.search", "${productName}"] },
    { "click": "#search-btn" },
    { "getSavedData": ["productName", "productPrice", "brandUrl"] }
  ]
}

Example: Collect Multiple Values in Loop

{
  "actions": [
    { "openNewTab": "https://example.com/products" },
    { "waitForElement": ".product" },
    {
      "loop": {
        "each": ".product",
        "do": [
          { "getText": "$this .name", "options": { "push": "names" } },
          { "getText": "$this .price", "options": { "push": "prices" } }
        ]
      }
    },
    { "getSavedData": ["names", "prices"] }
  ]
}