清单 v3：使用 chrome.runtime.getURL 时 net::ERR_FILE_NOT_FOUND？

Question

我在使用 chrome.runtime.getURL 函数时遇到 net::ERR_FILE_NOT_FOUND 错误。

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>"]
        }
    ]
}

我在 constants.ts 文件中使用它，该文件不是服务工作者或内容脚本，只是一个随机文件：

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

但是当我尝试在 style 标签中显示它时，我没有得到 URL 而是一个错误：

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

我该如何解决？我什至尝试在新标签页中打开看起来像 chrome-extension://hhnlljbelglibjololeadifpojkopfk/src/images/1.jpg 的 URL，但它没有显示任何内容。

如何解决？

Answer 1

当你在CSS文件或代码行中使用它时，尝试这样使用它：

style={{ background: url('chrome-extension://__MSG_@@extension_id__/src/images/1.jpg') }}

有关详细信息，请参阅此 Chrome 开发者页面： https://developer.chrome.com/docs/extensions/reference/i18n/#overview-predefined

Answer 2

糟糕，正如 wOxxOm 所说，我的 copy-webpack-plugin 没有复制 images 文件夹。

我把我的webpack.config.js改成了复制的

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

清单 v3：使用 chrome.runtime.getURL 时 net::ERR_FILE_NOT_FOUND？

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

google-chrome-extension

manifest.json

chrome-extension-manifest-v3

manifest.json