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

Ответ 1

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;

Ответ 2

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

background-image:url('chrome-extension://[email protected]@extension_id__/images/main.png');

Ответ 3

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

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

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

.selector {
    background: url('chrome-extension://[email protected]@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 с помощью поддерживаемых методов.

Ответ 4

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

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

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

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

Ответ 5

Мое решение.

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

Ответ 6

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

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

@extensionId : ~"[email protected]@extension_id__";

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

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

Ответ 7

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

"изображения/pattern.png"

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

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

Ответ 8

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

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

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

...

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

#id {background-image: URL ( "chrome-extension://<extensionID> /<pathToFile> " ); }

Изменение фонового изображения в CSS с помощью JavaScript:

document.getElementById('id'). style.backgroundImage = "URL ( 'хром-расширение:// <extensionID>/<pathToFile>')" );

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

$( "#id" ). CSS ( "фоновое изображение", "URL ( 'хром-расширение:// <extensionID>/<pathToFile>')" );

Ответ 9

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

Существует несколько способов запуска веб-сервера:

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

• Если у вас есть python, запустите встроенную http server в выбранной папке

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

• Используйте готовый сервер производства, например nginx, apache

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