Tiện ích mở rộng của Google Chrome - Không thể tải hình ảnh cục bộ bằng CSS

Tôi có một tiện ích mở rộng Chrome đơn giản sử dụng tính năng tập lệnh nội dung để sửa đổi trang web. Cụ thể hơn, background-imagetrang web nói trên.

Vì một số lý do, tôi dường như không thể sử dụng hình ảnh cục bộ, mặc dù chúng được đóng gói trong tiện ích mở rộng.

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

Vậy đó, CSS đơn giản nhất ... nhưng nó sẽ không hoạt động. Trình duyệt không tải hình ảnh.

URL hình ảnh của bạn sẽ giống như chrome-extension://<EXTENSION_ID>/image.jpg

Bạn sẽ tốt hơn nếu thay thế css thông qua javascript. Từ tài liệu :

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

Chrome có hỗ trợ i18n cung cấp khả năng tham chiếu đến tiện ích mở rộng trong CSS của bạn. Tôi giữ hình ảnh của mình trong thư mục hình ảnh trong tiện ích mở rộng, vì vậy, hãy tham chiếu các nội dung trong CSS như sau:

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

Có rất nhiều câu trả lời cũ và giải pháp cho câu hỏi này.

Kể từ tháng 8 năm 2015 (sử dụng Chrome 45 và Manifest phiên bản 2), "phương pháp hay nhất" hiện tại để liên kết với hình ảnh cục bộ trong Tiện ích mở rộng của Chrome là phương pháp sau.

1) Liên kết đến nội dung trong CSS của bạn bằng cách sử dụng một đường dẫn tương đối đến thư mục hình ảnh của tiện ích mở rộng:

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

2) Thêm nội dung riêng lẻ vào phần web_accessible_resources của tệp manifest.json của tiện ích mở rộng của bạn :

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

Lưu ý: Phương pháp này phù hợp với một số tệp, nhưng không mở rộng quy mô tốt với nhiều tệp.

Thay vào đó, một phương pháp tốt hơn là tận dụng hỗ trợ của Chrome cho các mẫu đối sánh để đưa tất cả các tệp vào danh sách trắng trong một thư mục nhất định:

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

Sử dụng phương pháp này sẽ cho phép bạn sử dụng nhanh chóng và dễ dàng hình ảnh trong tệp CSS của Tiện ích mở rộng Chrome bằng các phương pháp được hỗ trợ nguyên bản.

Một tùy chọn sẽ là chuyển đổi hình ảnh của bạn thành base64:

và sau đó đưa dữ liệu vào ngay css của bạn như:

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

Mặc dù đây có thể không phải là cách bạn muốn sử dụng khi thường xuyên phát triển trang web , nhưng đây là một lựa chọn tuyệt vời do một số hạn chế của việc xây dựng Tiện ích mở rộng Chrome.

Giải pháp của tôi.

Với Menifest v2, bạn cần thêm web_accessible_resourcesvào tệp và sau đó sử dụng chrome-extension://__MSG_@@extension_id__/images/pattern.pnglàm url trong tệp css của mình.

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 Tệp kê khai.json của bạn có thể trông khác với tệp này.

Phiên bản CSS này chỉ hoạt động trong môi trường tiện ích mở rộng (trang ứng dụng, trang bật lên, trang nền, trang tùy chọn) cũng như tệp CSS content_scripts.

Trong tệp .less, tôi luôn đặt một biến ở đầu:

@extensionId : ~"__MSG_@@extension_id__";

Sau đó, nếu bạn muốn tham chiếu đến phần mở rộng-tài nguyên cục bộ như hình ảnh, hãy sử dụng:

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

Một điều cần đề cập là trong web_accessible_resources, bạn có thể sử dụng các ký tự đại diện. Vì vậy, thay vì

"images / pattern.png"

Bạn có thể dùng

"hình ảnh / *"

Chỉ cần làm rõ, theo tài liệu , mọi tệp trong phần mở rộng cũng có thể truy cập được bằng một URL tuyệt đối như sau:

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

Lưu ý rằng đây <extensionID>là một số nhận dạng duy nhất mà hệ thống tiện ích mở rộng tạo ra cho mỗi tiện ích mở rộng. Bạn có thể xem ID cho tất cả các tiện ích mở rộng đã tải của mình bằng cách truy cập URL chrome: // extensions . Đây <pathToFile>là vị trí của tệp trong thư mục trên cùng của tiện ích mở rộng; nó giống như URL tương đối.

...

Thay đổi hình nền trong CSS:

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

Thay đổi hình nền trong CSS thông qua JavaScript:

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

Thay đổi hình nền trong CSS thông qua jQuery:

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