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

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

88 голосов
/ 24 августа 2010

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

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

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

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

Ответы [ 8 ]

234 голосов
/ 14 января 2012

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

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');
60 голосов
/ 24 августа 2010

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;
29 голосов
/ 21 августа 2015

На этот вопрос существует множество более старых ответов и решений.

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

19 голосов
/ 05 февраля 2011

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

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

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

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

18 голосов
/ 20 февраля 2013

Мое решение.

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

7 голосов
/ 08 сентября 2014

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

"images / pattern.png"

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

"images / *"

7 голосов
/ 14 декабря 2011

Эта CSS-версия работает только в среде расширения (страница приложения, всплывающая страница, фоновая страница, страница параметров) , а также CSS_файл_скрипта_ контента. В файле .less я всегда устанавливаю переменную в начале: 

@extensionId : ~"__MSG_@@extension_id__";

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

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}
3 голосов
/ 08 марта 2017

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

chrome-extension: // <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 ('chrome-extension: // <extensionID> / <pathToFile>') ");

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

$ ("#id"). Css ("background-image", "url ('chrome-extension: // <extensionID> / * 1045)* ') ");

...