Почему я получаю ошибку “Невозможно использовать инструкцию импорта вне модуля” в своем браузерном расширении?

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

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if(changeInfo.url) {
        console.log('URL ОБНОВЛЕН');
        if (changeInfo.status === 'complete' && tab.url.startsWith('https://sizzler.com/')) {
            chrome.scripting.executeScript({
                target: { tabId: tabId },
                files: ['content.js']
            });
        }
    }
});

import { ShowConfirmation } from './common.js';
import { successMessage } from './messages.js';

const GetSuccessMessage = () => {
    return successMessage;
};

if (document.readyState !== 'loading') {
    const successMessage = GetSuccessMessage();
    if (ShowConfirmation()) {
       console.log(successMessage);
    }
}

export const successMessage="Успех!";

Ответ

Ошибка "Cannot use import statement outside a module" возникает, когда вы пытаетесь использовать синтаксис импорта в файле JavaScript, который не распознается как модуль. Для решения этой проблемы в вашем браузерном расширении необходимо внести некоторые изменения в файл manifest.json и в вашем JavaScript-коде.

1. Измените manifest.json

В вашем manifest.json убедитесь, что вы правильно указываете тип скрипта. У вас указано:

"background": {
    "service_worker": "background.js",
    "scripts":  "content.js",
    "type": "module"
},

Необходимо удалить поле scripts и указать, что background.js является модулем. Так как background.js уже устанавливает тип service_worker, поле type не нужно. Правильная конфигурация будет выглядеть так:

"background": {
    "service_worker": "background.js"
},

2. Убедитесь, что контентный скрипт загружается как модуль

Для контентного скрипта content.js у вас уже задан тип module, что правильно:

"content_scripts": [
    {
        "matches": [ "https://sizzler.com/" ],
        "js": [ "content.js" ],
        "type": "module"
    }
]

3. Используйте правильный синтаксис импорта

Убедитесь, что ваши файлы, из которых вы импортируете модули, находятся в том же каталоге или указывайте правильный путь. Если файл common.js должен импортироваться, убедитесь, что он существует и доступен.

Пример кода

Вот как должен выглядеть ваш manifest.json после внесения изменений:

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

4. Проверьте выполнение кода

Теперь, когда вы сделали все изменения, убедитесь, что вы перезагрузили расширение в браузере (в Chrome: перейдите в chrome://extensions/ и нажмите кнопку "Перезагрузить" для вашего расширения).

Заключение

Ошибки с импортом часто возникают из-за неправильного указания модуля или его тех же путей. Убедитесь, что все импорты корректны, и ваши файлы находятся в нужных местах. После внесения указанных изменений ошибка должна исчезнуть. Если ошибка все еще появляется, проверьте консоль разработчика на наличие других сообщений об ошибках, которые могут указывать на дополнительные проблемы.