Google Chrome Uzantıları - CSS ile yerel resimler yüklenemiyor

Bir web sitesini değiştirmek için içerik komut dosyası özelliğini kullanan basit bir Chrome uzantım var. Daha spesifik olarak, background-imagesöz konusu web sitesinin.

Bazı nedenlerden dolayı, uzantı içinde paketlenmiş olsalar bile yerel resimleri kullanamıyorum.

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

İşte bu, en basit CSS ... ama işe yaramayacak. Tarayıcı resmi yüklemiyor.

Görsel URL'niz şöyle görünmelidir chrome-extension://<EXTENSION_ID>/image.jpg

CSS'yi javascript ile değiştirseniz daha iyi olur. Gönderen docs :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Chrome, CSS'nizde uzantınıza başvurma yeteneği sağlayan i18n desteğine sahiptir . Resimlerimi uzantıdaki bir resim klasöründe tutuyorum, bu nedenle CSS'deki referans varlıkları şöyle:

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

Bu soruya birçok eski cevap ve çözüm var.

Ağustos 2015 itibarıyla (Chrome 45 ve Manifest sürüm 2 kullanılarak), Chrome Uzantıları içindeki yerel görüntülere bağlanmak için mevcut "en iyi uygulama" aşağıdaki yaklaşımdır.

1) Uzantınızın resimler klasörüne göreli bir yol kullanarak CSS'nizdeki varlığa bağlantı verin:

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) Bağımsız varlığı , uzantınızın manifest.json dosyasının web_accessible_resources bölümüne ekleyin :

"web_accessible_resources": [
  "images/file.png"
]

Not: Bu yöntem birkaç dosya için uygundur, ancak birçok dosyada iyi ölçeklenemez.

Bunun yerine, belirli bir dizindeki tüm dosyaları beyaz listeye eklemek için Chrome'un eşleşme modelleri desteğinden yararlanmak daha iyi bir yöntemdir :

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

Bu yaklaşımı kullanmak, yerel olarak desteklenen yöntemleri kullanarak Chrome Uzantınızın CSS dosyasındaki resimleri hızlı ve zahmetsizce kullanmanıza olanak tanır.

Bir seçenek , görüntünüzü base64'e dönüştürmek olabilir :

ve sonra verileri aşağıdaki gibi doğrudan css'nize yerleştirin:

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

Bu , düzenli olarak bir web sayfası geliştirirken kullanmak isteyeceğiniz bir yaklaşım olmasa da , bir Chrome Uzantısı oluşturmanın bazı kısıtlamaları nedeniyle harika bir seçenektir.

Çözümüm.

Menifest v2 ile dosyaya eklemeniz web_accessible_resourcesve ardından chrome-extension://__MSG_@@extension_id__/images/pattern.pngcss dosyanızda url olarak kullanmanız gerekir.

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 dosyanız bundan farklı görünebilir.

Bu CSS sürümü yalnızca uzantı ortamında (uygulama sayfası, açılır sayfa, arka plan sayfası, seçenek sayfası) ve content_scripts CSS dosyasında çalışır.

.Less dosyasında, her zaman başında bir değişken belirlerim:

@extensionId : ~"__MSG_@@extension_id__";

Daha sonra, görüntüler gibi uzantı-yerel-kaynağa başvurmak isterseniz, şunu kullanın:

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

Bahsedilmesi gereken bir şey, web_accessible_resources içinde joker karakterler kullanabileceğinizdir. Yani yerine

"images / pattern.png"

Kullanabilirsiniz

"Görüntüler/*"

Açıklamak gerekirse, belgelere göre , bir uzantıdaki her dosyaya şunun gibi mutlak bir URL ile de erişilebilir:

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

Not <extensionID>uzatma sistemi her uzantı için oluşturduğu benzersiz bir tanımlayıcı. Chrome: // uzantıları URL'sine giderek yüklenen tüm uzantılarınızın kimliklerini görebilirsiniz . <pathToFile>Uzantının üst klasörü altında dosyanın konumudur; göreli URL ile aynıdır.

...

CSS'de arka plan resmini değiştirme:

#id{arka plan resmi: url (" chrome-extension://<extensionID>/<pathToFile>"); }

CSS'de arka plan resmini JavaScript aracılığıyla değiştirme:

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: // <extensionID>/ <pathToFile>')");

CSS'de arka plan resmini jQuery aracılığıyla değiştirme:

$ (" #id") .css ("arka plan resmi", "url ('chrome-extension: // <extensionID>/ <pathToFile>')");