Chrome扩展中ES模块加载外部类报错，寻求解决方案

错误原因 #

你遇到的ReferenceError: ExternalClass is not defined核心问题在于Chrome的scripting.executeScript使用func参数注入函数时，只会序列化函数本身，不会携带它的依赖模块：

• processThatPage依赖的ExternalClass仅在扩展Service Worker的模块环境中有效，属于扩展内部的模块导入关系。
• 当函数被序列化为字符串注入到页面的MAIN world后，页面全局环境中不存在ExternalClass的定义，因此实例化时报错。

修复方案 #

改用files参数注入完整的模块文件，让页面环境加载完整的依赖链：

1. 修改automata.js的注入逻辑 #

替换executeScript的func参数为files，并声明注入的是模块：

async function pageLoadCheck(tabId, changeInfo, tab) {
    if (changeInfo.status === 'complete' && tab.url.startsWith("https://www.target.net/path"))
    {
        chrome.scripting.executeScript(
        {
            target: { tabId: tab.id },
            files: ["./lib/processpage.js"], // 直接注入模块文件
            world: "MAIN",
            type: "module" // 启用模块语法，支持内部import
        });
    }
}

2. 验证依赖路径 #

确认processpage.js中导入ExternalClass的路径正确（当前./externalclass.js是正确的，两个文件同属lib目录）。

3. 版本兼容性提醒 #

将模块注入到MAIN world需要Chrome 92及以上版本，若需兼容更低版本，可将externalclass.js和processpage.js打包为单个非模块的IIFE脚本后再注入。

额外说明 #

• Manifest V3中Service Worker设置"type": "module"是正确的，但模块的导入关系无法跨环境传递到页面。
• 使用files注入模块时，Chrome会自动处理依赖加载，确保ExternalClass在页面环境中可用。

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