Ekstensi Google Chrome - Tidak dapat memuat gambar lokal dengan CSS


99

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.


2
Mengapa ekstensi berpikir bahwa url ('image.jpg') adalah lokal? Tidakkah Anda membutuhkan jalur lengkap?
Traingamer

Jawaban:


70

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;

7
@Salem Karena jika tidak, Anda perlu melakukan hardcode id ekstensi Anda di css.
serg

Bukan untuk menjadi bodoh, tapi mengapa itu menjadi masalah?
Salem

4
@Salem Akan merepotkan untuk mengembangkan sebagai id ekstensi yang belum dikemas dan diunggah ke galeri yang memiliki id yang berbeda. Ini bukan akhir dari dunia, hanya ketidaknyamanan dan praktik yang buruk, seperti hardcode jalur file absolut dalam kode misalnya.
serg

Ah, masuk akal. Saya menghargainya.
Salem

Karena ini adalah jawaban yang diterima, Anda akan melihat komentar di jawaban lain di mana ariera menyebutkan tentang menyertakan web_accessible_resources dalam file manifes Anda untuk mengakses font dan gambar lokal.
Arya Firouzian

254

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');

4
Bagus. Ini adalah solusi hebat dan memang berfungsi untuk ekstensi yang tidak dikemas dan dikemas - terima kasih telah membagikan tip yang sangat bagus.
Richard Hollis

41
Terima kasih, inilah yang saya cari. Sekadar catatan kaki: ingat bahwa Anda perlu mendeklarasikan aset Anda sebagai web_accessible_resources di file manifes Anda (seperti dijelaskan di sini: code.google.com/chrome/extensions/… ). Jika tidak, mereka tidak akan dimuat
ariera

2
Satu hal yang saya sadari! Jangan pernah berpikir jawaban yang diterima adalah satu-satunya solusi yang tepat untuk pertanyaan itu! Saya takut saya harus melakukan hardcode ketika saya melihat jawaban yang diterima tetapi setelah melihat Anda menjawab saya berkata pada diri saya sendiri bahwa orang ini menyelamatkan hari saya !! ;-)
Rafique Mohammed

Ini hampir selalu merupakan cara yang lebih baik untuk melakukannya. CSS murni vs. menggabungkan Javascirpt dan CSS bersama dalam jawaban @serg. Ini harus menjadi jawaban yang diterima menurut saya.
Jeremy Zerr

Tautan @ ariera ada di sini sekarang: developer.chrome.com/extensions/manifest/…
Ben

42

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.


22

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.


1
Saya lebih suka opsi ini. Saya tidak setuju bahwa Google benar dalam menyarankan menyuntikkan semua gambar melalui pendekatan yang disebutkan di atas. Pendekatan base64 juga lebih cepat. +1 !!!
Skone

20

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.


9

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");
}

7

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/*"


4

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>')");

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.