I’m creating a very simple browser extension. My code is below

manifest.json

{
    "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", "messages.js" ]
        }
    ]
}

background.js

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']
            });
        }
    }
});

content.js

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

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

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

messages.js

export const successMessage = 'Success!';

I keep getting this error:

I’m confused what I’m doing wrong. I’ve attempted to add a package.json file, but that didn’t seem to fix it. I’m not the strongest with JavaScript so would appreciate any input!