开发浏览器扩展时出现"Cannot use import statement outside a module"错误的原因？

问题根源 #

Chrome扩展Manifest V3中，内容脚本（Content Scripts）默认不支持ES模块的import/export语法，同时你的manifest.json配置存在两处错误，导致模块语法无法被正确识别。

具体修复步骤 #

1. 修正manifest.json配置 #

• 移除background字段中的scripts属性：Manifest V3中service_worker和scripts不能同时使用，background逻辑只需要通过service_worker指定即可。
• 在content_scripts中添加"type": "module"，明确告诉浏览器这是ES模块脚本。

修正后的manifest.json：

{
    "manifest_version": 3,
    "name": "RedditReader",
    "version": "1.0",
    "permissions": [ "tabs", "activeTab", "scripting" ],
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },
    "content_scripts": [
        {
            "matches": [ "https://sizzler.com/" ],
            "js": [ "content.js" ],
            "type": "module"
        }
    ]
}

注意：messages.js会被content.js通过import引入，不需要在content_scripts的js数组中重复声明。

2. 修正background.js中的脚本注入逻辑 #

如果你需要通过chrome.scripting.executeScript动态注入content.js，必须在配置中指定type: 'module'，否则注入的脚本依然无法识别模块语法：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if(changeInfo.url) {
        console.log('URL UPDATED');
        if (changeInfo.status === 'complete' && tab.url.startsWith('https://sizzler.com/')) {
            chrome.scripting.executeScript({
                target: { tabId: tabId },
                files: ['content.js'],
                type: 'module' // 添加这一行
            });
        }
    }
});

3. 确保依赖文件存在 #

确认common.js文件存在于扩展根目录，并且导出了ShowConfirmation函数，否则会出现新的模块找不到错误。

额外说明 #

• 不要通过package.json来处理扩展的模块问题：Chrome扩展的模块规则由Manifest配置控制，和Node.js的package.json无关。
• 如果你不需要动态注入脚本，仅通过content_scripts配置加载content.js，那么background.js中的注入逻辑可以删除，避免重复加载脚本。

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