> ## 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.

---
id: 9a31f6eb-4de3-42ee-a7d6-4305112f302f
---

# no-restricted-globals

> Prevent usage of browser globals that are not available in the sandboxed web worker environment.

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`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#access-context-data)                                                                                                                                   | Access location information through context.                       |
| `history`                            | [`<Link>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link) or [`actions.openIframeModal()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#open-an-iframe-in-a-modal) | Navigate using the Link component or actions.                      |
| `navigator`                          | [`context`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#access-context-data) and [`actions`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#actions)                                    | Access comparable data and functionality with context and actions. |

## Examples

### importScripts()

Instead of using `importScripts()`:

```jsx theme={null}
// Incorrect
importScripts('helper.js');
window.importScripts('worker-script.js');
self.importScripts('lib.js');
```

Use ES modules:

```jsx theme={null}
import { helperFunction } from './helper.js';
import { Logger } from './lib.js';

const result = helperFunction();
```

### Event listeners

Instead of using global event listeners:

```jsx theme={null}
// Incorrect
addEventListener('click', handleClick);
window.addEventListener('load', handleLoad);
removeEventListener('click', handleClick);
```

Use React component event props:

```jsx theme={null}
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`:

```jsx theme={null}
// Incorrect
const path = location.pathname;
const url = window.location.href;

history.pushState({}, '', '/new-path');
history.back();
```

Use [`context`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#context) for location information:

```jsx theme={null}
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} />);
```

Use [`actions`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#actions) and [`<Link>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link) for navigation:

```jsx theme={null}
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`:

```jsx theme={null}
// Incorrect
const lang = navigator.language;
const ua = navigator.userAgent;
```

Use [`context`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#context) for locale information:

```jsx theme={null}
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:

```jsx wrap theme={null}
// 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;
}
```

## Related resources

* [UI extensions SDK overview](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk)
* [context object](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#context)
* [actions object](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#actions)