Расширение Chrome: как передать в контент background-image?

220
07 апреля 2018, 19:04

Пишу расширение для хрома. Одна из задач - добавлять на страницу дополнительные элементы-ссылки, выглядящие определенным образом. Все работает, элементы добавляются, css-классы им проставляются и задаваемые в css-файле расширения стили применяются. Но есть одна проблема: применяются все стили, кроме background-image. Если урл картинки прописать просто в виде файла, то браузер пытается ее найти на том сервере, где находится страница, и, естественно, обламывается.

CSS:

.newLink {    
  background-image:url('linkmarker.png');
}

manifest.json:

 {
  "manifest_version": 2,
  "name": "Linker",
  "description": "Adds links",
  "version": "1.0",
  "author": "me",
  "icons": {
    "48":"icon48.png",
    "128":"icon128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "link add"
  },
  "options_page": "options.html",
  "permissions": [
    "activeTab", "storage"
  ],
  "content_scripts": [{
    "matches": [ "http://*/*", "https://*/*" ],
    "css": ["linker.css"],
    "js": ["linker.js"]
  }]
}

файл linkmarker.png лежит просто в папке с файлами расширения. Что и куда надо прописать (и можно ли)?

Можно, конечно, добавить картинку прямо в css в base64, но менять ее будет неудобно.

UPD: нашел вариант решения:

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

Но тут вообще какая-то магия случается: в веб-инспекторе в стилях добавленных ссылок свойство background-image имеет валидное значение chrome-extension://afakgdclnlkjabakhoccgpgfhldhcddb/linkmarker.png и при попытке открыть фоновую картинку в новой вкладке ее честно показывает, но сами ссылки на странице все равно остаются без фона, а в консоли лежит вот такая ошибка:

GET chrome-extension://invalid/ net::ERR_FAILED

Куда дальше копать?

READ ALSO
Как изменить размер clip-path SVG?

Как изменить размер clip-path SVG?

Я использую SVG в качестве маски для изображения, и пытаюсь изменить размер изображения

272
Заполнение контентом

Заполнение контентом

Допустим есть 9 Div-овКак сделать чтоб они расположились друг за другом рядами по выделенному им пространству заполняя его полностью?

192
Скролл замирает на форме ( iPhone)

Скролл замирает на форме ( iPhone)

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

177
Позиционирование сетки по центру

Позиционирование сетки по центру

Ребятпочему сетка бустрап позиционируется не по центру? Проблема с 126 строки

311