Skip to main content
Action blocking prevents agents from clicking buttons, filling forms, or interacting with specific elements on web pages. This is useful for protecting sensitive controls like delete buttons, payment forms, or administrative actions.

Overview

Action blocking rules target specific elements based on their properties (tag, ID, class, text content, etc.) and prevent agent interactions with those elements. Supported action types:
  • click - Blocks clicking on buttons, links, and other clickable elements
  • input - Blocks typing into input fields and text areas
  • change - Blocks changing select dropdowns and other form controls

Storage Structure

Action blocking rules are stored in chrome.storage.local under the key blockedActions:
[
  {
    "url": "https://app.example.com/settings",
    "title": "Account Settings",
    "actionType": "click",
    "elementTag": "BUTTON",
    "elementId": "delete-account-btn",
    "elementClass": "btn btn-danger",
    "elementText": "Delete Account",
    "elementType": "button",
    "elementName": null
  },
  {
    "url": "https://app.example.com/payment",
    "title": "Payment Method",
    "actionType": "input",
    "elementTag": "INPUT",
    "elementId": "credit-card-number",
    "elementClass": "form-control",
    "elementText": null,
    "elementType": "text",
    "elementName": "cardNumber"
  }
]

Rule Properties

PropertyTypeDescription
urlstring | nullPage URL where rule applies (null = all pages)
titlestring | nullPage title where rule applies (null = all pages)
actionTypestringType of action to block: click, input, or change
elementTagstringHTML tag name (e.g., BUTTON, INPUT, A)
elementIdstring | nullElement’s ID attribute
elementClassstring | nullElement’s class attribute
elementTextstring | nullElement’s text content (trimmed)
elementTypestring | nullInput type (e.g., text, submit, checkbox)
elementNamestring | nullElement’s name attribute
All element properties must match for a block to trigger. Set properties to null to ignore them in matching.

Implementation

Loading Rules

Rules are loaded on page load and updated when storage changes:
content.js:516-529
let blockedElements = [];

(async () => {
  const result = await chrome.storage.local.get(['blockedActions']);
  if (result.blockedActions) {
    blockedElements = result.blockedActions;
  }
})();

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local' && changes.blockedActions) {
    blockedElements = changes.blockedActions.newValue || [];
  }
});

Element Matching

The extension checks if an element matches a blocking rule:
content.js:531-547
function isElementBlocked(element, metadata) {
  const tag = element.tagName;
  const id = element.id || null;
  const className = element.className || null;
  const text = element.textContent?.trim() || null;
  const elementType = element.type || null;
  const elementName = element.name || null;

  return (
    metadata.elementTag === tag &&
    metadata.elementId === id &&
    metadata.elementClass === className &&
    (metadata.elementText === null || metadata.elementText === text) &&
    metadata.elementType === elementType &&
    metadata.elementName === elementName
  );
}

Click Blocking

Checks element and all parent elements up to document.body:
content.js:549-572
function shouldBlockClick(element) {
  const currentUrl = window.location.href;
  const currentTitle = document.title;
  let currentElement = element;
  
  while (currentElement && currentElement !== document.body) {
    for (const blockedMeta of blockedElements) {
      if (blockedMeta.actionType !== 'click') {
        continue;
      }
      if (blockedMeta.url && blockedMeta.url !== currentUrl) {
        continue;
      }
      if (blockedMeta.title && blockedMeta.title !== currentTitle) {
        continue;
      }
      if (isElementBlocked(currentElement, blockedMeta)) {
        return true;
      }
    }
    currentElement = currentElement.parentElement;
  }

  return false;
}

Input Blocking

Similar logic for input and change events:
content.js:574-597
function shouldBlockInput(element) {
  const currentUrl = window.location.href;
  const currentTitle = document.title;
  let currentElement = element;
  
  while (currentElement && currentElement !== document.body) {
    for (const blockedMeta of blockedElements) {
      if (blockedMeta.actionType !== 'input' && blockedMeta.actionType !== 'change') {
        continue;
      }
      if (blockedMeta.url && blockedMeta.url !== currentUrl) {
        continue;
      }
      if (blockedMeta.title && blockedMeta.title !== currentTitle) {
        continue;
      }
      if (isElementBlocked(currentElement, blockedMeta)) {
        return true;
      }
    }
    currentElement = currentElement.parentElement;
  }

  return false;
}

