Расширения браузера Chrome и Firefox URL-адреса изображений CSS в сценариях содержимого - PullRequest
Новая
       11

Расширения браузера Chrome и Firefox URL-адреса изображений CSS в сценариях содержимого

0 голосов
/ 18 декабря 2018

как мне управлять URL-адресами фоновых изображений для скрипта содержимого расширений браузера Chrome и Firefox в одном файле CSS, пожалуйста?

Firefox использует обычный относительный URL-адрес как: 

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

Chromeиспользует 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-файл и сделать так, чтобы он работал для обоих браузеров, пожалуйста?

Меня не интересует использование URL-адресов 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));
...