When should I use the Global JS client extension type?

• You need a snippet on every page (analytics, feature flags, chat). • You want to load an ES module globally so other extensions can `import` from it. • You need control over ` ` attributes (async / defer / crossorigin).

How do I create a Global JS client extension?

1. Author your JS (usually as an ES module) and assemble it into the extension. 2. Set `url:` to the deployed path. 3. Set `scriptElementAttributes:` if you need attributes like `type: module`, `async: true`, etc.

What fields are required on a Global JS client extension?

url (string): Path to the JS file.

Global JS

Inject a JavaScript file into every page.

type: globalJS·Frontend·Liferay docs →

# description

Adds a `<script>` element to the page on every render. Useful for analytics tags, chat widgets, feature flags, or global helper modules that need to run on every page load. The `scriptElementAttributes` map lets you set arbitrary HTML attributes — commonly `type: module` for ES modules, `async: true` for non-blocking loads, or `crossorigin` for CORS-tagged scripts. Combined with `jsImportMapsEntry`, you can register a global JS module and have other Custom Element extensions `import` from it by bare specifier.

UI extensions that render on Liferay pages or modify page appearance.

# when to use

→You need a snippet on every page (analytics, feature flags, chat).
→You want to load an ES module globally so other extensions can `import` from it.
→You need control over `<script>` attributes (async / defer / crossorigin).

# how to use

01Author your JS (usually as an ES module) and assemble it into the extension.
02Set url: to the deployed path.
03Set scriptElementAttributes: if you need attributes like type: module, async: true, etc.

# required fields

field	type	description
`url`required	`string`	Path to the JS file.

# optional fields

field	type	description
`name`	`string`	Display name.
`scriptElementAttributes`	`map`	Attributes on the injected <script>.
`scope`	`enum(company, layout)`	Instance-wide vs site pages.
`scriptLocation`	`enum(head, bottom)`	Script placement when `scope: company`.

# example

client-extension.yaml

analytics:
    type: globalJS
    name: Analytics
    url: analytics.js
    scriptElementAttributes:
        type: module
        async: true

# more in frontend

cd ..scaffold this type in VS Code →