How to use Monaco Editor in a browser extension?

[erosman]

Is it possible to import Monaco-editor as ESM directly in a browser extension environment, without the use of 3rd party packing scripts?

[tamayika]

I think it's not possible because current browser esm cannot import css.
If import attributes landed in browsers and monaco-editor load css with import attributes, you will be able to use monaco-editor without bundling tools.

[erosman]

I think, I should be able to work around CSS issue.

I was more concerned about having to include npm (or other) dependencies.

I am currently using CodeMirror 5 in my Firefox extension which can be used directly, but CodeMIrror 6 needs to be compiled to use.

I use VS Code for my own programming and was hoping to use it in my Firefox extension as well.

I would only need JavaScript & CSS processing for the editor.

[erosman]

@DavidSeptimus Firefox has a 4 MB size limit for each background script file. Monaco-editor wont be running as a background script, so there shouldn't be an issue.

[DavidSeptimus]

@erosman I hit this issue myself when I first tried releasing my own add-on. It's a JS file size limitation due to performance constraints of their internal JS linter for add-ons. It applies to any JS file bundled in your extension, not just background scripts.

It's been an ongoing discussion for years and it looks like they only recently raised the cap from 4MB to 5MB. As far as I'm aware, the compressed size doesn't matter in this instance since they need to decompress your extension to lint the JS anyhow.

[erosman]

@DavidSeptimus You are right. I tested it now on validator and although Firefox has no problem handling the files, addons-linter complains as the linter has issues parsing the file. I am going to talk with the dev team about it.

[DavidSeptimus]

Back to the topic of the actual file size of the TS worker:

• ESM: 11.2mb
• Minified AMD: 5.7mb

So it definitely needs to be chunked for firefox at the moment and I know my experience is limited to my knowledge of chunking with Vite + Rollup. I know I couldn't figure out how to force it to chunk a JS file from an npm dependency. Could be there's a way to make that work that I'm not aware of.

Alternatively, maybe there's a way to do it with Webpack, which, to my knowledge, offers greater control over code splitting. That said, I've never really done much with Webpack, so I couldn't speak too much to what's possible there without more investigation.

If someone more experienced with either bundler has any ideas beyond my original suggestion (which I use in production), please share (I'd love to be able to drop the TS worker from my codebase).

[erosman]

See also:

• Bundling Libraries filesize and addons-linter
• [Feature Request] Split typescript service-worker into separate modules
• Use LSP for TypeScript language features