Расширения Google Chrome - не удается загрузить локальные изображения с помощью CSS

главная i18n поддержка это дает возможность ссылаться на ваше расширение в вашем CSS. Я храню свои изображения в папке изображений в расширении, поэтому ссылаюсь на активы в CSS следующим образом:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

есть много старых ответов и решений на этот вопрос.

по состоянию на август 2015 года (с использованием Chrome 45 и Манифеста версии 2), текущая "лучшая практика" для привязки к локальным изображениям в пределах Расширения Chrome это следующий подход.

1) Ссылка на актив в вашем CSS с помощью относительный путь в папку images вашего расширения:

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) добавить отдельный актив к web_accessible_resources раздел вашего расширения манифест.json file:

"web_accessible_resources": [
  "images/file.png"
]

Примечание: этот метод подходит для нескольких файлов, но не масштабируется хорошо со многими файлами.

вместо этого, лучше использовать поддержку Chrome для шаблоны в белый список всех файлов в данной директории:

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

использование этого подхода позволит вам быстро и без особых усилий использовать изображения в файле CSS вашего расширения Chrome с использованием изначально поддерживаемых методов.

одним из вариантов будет преобразование ваше изображение в base64:

а затем поместите данные прямо в ваш css, например:

body { background-image: url(data:image/png;base64,iVB...); }

при этом возможно, это не тот подход, который вы хотели бы использовать при регулярной разработке веб-страницы, Это отличный вариант из-за некоторых ограничений построения расширения Chrome.

мое решение.

С Menifest v2 вам нужно добавить web_accessible_resources в файл, а затем использовать chrome-extension://__MSG_@@extension_id__/images/pattern.png как url-адрес в вашем css-файле.

CSS:

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

Манифест.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

p. s. ваш манифест.json может выглядеть иначе, чем этот.

эта CSS-версия-работает только в расширения среды (приложение страницы, всплывающее окно, фон страницы, странице) а также content_scripts CSS файл.

In .меньше файла, я всегда устанавливаю переменную в начале:

@extensionId : ~"__MSG_@@extension_id__";

потом, если вы хотите сослаться на расширение местных ресурсов, таких как изображения, использовать:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

следует отметить, что в web_accessible_resources вы можете использовать подстановочные знаки. Так что вместо

"изображения/картины.png"

можно использовать

"изображения/*"

просто чтобы уточнить, согласно документация, каждый файл в расширении также доступен по абсолютному URL-адресу:

chrome-расширение://<extensionID>/<pathToFile>

Примечание <extensionID> - Это уникальный идентификатор, который система расширений генерирует для каждого расширения. Вы можете увидеть идентификаторы для всех загруженных расширений, перейдя по URL chrome: / / extensions. Этот <pathToFile> - это расположение файла в верхней папке расширения; это то же самое, что и относительный URL.

...

изменение фонового изображения в CSS:

#id { фонового изображения: url ("chrome-extension://<extensionID>/<pathToFile>");}

изменение фонового изображения в CSS через JavaScript:

документ.getElementById ('id').стиль.фоновое изображение = "url ('chrome-extension://<extensionID>/<pathToFile>')");

изменение фонового изображения в CSS через jQuery:

$("#id").css ("background-image", "url ('chrome-extension://<extensionID>/<pathToFile>')");

Если вы хотите протестировать локальное изображение на реальном сайте, вы можете запустить локальный веб-сервер и установить URL-адрес как http://127.0.0.1:8123/img.jpg на странице с помощью DevTools

есть разные способы запуска веб-сервера:

1. расширение для браузера "Web Server for Chrome" с определенной папкой https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

2. Если у вас есть затем python запускает embedded http server в выбранной папке

   python3-m http.сервер 8123 # python 3 version
   python-m SimpleHTTPServer 8123 # python 2 version

3. использовать готовый к производству сервер, как nginx,apache

также я попробовал флаг запуска chrome -- разрешить-файл-доступ-из-файлов но это не было работой для моей версии 52.0.2743.116, и это опасно и небезопасно. Документы, исходящие из любого места, локального или веб-сайта, по умолчанию не должны иметь доступа к локальным файлам:/// ресурсы.