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

у меня есть простое расширение Chrome, которое использует функцию сценария контента для изменения веб-сайта. Более конкретно,background-image указанного сайта.

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

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

вот и все, самый простой CSS... но это не сработает. Браузер не загружает изображение.

82
background-image css google-chrome-extension

9 ответов

URL вашего изображения должен выглядеть как chrome-extension://<EXTENSION_ID>/image.jpg

вам было бы лучше заменить css через javascript. От docs:

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
54

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

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

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

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

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

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

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

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

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

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

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

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

21

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

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

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

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

18

мое решение.

С 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 может выглядеть по-другому.

16

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

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

@extensionId : ~"__MSG_@@extension_id__";

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

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

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

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

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

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

7

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

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

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

...

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

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


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

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


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

$("#id").css ("фоновое изображение", "url ('chrome-extension://<extensionID>/<pathToFile>')");

3

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

существуют различные способы запуска веб-сервера:

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

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

    python3-M http.сервер 8123 # python 3 версия
    python-m SimpleHTTPServer 8123 # python 2 версия

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

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

0