feat(browser-only): Extensions support by kachurun · Pull Request #17122 · eclipse-theia/theia

kachurun · 2026-03-04T23:34:22Z

What it does

Add support for VS Code web extensions in browser-only deployments (pre-installed from /plugins/).
Fixes extension listing in the About dialog.

#12852

How to test

Install plugins as usual, build and run the browser-only example, then start the application.

Tested:

Themes (VS Code built-ins)
Icon themes (Material Icons)
Syntax highlighting (JS / TS / HTML / CSS)
IntelliSense (TypeScript, HTML)
Quick menus (with icons as well)
l10n
Extension list in the About dialog

Follow-ups

Extensions that rely on backend functionality may not work fully, as in browser-only mode, only the frontend plugin code is executed.
Extensions that don't have a browser target or contributions will not be copied at all.

VS Code extension localization (vscode.l10n) works. Localization bundles (e.g. bundle.l10n.<lang>.json) are loaded at runtime. However plugin manifests are generated with the default locale for this moment, so nls strings from manifests will not be localized.

How it works

Loading plugins in a browser-only environment requires the following:

Plugin code must be available as static assets so the frontend can access it (themes, icons, frontend JS code, etc.).
The frontend must receive a list of installed plugins.
The frontend must receive a manifest for each plugin.

In a normal Theia build these tasks are handled by the backend. To support browser-only deployments:

During the build step all plugins are copied into lib/frontend/hostedPlugin. Directory names are normalized to match the paths normally provided by the backend.
Each plugin manifest is localized in place to reduce the number of requests and startup time
A list.json file is generated with normalized manifests for all installed plugins.
The frontend loads this file and registers the plugins.

Apart from these changes, the plugin loading process remains unchanged.

A small refactoring was also performed:

Language suggestions are now loaded lazily instead of loading all languages at startup.
Themes are not loaded if they are already cached.
Fixed plugin context resolution. Extensions accessing the vscode API previously received the API bound to emptyPlugin, which caused issues such as broken localization. Extensions now receive the correct plugin context.
Extracted duplicated logic into shared helpers and constants in several places.

Breaking changes

This PR introduces breaking changes and requires careful review. If yes, the breaking changes section in the changelog has been updated.

Attribution

Review checklist

As an author, I have thoroughly tested my changes and carefully followed the review guidelines
User-facing text is internationalized using the nls service (for details, please see the Internationalization/Localization section in the Coding Guidelines)

Reminder for reviewers

As a reviewer, I agree to behave in accordance with the review guidelines

Removed double-click handler that caused folders to auto-open (eclipse-theia#15868)

kachurun · 2026-03-05T12:40:11Z

+import * as fs from '@theia/core/shared/fs-extra';
+import { ApplicationPackage } from '@theia/core/shared/@theia/application-package';


This is required by ESLint since @theia/core is now a dependency of application-manager

I would like to avoid a dependency from the build package to the runtime packages of Theia

kachurun · 2026-03-05T12:52:06Z

Changes here are needed to lazy-load snippets on demand instead of on Theia load. Otherwise, it loads all snippets of all languages from plugins on page load

Does that mean that the snippets are now "slower" when shown?

kachurun · 2026-03-05T12:58:07Z

+            const existing = this.themeService.getTheme(id!);
+
+            if (existing.id === id && existing.editorTheme) {
+                return;
+            }


Do not load the theme if it already exists in themeService. Otherwise, it loads all theme files each time Theia loads.

But the ThemeService is scoped to Theia? So whenever Theia loads we load here anyway. Do we load themes multiple times by accident? What are the steps to reproduce the issue?

kachurun · 2026-03-05T13:01:45Z

    return `${pluginId}/${Localization.transformKey(scope)}/${key}`;
 }

-// Localization logic for `package.json` entries


Helpers were just moved to plugin-package-localization.ts

