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

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

在 Chrome 擴充功能中，修改網站元素通常涉及透過內容腳本功能使用 CSS。然而，使用 CSS 載入本機圖像可能具有挑戰性。本文透過具體範例和解決方案解決了這個問題。

問題：載入本機圖片失敗

嘗試使用 CSS 設定背景圖片，但本機圖片不顯示時出現此問題。儘管圖像被打包在擴充功能中，但還是出現這種情況。

解決方案：Chrome 擴充功能 i18n 支援

Chrome 的 i18n 支援提供了一種在 CSS 中引用擴充功能本機檔案的方法。要實現此目的：

1. 將影像保留在資料夾中：將影像儲存在擴充功能內的專用資料夾中。
2. 使用chrome-extension 協定: 使用下列格式在CSS 中引用影像：

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

1. 包含在清單中： 確保您要使用的圖像列在manifest.json 檔案的web_accessible_resources 部分。

使用此方法，Chrome 可以從擴充功能中正確載入本機圖片作為背景圖片或其他 CSS 屬性。

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