Chrome扩展Content Script中Monaco Editor语言支持异常求助

问题场景 #

我在Chrome扩展的Content Script中集成Monaco Editor，初始配置后编辑器能正常运行，但完全没有语法高亮等语言支持；手动添加语言处理文件到manifest后，大部分语言正常，但JavaScript、HTML、Python等语言出现模块加载错误。

初始配置 #

manifest.json #

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "monaco-editor/min/vs/loader.js",
        "content.js",
        "monaco-editor/min/vs/editor/editor.main.nls.js",
        "monaco-editor/min/vs/editor/editor.main.js",
        "editor.js"
      ]
    }
]

content.js #

let root_path = chrome.runtime.getURL("")
require.config({
    paths: { vs: root_path + 'monaco-editor/min/vs' }
})

editor.js #

require(['vs/editor/editor.main'], function () {
    init_monaco_editor(...)
})

初始报错 #

编辑器运行正常，但无任何语言支持，控制台报错：

Uncaught ReferenceError: define is not defined
    at markdown.js:7:1

修改后的配置（手动添加语言文件） #

为了启用语言支持，我把所有语言处理文件手动添加到manifest的js列表中：

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "monaco-editor/min/vs/loader.js",
        "content.js",
        "monaco-editor/min/vs/editor/editor.main.nls.js",
        "monaco-editor/min/vs/editor/editor.main.js",
        // 省略其他语言文件
        "monaco-editor/min/vs/basic-languages/lua/lua.js",
        "monaco-editor/min/vs/basic-languages/markdown/markdown.js",
        "monaco-editor/min/vs/basic-languages/python/python.js",
        "monaco-editor/min/vs/basic-languages/javascript/javascript.js",
        // 省略其他语言文件
        "editor.js"
      ]
    }
]

新报错 #

大部分语言开始正常工作，但JavaScript、HTML、Python等语言出现以下错误：

Uncaught Error: Check dependency list! Synchronous require cannot resolve module 'vs/editor/editor.api'. This module has not been resolved completely yet.
    at u.synchronousRequire (loader.js:1477:23)
    at u._relativeRequire (loader.js:1460:29)
    at r (loader.js:1636:30)
    at python.js:8:999
    ...

解决方案 #

核心原因 #

部分语言模块（如JS、Python）依赖vs/editor/editor.api，但直接在manifest中注入语言文件会绕过AMD加载器的依赖管理，导致这些文件在editor.api完全解析前就被同步执行，触发加载冲突。

具体修复步骤 #

1. 移除manifest中手动添加的语言文件：恢复初始manifest配置，只保留核心加载文件，避免绕过AMD加载器。
2. 通过require动态加载语言模块：在editor.js中，等待editor.main加载完成后，按需加载需要的语言模块，确保依赖链正确：

修改后的editor.js：

require(['vs/editor/editor.main'], function () {
    // 按需加载单个语言
    require(['vs/basic-languages/python/python'], function() {
        init_monaco_editor(...); // 所有依赖就绪后初始化编辑器
    });

    // 或者批量加载多个语言
    const languagesToLoad = [
        'vs/basic-languages/python/python',
        'vs/basic-languages/javascript/javascript',
        'vs/basic-languages/html/html'
    ];
    require(languagesToLoad, function() {
        init_monaco_editor(...);
    });
})

3. 可选：隔离加载上下文：如果页面本身存在AMD加载器，可在content.js中配置隔离上下文，避免冲突：

let root_path = chrome.runtime.getURL("")
require.config({
    paths: { vs: root_path + 'monaco-editor/min/vs' },
    context: 'monaco-extension' // 独立上下文，避免与页面原有加载器冲突
})

内容的提问来源于stack exchange，提问作者rigiva