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

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

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

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

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

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;

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

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

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

По состоянию на август 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 с использованием изначально поддерживаемых методов.

Один из вариантов - преобразовать ваше изображение в 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'); 
 }

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 может отличаться от этого.

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

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

@extensionId : ~"__MSG_@@extension_id__";

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

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

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

"images / pattern.png"

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

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

Чтобы уточнить, согласно документации , каждый файл в расширении также доступен по абсолютному 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>')");