首頁 >web前端 >css教學 >如何在Chrome擴充功能中使用CSS載入本機圖片?

如何在Chrome擴充功能中使用CSS載入本機圖片?

DDD
DDD原創
2024-11-10 07:13:02344瀏覽

How to Load Local Images with CSS in Chrome Extensions?

無法在Google Chrome 擴充功能中使用CSS 載入本機圖片

對於透過Chrome 擴充功能中的內容腳本進行網站修改,請嘗試時可能會出現困難利用本地影像。儘管將圖像合併到擴展中,此問題仍然存在。

挑戰源自於用於引用本地影像的特定CSS 語法:

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

解決方案

為了解決此限制,Chrome i18n 支援提供了一個關鍵的解決方案:

  • 將映像維護在擴充功能內指定的「映像」資料夾中。
  • CSS 中的參考資源使用以下語法:
background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

確保圖像包含在manifest.json 檔案的「web_accessible_resources」數組中,該數組授予從擴充程式存取這些資源的權限。

以上是如何在Chrome擴充功能中使用CSS載入本機圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn