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


99

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

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

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

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


2
Почему расширение считает, что url ('image.jpg') является локальным? Разве вам не нужен полный путь?
Traingamer

Ответы:


70

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

Вам лучше заменить css на javascript. Из документов :

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

7
@Salem Потому что в противном случае вам нужно было бы жестко указать свой идентификатор расширения в css.
serg

Не хочу показаться глупым, но почему это проблема?
Салем

4
@Salem Было бы неудобно разрабатывать, так как распакованный id расширения и загруженный в галерею имеют разные идентификаторы. Это не конец света, просто неудобство и плохая практика, как, например, жесткое кодирование абсолютных путей к файлам в коде.
serg

Ах, имеет смысл. Я ценю его.
Салем

Поскольку это принятый ответ, вы должны увидеть комментарий к другому ответу, в котором ariera упомянула о включении web_accessible_resources в ваш файл манифеста для доступа к локальным шрифтам и изображениям.
Aryan Firouzian

254

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

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

4
Великий. Это отличное решение, которое действительно работает как для неупакованных, так и для упакованных расширений - спасибо, что поделились действительно отличным советом.
Ричард Холлис,

41
Спасибо, это именно то, что я искал. Просто сноска: помните, что вам нужно объявить свои ресурсы как web_accessible_resources в вашем файле манифеста (как описано здесь: code.google.com/chrome/extensions/… ). Иначе они не
загрузятся

2
Я понял одну вещь! Никогда не думайте, что принятый ответ - единственно правильное решение этого вопроса! Я боялся, что мне придется делать жесткий код, когда увидел принятый ответ, но, увидев ваш ответ, я сказал себе, что этот парень спас мне день !! ;-)
Рафик Мохаммед

Это почти всегда лучший способ сделать это. Чистый CSS против объединения Javascirpt и CSS вместе в ответе @serg. На мой взгляд, это должен быть принятый ответ.
Джереми Зерр

Ссылка @ ariera сейчас здесь: developer.chrome.com/extensions/manifest/…
Бен

42

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

По состоянию на август 2015 года (с использованием Chrome 45 и Manifest версии 2) текущая «лучшая практика» для ссылки на локальные изображения в расширениях Chrome заключается в следующем.

1) Ссылка на ресурс в вашем CSS, используя относительный путь к папке изображений вашего расширения:

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

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

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

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

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

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

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


22

Один из вариантов - преобразовать ваше изображение в base64:

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

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

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


1
Я предпочитаю этот вариант. Я не согласен с тем, что Google прав, предлагая вводить все изображения с помощью упомянутого выше подхода. Подход base64 также быстрее. +1 !!!
Skone

20

Мое решение.

С 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'); 
 }

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

ps Ваш manifest.json может отличаться от этого.


9

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

В файле .less я всегда устанавливаю переменную в начале:

@extensionId : ~"__MSG_@@extension_id__";

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

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

7

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

"images / pattern.png"

Ты можешь использовать

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


4

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

хром-расширение: // <extensionID>/<pathToFile>

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

...

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

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


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

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: // <extensionID>/ <pathToFile>')");


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.