内容脚本中的Chrome和Firefox浏览器扩展CSS图像URL

Question

如何在单个CSS文件中管理Chrome和Firefox浏览器扩展程序内容脚本的背景图像URL？

Firefox使用常规的相对URL作为：

background-image: url('/images/my-photo.jpg');

Chrome使用邮件扩展名ID URL作为

background-image: url('chrome-extension://__MSG_@@extension_id__/images/my-photo.jpg');

这会给开发带来不便，因为我需要为每个浏览器创建不同的CSS文件。

现在我将SASS / SCSS变量用作：

$imagePath: '/images/';
$imagePath: 'chrome-extension://__MSG_@@extension_id__/images/';

background-image: url('#{$imagePath}my-photo.jpg');

然后我复制文件，删除一个变量并编译文件。

但是使用不同的文件不是很舒服，是否有任何想法如何在单个CSS文件上工作并使它在两种浏览器中都能使用？

我对使用base64网址不感兴趣。

我当时想也许将CSS本机变量与媒体查询一起使用，该查询会将变量覆盖到特定的浏览器，但是我不确定如何。

例如这样的东西：

:root {
    --imagePath: '/images/';
}

@media chrome(){
    --imagePath: 'chrome-extension://__MSG_@@extension_id__/images/';
}

--imageURL: var(--imagePath)+'my-photo.jpg';
background-image: url(var(--imageURL));