Ekstensi Google Chrome - Tidak dapat memuat gambar lokal dengan CSS

Saya memiliki ekstensi Chrome sederhana yang menggunakan fitur skrip konten untuk memodifikasi situs web. Lebih khusus lagi, background-imagesitus web tersebut.

Untuk beberapa alasan saya sepertinya tidak dapat menggunakan gambar lokal, meskipun mereka dikemas dalam ekstensi.

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

Itu saja, CSS paling sederhana ... tetapi tidak akan berhasil. Browser tidak memuat gambar.

URL gambar Anda akan terlihat seperti ini chrome-extension://<EXTENSION_ID>/image.jpg

Anda akan lebih baik mengganti css melalui javascript. Dari dokumen :

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

Chrome memiliki dukungan i18n yang memberikan kemampuan untuk mereferensikan ekstensi Anda di CSS Anda. Saya menyimpan gambar saya dalam folder gambar di ekstensi, jadi referensi aset di CSS seperti:

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

Ada banyak jawaban dan solusi lama untuk pertanyaan ini.

Mulai Agustus 2015 (menggunakan Chrome 45 dan Manifes versi 2), "praktik terbaik" saat ini untuk menautkan ke gambar lokal dalam Ekstensi Chrome adalah pendekatan berikut.

1) Tautkan ke aset di CSS Anda menggunakan jalur relatif ke folder gambar ekstensi Anda:

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

2) Tambahkan aset individu ke bagian web_accessible_resources dari file manifest.json ekstensi Anda :

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

Catatan: Metode ini cocok untuk beberapa file, tetapi tidak dapat diskalakan dengan baik dengan banyak file.

Sebaliknya, metode yang lebih baik adalah memanfaatkan dukungan Chrome untuk pola kecocokan guna memasukkan semua file ke dalam daftar putih dalam direktori tertentu:

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

Menggunakan pendekatan ini akan memungkinkan Anda dengan cepat dan mudah menggunakan gambar di file CSS Ekstensi Chrome Anda menggunakan metode yang didukung secara native.

Salah satu opsinya adalah mengonversi gambar Anda ke base64:

lalu masukkan datanya langsung ke css Anda seperti:

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

Meskipun ini mungkin bukan pendekatan yang ingin Anda gunakan saat mengembangkan laman web secara teratur , ini adalah opsi yang bagus karena beberapa kendala dalam membangun Ekstensi Chrome.

Solusi saya.

Dengan Menifest v2 Anda perlu menambahkan web_accessible_resourcesfile dan kemudian menggunakannya chrome-extension://__MSG_@@extension_id__/images/pattern.pngsebagai url di file css Anda.

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 Anda mungkin terlihat berbeda dengan yang ini.

Hanya-versi-CSS ini bekerja di lingkungan ekstensi (halaman aplikasi, halaman popup, halaman latar belakang, halaman opsi) serta file CSS content_scripts.

Dalam file .less, saya selalu menetapkan variabel di awal:

@extensionId : ~"__MSG_@@extension_id__";

Kemudian, jika Anda ingin merujuk ke gambar ekstensi-sumber-lokal-seperti, gunakan:

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

Satu hal yang perlu disebutkan adalah bahwa di web_accessible_resources Anda dapat menggunakan karakter pengganti. Jadi, bukan

"gambar / pola.png"

Kamu bisa memakai

"gambar-gambar/*"

Sekadar klarifikasi, menurut dokumentasi , setiap file dalam ekstensi juga dapat diakses dengan URL absolut seperti ini:

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

Perhatikan bahwa <extensionID>ini adalah pengenal unik yang dihasilkan oleh sistem ekstensi untuk setiap ekstensi. Anda dapat melihat ID untuk semua ekstensi yang Anda muat dengan membuka URL chrome: // extensions . Ini <pathToFile>adalah lokasi file di bawah folder teratas ekstensi; itu sama dengan URL relatif.

...

Mengubah gambar latar belakang di CSS:

#id{background-image: url (" chrome-extension://<extensionID>/<pathToFile>"); }

Mengubah gambar latar belakang di CSS melalui JavaScript:

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

Mengubah gambar latar belakang di CSS melalui jQuery:

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