Относительный путь расширения Google Chrome

Я разрабатываю расширение chrome для google, и я сталкиваюсь с проблемой относительного пути. Если я дам относительный путь к изображению и открою плагин на определенной странице, он будет искать это изображение на пути к веб-сайту, а не в расширении.

Любые идеи?

Ответы

Ответ 1

Если вы используете CSS на своих страницах расширения (background, popup, infobar и т.д.), вы можете использовать относительные пути со слэшем (/):

background-image:url("/sprites.png");

Вышеприведенное должно работать, каждый использует его. Но если вы используете его для сценариев контента, и вы можете сделать то же самое для любого css, вам нужно будет использовать предопределенное сообщение например:

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

Если вы хотите программно установить его, вы можете использовать синтаксис chrome.extension.getURL следующим образом:

var url = chrome.extension.getURL('sprites.png');

Это способы, которыми вы можете ссылаться на определенный URL-адрес/изображение.

Кроме того, как упомянутого в этом ответе, если вы поместите свои изображения в каталог, эти файлы не будут доступны на веб-странице DOM автоматически. Разработчик должен указать ресурсы, которые могут быть загружены с помощью параметра "web_accessible_resources" в файле manifest.json:

Ответ 2

Ответ @mohamed работал у меня, но мне потребовалось некоторое время, чтобы собрать все это вместе. Я ответил на это иначе, но вот решение, которое сработало для меня.

Мое решение.

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

Ответ 3

В некоторых случаях вы даже можете использовать встроенную кодировку base64 изображения. Например,

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />

То же самое можно применить к CSS. Вы можете найти кодеры изображений по всему Интернету.