Documentation Index
Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
Use this file to discover all available pages before exploring further.
The no-restricted-globals rule prevents usage of browser globals that are not available in the sandboxed web worker environment.
Rule details
This rule blocks usage of the following globals:
importScripts(): a worker function that doesn’t work in the UI extensions environment.addEventListener() / removeEventListener(): global event listeners don’t work for DOM events.location: not available in workers.history: not available in workers.navigator: WorkerNavigator in workers, missing most browser Navigator APIs.
Instead of the above browser globals, use the following UI extension alternatives:
| Restricted Global | Alternative | Purpose |
|---|
importScripts('script.js') | import { module } from './script.js' | Use ES modules instead. |
addEventListener('click', handler) | <Button onClick={handler}> | Use React component event props. |
location | context | Access location information through context. |
history | <Link> or actions.openIframeModal() | Navigate using the Link component or actions. |
navigator | context and actions | Access comparable data and functionality with context and actions. |
Examples
importScripts()
Instead of using importScripts():
// Incorrect
importScripts('helper.js');
window.importScripts('worker-script.js');
self.importScripts('lib.js');
import { helperFunction } from './helper.js';
import { Logger } from './lib.js';
const result = helperFunction();
Event listeners
Instead of using global event listeners:
// Incorrect
addEventListener('click', handleClick);
window.addEventListener('load', handleLoad);
removeEventListener('click', handleClick);
import { Button, Input } from '@hubspot/ui-extensions';
const Extension = () => {
const handleClick = () => {
console.log('Button clicked');
};
const handleChange = (value) => {
console.log('Input changed:', value);
};
return (
<>
<Button onClick={handleClick}>Click Me</Button>
<Input onChange={handleChange} />
</>
);
};
location and history
Instead of accessing location or history:
// Incorrect
const path = location.pathname;
const url = window.location.href;
history.pushState({}, '', '/new-path');
history.back();
context for location information:
import { Text, hubspot } from '@hubspot/ui-extensions';
const Extension = ({ context }) => {
const currentLocation = context.location;
const portalId = context.portal.id;
return (
<Text>
Current path: {currentLocation} in portal {portalId}
</Text>
);
};
hubspot.extend(({ context }) => <Extension context={context} />);
actions and <Link> for navigation:
import { Button, Link, hubspot } from '@hubspot/ui-extensions';
const Extension = ({ actions }) => {
const navigate = () => {
actions.openIframeModal({ uri: 'https://example.com' });
};
return (
<>
<Button onClick={navigate}>View Site</Button>
<Link href="https://example.com">Click to Navigate</Link>
</>
);
};
hubspot.extend(({ actions }) => <Extension actions={actions} />);
navigator
In the sandboxed web worker, navigator is WorkerNavigator, not the full browser Navigator. Properties like navigator.language return worker-context values instead of the HubSpot user’s locale, and most other Navigator properties (clipboard, geolocation, mediaDevices, etc.) are missing entirely.
Instead of accessing navigator:
// Incorrect
const lang = navigator.language;
const ua = navigator.userAgent;
context for locale information:
import { Text, hubspot } from '@hubspot/ui-extensions';
const Extension = ({ context }) => {
const locale = context.user.locale;
return <Text>User locale: {locale}</Text>;
};
hubspot.extend(({ context }) => <Extension context={context} />);
Local variables
Local variables with these names are allowed:
// These are allowed because they're local variables, not global objects
const location = { pathname: '/custom' };
const history = { push: (path) => console.log(path) };
function parseLocation(location) {
return location.href;
}