Event Listeners

Block events are registered when agent mode starts:
content.js:486-498
function startListening() {
  if (agentModeActive) {
    return;
  }
  agentModeActive = true;

  document.addEventListener('click', onBlockedElementClick, true);
  document.addEventListener('input', onBlockedElementInput, true);
  // ... other event listeners ...
}

Blocking Behavior

When a blocked action is attempted:
content.js:608-622
function onBlockedElementClick(e) {
  if (shouldBlockClick(e.target)) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    showBlockedFeedback(e.target);
    safeSendMessage({
      type: 'ACTION_BLOCKED',
      actionType: 'click',
      url: window.location.href,
      title: document.title
    });
    return false;
  }
}
1

Event Prevented

The click/input event is completely stopped using preventDefault() and stopImmediatePropagation().
2

Visual Feedback

The element briefly shows a red border to indicate it was blocked.
3

Agent Stopped

A message is sent to the background script, which stops the agent and shows a notification.

Visual Feedback

content.js:599-606
function showBlockedFeedback(element) {
  const originalBorder = element.style.border;
  element.style.border = "2px solid red";

  setTimeout(() => {
    element.style.border = originalBorder;
  }, 500);
}

Background Script Handling

When the background script receives an ACTION_BLOCKED message:
background.js:243-262
else if (message.type === 'ACTION_BLOCKED') {
  return onMessageAgentBlocked(message, tab);
}

function onMessageAgentBlocked(message, tab) {
  sendStopAgentMessage(tab.id);
  stopAgentTracking(tab.id, tab.groupId);
  showBadgeNotification('⛔', '#FF0000');
  showInPageNotification(
    tab.id,
    '⛔ Action Blocked',
    `Agent attempted to ${message.actionType} on a restricted element at ${getHostname(message.url)}`,
    'error'
  );
}

How to Create Rules

1

Open Dashboard

Click the ContextFort extension icon to open the dashboard.
2

Navigate to Action Blocking

Go to the “Action Blocking” section in the dashboard.
3

Add Rule

Click “Add Rule” and fill in the element properties you want to block.
4

Test Rule

Start an agent session and attempt the blocked action to verify it works.

Example Configurations

Block Delete Buttons

{
  "url": null,
  "title": null,
  "actionType": "click",
  "elementTag": "BUTTON",
  "elementId": null,
  "elementClass": null,
  "elementText": "Delete",
  "elementType": "button",
  "elementName": null
}
Blocks clicking any button with text “Delete” on any page.

Block Credit Card Input

{
  "url": "https://checkout.example.com",
  "title": null,
  "actionType": "input",
  "elementTag": "INPUT",
  "elementId": null,
  "elementClass": null,
  "elementText": null,
  "elementType": "text",
  "elementName": "cardNumber"
}
Prevents agents from typing into the credit card field on the checkout page.

Block All Submit Buttons on Admin Page

{
  "url": "https://admin.example.com",
  "title": null,
  "actionType": "click",
  "elementTag": "INPUT",
  "elementId": null,
  "elementClass": null,
  "elementText": null,
  "elementType": "submit",
  "elementName": null
}
Blocks all submit button clicks on the admin page.

Parent Element Matching

The blocking logic checks parent elements, so if you block a <div>, clicking any child element inside that div will also be blocked. Example: If you block this div:
<div class="delete-section">
  <p>Are you sure?</p>
  <button>Confirm Delete</button>
</div>
Clicking the <p> or <button> will also be blocked because they’re children of the blocked div.
Action blocking stops the agent but doesn’t prevent all interactions. Agents using browser automation tools might still interact with blocked elements through JavaScript execution.

Best Practices

  1. Be Specific: Use multiple properties to avoid false positives
  2. Test Thoroughly: Verify rules don’t block legitimate actions
  3. Use URL Filtering: Limit rules to specific pages when possible
  4. Document Rules: Keep notes on why each element is blocked
  5. Combine with Other Controls: Use alongside URL blocking and governance rules

Build docs developers (and LLMs) love