Manifest v3: net::ERR_FILE_NOT_FOUND when using chrome.runtime.getURL?

Question

I get a net::ERR_FILE_NOT_FOUND error when using chrome.runtime.getURL function.

manifest.json

{
    "name": "Dummy",
    "manifest_version": 3,
    "version": "1.0.0",
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "action": {
        "default_icon": {
            "16": "icon16.png",
            "48": "icon48.png"
        }
    },
    "permissions": ["activeTab", "storage", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["src/images/*.jpg"],
            "matches": ["<all_urls>"]
        }
    ]
}

I'm using it in a constants.ts file which is not a service worker or content script, just a random file:

chrome.runtime.getURL('src/images/1.jpg')

But I don't get a URL but rather an error when I try to display it in a style tag:

style={{ background: `url(${chrome.runtime.getURL('src/images/1.jpg')})` }}

How do I solve it? I even tried opening the URL which looks like chrome-extension://hhnlljbelglibjololeadifpojkopfk/src/images/1.jpg in a new tab but it doesn't show anything.

How do I solve it?

Answer 1

Oopsie, as wOxxOm said, my copy-webpack-plugin wasn't copying images folder.

I changed my webpack.config.js to copy it.

plugins: [
        new CopyPlugin({
            patterns: [
                { from: 'public', to: '.' },
                { from: 'src/images', to: 'images/' },
            ],
        }),
    ],