Я разрабатываю расширение chrome для google, и я сталкиваюсь с проблемой относительного пути. Если я дам относительный путь к изображению и открою плагин на определенной странице, он будет искать это изображение на пути к веб-сайту, а не в расширении.
Любые идеи?
Если вы используете CSS на своих страницах расширения (background, popup, infobar и т.д.), вы можете использовать относительные пути со слэшем (/):
background-image:url("/sprites.png");
Вышеприведенное должно работать, каждый использует его. Но если вы используете его для сценариев контента, и вы можете сделать то же самое для любого css, вам нужно будет использовать предопределенное сообщение например:
background-image:url('chrome-extension://[email protected]@extension_id__/sprites.png');
Если вы хотите программно установить его, вы можете использовать синтаксис chrome.extension.getURL следующим образом:
var url = chrome.extension.getURL('sprites.png');
Это способы, которыми вы можете ссылаться на определенный URL-адрес/изображение.
Кроме того, как упомянутого в этом ответе, если вы поместите свои изображения в каталог, эти файлы не будут доступны на веб-странице DOM автоматически. Разработчик должен указать ресурсы, которые могут быть загружены с помощью параметра "web_accessible_resources" в файле manifest.json:
Ответ @mohamed работал у меня, но мне потребовалось некоторое время, чтобы собрать все это вместе. Я ответил на это иначе, но вот решение, которое сработало для меня.
Мое решение.
С помощью Menifest v2 вам нужно добавить web_accessible_resources в файл, а затем использовать chrome-extension://[email protected]@extension_id__/images/pattern.png в качестве URL-адреса в файле css.
CSS
#selector {
background: #fff url('chrome-extension://[email protected]@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"
]
}
p.s. Ваш manifest.json может отличаться от этого.
В некоторых случаях вы даже можете использовать встроенную кодировку base64 изображения. Например,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />
То же самое можно применить к CSS. Вы можете найти кодеры изображений по всему Интернету.