Розширення 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"

Можна використовувати

"images / *"

Тільки для уточнення, згідно з документацією , кожен файл у розширенні також доступний за абсолютною URL-адресою, як це:

chrome-extension: // <extensionID>/<pathToFile>

Зверніть увагу, що <extensionID>це унікальний ідентифікатор, який система розширення генерує для кожного розширення. Ви можете побачити ідентифікатори всіх своїх завантажених розширень, перейшовши до URL-адреси chrome: // extensions . The<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>')");