Относительный путь расширения Google Chrome - PullRequest
Новая
       6

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

24 голосов
/ 18 октября 2010

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

Есть идеи?

Ответы [ 3 ]

69 голосов
/ 19 октября 2010

Если вы используете CSS на своих страницах расширения (фон, всплывающее окно, информационная панель и т. Д.), То вы можете использовать относительные пути с косой чертой (/): 

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

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

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

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

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

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

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

8 голосов
/ 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"
     ]
}

p.s. Ваш manifest.json может выглядеть иначе, чем этот.

1 голос
/ 20 января 2017

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

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

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

...