How to create and add extension to theia IDE?

Hi,

I follow the example https://www.theia-ide.org/doc/Composing_Applications.html to create my own theia IDE. It is fine.
Then I want to add an extension to it but really don’t know how to do.

I follow the example https://www.theia-ide.org/doc/Authoring_Extensions.html and copy the dependencies from package.json to my own theia IDE’s package.json, then using yarn to install the dependencies, it shows a lot of error message…

Does anyone know how to create an extension and add to IDE ? Thanks!

Error message:
“FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory”

Thanks,
Jack

[original thread by lihomahowareyou]

could you try to use

export NODE_OPTIONS=--max_old_space_size=4096

before running yarn. Also if you’re trying inside a container/VM maybe you need to increase the memory of this container/VM

[lihomahowareyou]

thx!
As I am very confuse on create and use an extension to my-app.
Is it simply merge the package.json of hello-world-extension to my-app then rebuild with yarn?

[lihomahowareyou]

I find what is the problem, I should add the extension to package.json and put the extension folder to node_modules folder, thx!!

hello, I want to know is there any instruction about where the custom extension should be put based on my own custom IDE, the article https://eclipsesource.com/blogs/2019/10/17/how-to-add-extensions-and-plugins-to-eclipse-theia/ shows little detail about it.

You should follow https://theia-ide.org/docs/authoring_extensions/ to develop an extension. It provides your with the proper setup. If you want to publish your extension and consume in the standalone product later then you should follow: https://theia-ide.org/docs/composing_applications/

Firstly, I clone, build and run theia from the sources the option 3 in this article https://eclipsesource.com/blogs/2019/09/25/how-to-launch-eclipse-theia/
Then, I follow https://theia-ide.org/docs/authoring_extensions/ to develop an extension(say hello).
Now,. i tried to add the sayhello extension in the browser example of theia. I added dependency of sayhello extension with its path in my mac in package.json of brower example of theia.
However, I don’t find sayhello function in browser example when I run it.
Is there any requirment of the path of sayhello extension? or other reason?
Thanks a lot for your relply!

Did you rebuild the application?

yeah…

Could you share the repo please?


thanks a lot for your time

I see quite a few issues with the repo you have linked.

  1. You should use yarn instead of npm. I can see a package-lock.json under version control, so please use yarn. npm is not supported.
  2. This is not the preferred way to develop an extension but well, it could work. But then you have to update the yarn workspace config in your root package.json and include your sayhello folder. Make the changes here.
  3. The structure of your sayhello folder is wrong. Are you aware of the Authoring Theia Extensions documentation? Please read a bit about that.

also, when i run electron of theia source . i found that there is no menu layout, such as file, edit, help, ect.


i am fresh for theia, so have many problems.

It’s a macOS thing. The application menu is not contained in the shell of the application.

Still have problem:(
my steps are as follows:

  1. after i generate hello-world extension using generator, i put the extension in the root of theia source
  2. i update root package.json, add hello-world extension in the workspace
  3. i update package.json of browser-app in example folder, add hello-world extension in the dependency, like “hello-world extension” : “0.0.0”
  4. i run yarn in root, but still return that “can’t find extention in npm registry”
    thanks a lot!

@RichardZeyu the error you’re getting is due to the yarn looking at the npm registry to get your extension and not your local-extension that you’ve added. You should use yarn workspaces to fix the issue and so that your new extension is now linked and discoverable.

thanks, i have understood. It works!

1 Like

I followed the below steps to add a widget (similar to what Richard mentioned). yarn install happens without any issues but when I try “yarn start:electron” from root folder, the electron app opens with only loading symbol

Steps followed

  1. Created a sample extension using yo theia-extension generator
  2. Copied only the extension workspace (leaving electron and browser) to the Theia root directory
  3. Added the new extension’s workspace name to the root package.json file
  4. Updated the package.json of the electron-app in example folder to have the new extension as dependency
  5. Ran yarn in the root folder of Theia - getting completed without any issue
  6. Ran yarn “start:electron” in the root folder of Theia - executes without issue and electron is opened. But it is struck in the loading screen

Please let me know if I am missing anything here.

@Sreeranjani Do I understand you correct in that you’re copying your Theia extension to the Theia repo? There’s no real benefit in doing that, so you should stick to what the yeoman generator generates.

For the actual issue itself: There are probably more reasons for the Theia frontend to fail loading than atoms in the universe. Can you open the Chrome dev-tools console (Ctrl+Alt+I) and see what went wrong exactly?

Thanks for reply.

My requirement is to add functionality to the “theia-cpp-extension” IDE available at this location. Since this has folder structure similar to Theia, I was explaining with Theia in previous message.

I am copying the extension that I created to the root folder of the Theia CPP extension and following the steps mentioned in the previous message.


Please let me know the steps to add my own extension to existing Theia IDE such as Theia CPP.

I am using electron app. Please let me know way to debug in this