kachurun · 2026-03-05T13:09:08Z

        if (contributions.themes && contributions.themes.length) {
-            const pending = {};
            for (const theme of contributions.themes) {
-                pushContribution(`themes.${theme.uri}`, () => this.monacoThemingService.register(theme, pending));


Pending was moved to a MonacoThemingService internal property instead of being drilled through all methods in it

kachurun · 2026-03-07T22:08:54Z

I am creating an Inversify DI container here during the build to load the classes we normally use with the Node backend at runtime

Conceptually I am fine with creating a DI container for the build

kachurun · 2026-03-07T22:13:22Z

In this file I do:

Find the closest package with theiaPluginsDir specified

Copy those plugins to dist/frontend/hostedPlugin

Localize package.json to skip package.nls.json loading at runtime

Create a DeployerPlugin shape from plugin/package.json

Normalize paths

Generate dist/frontend/hostedPlugin/list.json with all deployed plugins

Generally speaking this makes sense to me

kachurun · 2026-03-08T02:12:42Z

+    // If package contains localizable strings, load the translations and localize the manifest
+    if (hasLocalizableStrings(manifest)) {
+        const translations = await loadTranslations(pluginModel);
+        if (Object.keys(translations).length > 0) {
+            return localizeWithResolver(manifest, key => translations[key]);
+        }
+    }


Browser-only translations in package.json are already translated, so there is no reason to load them

kachurun · 2026-03-08T02:18:49Z

+        // do not start backend plugins for browser-only
+        if (environment.browserOnly.is()) {
+            return false;
+        }
+


Attempting to run backend plugins in a browser-only environment leads to an endless await from onWillSave (something like this), so files just never save. Maybe it's not the right place, but it solves the issue.

We could have another fix: backend plugins could be excluded from the very beginning in the browser-only plugin list, i.e. at build time.

kachurun · 2026-03-08T02:22:27Z

+    async localizeManifest(pluginPath: string, manifest: PluginPackage): Promise<PluginPackage> {
+        const locale = this.localizationProvider.getCurrentLanguage();
+        const translations = await loadPackageTranslations(pluginPath, locale);
+        return localizePackage(manifest, translations, (_, defaultVal) => defaultVal) as PluginPackage;
+    }


I can do this purely in the application manager where I use it, but then there will be a lot of duplicate code, but here everything is in place

kachurun · 2026-03-08T02:25:23Z

                    try {
                        const pluginModel = plg.model;
                        const pluginLifecycle = plg.lifecycle;
+                        const pluginFolder = FileUri.fsPath(pluginModel.packageUri);


file:///home/abc/... -> /home/abc/...

kachurun · 2026-03-08T02:26:58Z

Code moved from packages/plugin-ext/src/hosted/node/hosted-plugin-localization-service.ts so I kept Original Copyright

kachurun · 2026-03-08T02:28:34Z

Code also moved from packages/plugin-ext/src/hosted/node/plugin-reader.ts so copyright is original, added only .mjs extension in list, just in case

kachurun · 2026-03-08T02:37:23Z

+                const commandDef = typeof command === 'string' ? { id: command } : command;
+
+                if (handler && commandIsDeclaredInPackage(commandDef.id, plugin.rawModel)) {
+                    return commandRegistry.registerHandler(commandDef.id, handler, thisArg);


To simplify the code and fix the issue when commands are registered twice and warn

Seems like a drive-by fix? Could also be a separate PR

kachurun · 2026-03-08T02:39:13Z

+            const ownURI = new Endpoint().getRestUrl();
+            const fullURI = ownURI.parent.resolve(PluginPackage.toPluginUrl(plugin.model, ''));


browser-only: Allow serving static files from a base path other than /, for example /ide/bundle.js, /ide/hostedPlugin/*, etc.

kachurun · 2026-03-08T02:41:05Z

+        const packageRoot = (URI.parse(plugin.model.packageUri).path || plugin.model.packageUri).replace(/\\/g, '/');
+        const absolutePath = normalize(arg.startsWith('/') ? arg : resolve(packageRoot, arg));
+        const relativePath = relative(packageRoot, absolutePath);
+
+        return PluginPackage.toPluginUrl(plugin.model, relativePath);


To resolve icons relative to the plugin package for any environment and with a non-standard base path for browser-only

kachurun · 2026-03-08T02:42:34Z

This was completely broken in a browser-only environment, so any plugins that implement quick open menus just fail

kachurun · 2026-03-08T02:43:48Z

Plugins can't start if terminals are not initialized, so we must have these mocks

kachurun · 2026-03-09T01:15:56Z

+    get: (_target: object, name: ('_empty' | keyof typeof theia)) => {
+        const plugin = pluginsModulesNames.get(ctx.frontendModuleName);

-        if (!defaultApi) {
-            defaultApi = apiFactory(emptyPlugin);
+        const api = plugin
+            ? pluginsApiImpl.get(plugin.model.id)
+            : (defaultApi ?? (defaultApi = apiFactory(emptyPlugin)));
+
+        // require('vscode') resolves to `theia._empty` return full API so plugin gets the whole object
+        if (name === '_empty') {
+            return api;
        }

-        return defaultApi;
+        // Direct access (theia.l10n, theia.commands, etc.) return that property from the API
+        return api![name];
    }
 };


This fixes l10n in plugins and potentially several other issues, because plugins now receive the correct plugin context in browser-only environments.
The previous implementation did not make much sense because name was always '_empty' rather than the actual plugin name. The plugin name can be derived from ctx.frontendModuleName instead.
This also makes loading a specific key, rather than the entire API object, work correctly.

kachurun · 2026-03-09T01:19:03Z

Localization should now basically work. I verified the mechanism using an English → English override: bundle.l10n..json is loaded and parsed, the correct plugin context is resolved, and overridden strings are returned. This should work for other languages as well. However, plugin manifests are not localized yet, so the practical impact is currently limited.

sdirix · 2026-03-09T12:30:57Z

@kachurun You are still working on this PR. Can you indicate in which state this PR is, e.g. draft, functionally complete, open-issues, polished and ready to merge etc., and correspondingly what level of review you are currently looking for?

kachurun · 2026-03-09T13:03:36Z

@sdirix
No, I'm done with it, removed the WIP label, and commented on each file in the PR to explain why I made each change. It's ready for testing and review 👍

…into browser-only-ext

kachurun · 2026-03-18T00:05:21Z

@sdirix I have tested it in my project for a week, and it works great, so it's ready for a complete review. I'm not going to change anything in the code. The only problems I have are not related to Theia. It's just that the TS LSP extension works in partial mode in a browser-only environment, but it doesn't work anywhere: https://code.visualstudio.com/docs/nodejs/working-with-javascript#_partial-intellisense-mode

sdirix

Thank you for this contribution. I tested it on my machine and it works! It's a great achievement to bring this into Theia Browser-Only and it's even convenient to use. Good job!

Generally speaking it would be good to reduce the PR to the bare minimum of what is required to bring the feature in. Any drive-by fix which is not related to the plugins itself should be moved out into a separate PR. I already commented two of these, but I think there are more like the command popup not working. These could be nice small PRs which are easy to review and would already be in the Theia codebase if opened separately.

This leaves two major points for me:

If the changes were mainly restricted to browser-only code, then I would have an easier time to approve. However as many parts of a core feature of Theia are touched, this will take more time to review. It would be good to restrict these changes to the bare minimum. For example it's unclear to me whether we really need to remove the deprecated field for this change.
I am unsure about adding Theia runtime packages as dependency to the dev package. At the moment we already have dependencies the other way around, with this they become fully intertwined. To me it seems it would be cleaner to extract the logic into an own package which is consumed by both. However of course this would increase the scope of the PR which is what I argued against before.

@msujew Do you have an opinion on the plugin discovery mechanism and how it should be consumed as a build step for browser-only?

sdirix · 2026-03-18T09:50:46Z

+    "@theia/core": "1.69.0",
    "@babel/core": "^7.10.0",
    "@babel/plugin-transform-classes": "^7.10.0",
    "@babel/plugin-transform-runtime": "^7.10.0",
    "@babel/preset-env": "^7.10.0",
-    "@theia/application-package": "1.69.0",
+    "@theia/plugin-ext": "1.69.0",
+    "@theia/plugin-ext-vscode": "1.69.0",


Major architectural concern. @theia/application-manager is a low-level dev-package that previously only depended on other dev packages. Adding @theia/core, @theia/plugin-ext, and @theia/plugin-ext-vscode as dependencies pulls in the entire runtime dependency tree into the build tool.

Conceptually this is not clean. I understand why this was done, to bring in the plugin detection logic from runtime to build time, but this needs to be done more cleanly. For example by extracting the logic into an own package which is then reused.

sdirix · 2026-03-18T09:51:04Z

+/** Frontend (browser / WebWorker) plugin host id */
+export const PLUGIN_HOST_FRONTEND = 'frontend';
+/** Identifier for where a plugin runs (RPC/messaging) */
+export type PluginHost = typeof PLUGIN_HOST_FRONTEND | typeof PLUGIN_HOST_BACKEND;


The PluginHost type was previously 'frontend' | string (in hosted/common/hosted-plugin.ts, link). Now it's narrowed to 'frontend' | 'main'.

This is not sufficient as we also support headless plugins. So it should be at minimum frontend, main, headless. In theory we could even support more hosts, so I think having an explicit string would make sense. main is also not an ideal word, it should likely be expressing that it's tied to the frontend.

sdirix · 2026-03-18T09:51:06Z

+export class PluginScannerResolverImpl implements PluginScannerResolver {
+    private readonly scannersByType = new Map<string, PluginScanner>();
+
+    constructor(@multiInject(PluginScanner) scanners: PluginScanner[]) {


We don't use multiinject in Theia, we use Theia's utility ContributionProvider.

Usually we also avoid constructor injection and use field injection instead.

sdirix · 2026-03-18T09:51:07Z

+    private loadPromise: Promise<void> | undefined;
+
+    constructor(
+        @inject(BrowserOnlyPluginsProvider) protected readonly pluginsProvider: BrowserOnlyPluginsProvider


sdirix · 2026-03-18T09:51:32Z

+function findInMap(map: Record<string, string> | undefined, key: string): string | undefined {
+    if (!map) {return undefined; }
+    if (key in map) {return map[key]; }
+    const found = Object.keys(map).find(k => k.toLowerCase() === key.toLowerCase());
+    return found ? map[found] : undefined;
+}


This changes localization behavior for all plugins, not just browser-only as previously we were not case insensitive.

sdirix · 2026-03-20T16:17:19Z

Does that mean that the snippets are now "slower" when shown?

sdirix · 2026-03-20T16:19:03Z

+            const existing = this.themeService.getTheme(id!);
+
+            if (existing.id === id && existing.editorTheme) {
+                return;
+            }


But the ThemeService is scoped to Theia? So whenever Theia loads we load here anyway. Do we load themes multiple times by accident? What are the steps to reproduce the issue?

sdirix · 2026-03-20T16:22:54Z

                    const plugin: Plugin = {
                        pluginPath: pluginModel.entryPoint.frontend!,
-                        pluginFolder: pluginModel.packagePath,
+                        pluginFolder: pluginModel.packageUri,


The final removal of packagePath and the consistent use of packageUri must be mentioned in the breaking changes of the changelog.

sdirix · 2026-03-20T16:24:38Z

+        // do not start backend plugins for browser-only
+        if (environment.browserOnly.is()) {
+            return false;
+        }
+


We could have another fix: backend plugins could be excluded from the very beginning in the browser-only plugin list, i.e. at build time.

sdirix · 2026-03-20T16:28:48Z

+                const commandDef = typeof command === 'string' ? { id: command } : command;
+
+                if (handler && commandIsDeclaredInPackage(commandDef.id, plugin.rawModel)) {
+                    return commandRegistry.registerHandler(commandDef.id, handler, thisArg);


Seems like a drive-by fix? Could also be a separate PR

kachurun · 2026-03-30T00:55:40Z

@sdirix Thank you for the detailed review! I will prepare the necessary changes in the chain of separated PRs.

These ones are ready and could be reviewed or merged:

Prepare plugins:
#17258

Fix mount host:
#17253

kachurun added 7 commits June 24, 2025 10:44

fix: fixed folder toggle bug on fast click (eclipse-theia#15868)

d7181d2

Removed double-click handler that caused folders to auto-open (eclipse-theia#15868)

Merge remote-tracking branch 'upstream/master'

7fa2600

Fixes after review

706e332

Merge remote-tracking branch 'upstream/master'

744de70

Merge remote-tracking branch 'upstream/master'

4b0647a

Merge remote-tracking branch 'upstream/master'

bce7e5c

Merge remote-tracking branch 'upstream/master'

71c263d

github-project-automation Bot added this to PR Backlog Mar 4, 2026

github-project-automation Bot moved this to Waiting on reviewers in PR Backlog Mar 4, 2026

kachurun force-pushed the browser-only-ext branch from 6fbef76 to d33cf95 Compare March 4, 2026 23:54

feat(browser-only): built-in vscode extension support

13215ba

kachurun force-pushed the browser-only-ext branch from 9dfa9b7 to 13215ba Compare March 5, 2026 00:01

Merge remote-tracking branch 'upstream/master' into browser-only-ext

ee3dbd4

kachurun commented Mar 5, 2026

View reviewed changes

Comment thread examples/browser-only/package.json Outdated

kachurun commented Mar 5, 2026

View reviewed changes

Comment thread packages/filesystem/src/browser/read-resource.ts Outdated

kachurun commented Mar 5, 2026

View reviewed changes

kachurun mentioned this pull request Mar 5, 2026

Browser-Only: Run Theia without a backend #12852

Open

21 tasks

sdirix self-requested a review March 5, 2026 13:31

kachurun force-pushed the browser-only-ext branch 2 times, most recently from 02d4bfa to 12470af Compare March 5, 2026 20:52

kachurun changed the title ~~feat(browser-only): Extensions support~~ WIP: feat(browser-only): Extensions support Mar 5, 2026

kachurun force-pushed the browser-only-ext branch 2 times, most recently from d6c51cd to 1bfa4af Compare March 7, 2026 15:31

kachurun changed the title ~~WIP: feat(browser-only): Extensions support~~ feat(browser-only): Extensions support Mar 7, 2026

kachurun commented Mar 7, 2026

View reviewed changes

kachurun commented Mar 8, 2026

View reviewed changes

fix: l10n

107e862

kachurun commented Mar 9, 2026

View reviewed changes

kachurun added 4 commits March 9, 2026 10:47

feat(browser-only): Complete support for VSCode/Theia plugins

3dc4f2e

Merge branch 'master' into browser-only-ext

cf77e06

Merge branch 'browser-only-ext' of https://github.com/kachurun/theia …

12d996b

…into browser-only-ext

Merge remote-tracking branch 'upstream/master' into browser-only-ext

9d3c460

sdirix requested changes Mar 20, 2026

View reviewed changes

github-project-automation Bot moved this from Waiting on reviewers to Waiting on author in PR Backlog Mar 20, 2026

ndoschek mentioned this pull request Mar 23, 2026

Endgame Plan for 1.70.x #17201

Closed

25 tasks

Merge remote-tracking branch 'upstream/master' into browser-only-ext

554c784

kachurun closed this Mar 29, 2026

github-project-automation Bot moved this from Waiting on author to Done in PR Backlog Mar 29, 2026

kachurun mentioned this pull request Mar 30, 2026

feat(browser-only): Prepare plugins on build step #17258

Open

3 tasks

kachurun mentioned this pull request Mar 30, 2026

fix: Fix theia mount host #17253

Open

3 tasks

		import * as fs from '@theia/core/shared/fs-extra';
		import { ApplicationPackage } from '@theia/core/shared/@theia/application-package';

		const ownURI = new Endpoint().getRestUrl();
		const fullURI = ownURI.parent.resolve(PluginPackage.toPluginUrl(plugin.model, ''));

Conversation

kachurun commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What it does

How to test

Follow-ups

Breaking changes

Attribution

Review checklist

Reminder for reviewers

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kachurun Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kachurun Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kachurun Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdirix commented Mar 9, 2026

Uh oh!

kachurun commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kachurun commented Mar 18, 2026

Uh oh!

kachurun commented Mar 4, 2026 •

edited

Loading

kachurun Mar 5, 2026 •

edited

Loading

kachurun Mar 5, 2026 •

edited

Loading

kachurun Mar 8, 2026 •

edited

Loading

kachurun commented Mar 9, 2026 •

edited

Loading

sdirix left a comment •

edited

Loading

sdirix Mar 18, 2026 •

edited

Loading