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
| Property | Type | Description |
|---|
url | string | null | Page URL where rule applies (null = all pages) |
title | string | null | Page title where rule applies (null = all pages) |
actionType | string | Type of action to block: click, input, or change |
elementTag | string | HTML tag name (e.g., BUTTON, INPUT, A) |
elementId | string | null | Element’s ID attribute |
elementClass | string | null | Element’s class attribute |
elementText | string | null | Element’s text content (trimmed) |
elementType | string | null | Input type (e.g., text, submit, checkbox) |
elementName | string | null | Element’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:
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:
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:
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;
}
Similar logic for input and change events:
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:
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:
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;
}
}
Event Prevented
The click/input event is completely stopped using preventDefault() and stopImmediatePropagation().
Visual Feedback
The element briefly shows a red border to indicate it was blocked.
Agent Stopped
A message is sent to the background script, which stops the agent and shows a notification.
Visual Feedback
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:
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
Open Dashboard
Click the ContextFort extension icon to open the dashboard.
Navigate to Action Blocking
Go to the “Action Blocking” section in the dashboard.
Add Rule
Click “Add Rule” and fill in the element properties you want to block.
Test Rule
Start an agent session and attempt the blocked action to verify it works.
Example Configurations
{
"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.
{
"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
- Be Specific: Use multiple properties to avoid false positives
- Test Thoroughly: Verify rules don’t block legitimate actions
- Use URL Filtering: Limit rules to specific pages when possible
- Document Rules: Keep notes on why each element is blocked
- Combine with Other Controls: Use alongside URL blocking and governance rules