Cách chèn CSS bằng tệp tập lệnh nội dung trong tiện ích của Chrome?

Question

Tôi đang cố gắng để tiêm CSS của tôi từ JavaScript được tiêm như kịch bản nội dung:

"content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "js": ["script.js"] 
    } 
], 

tôi thấy similar question về tiêm CSS, nhưng tôi gặp phải một vấn đề khi sử dụng mã từ accepted answer. Dưới đây là nội dung script.js tôi:

var link = document.createElement("link"); 
link.href = chrome.extension.getURL("style.css"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
document.getElementsByTagName("head")[0].appendChild(link); 

Sau khi tôi tải một số trang báo này xuất hiện trong giao diện điều khiển:

chối tải của chrome-mở rộng: //phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Tài nguyên phải được liệt kê trong khóa biểu trưng web_accessible_resources theo thứ tự để được các trang bên ngoài tiện ích tải.

Có cách nào để sửa lỗi này không? Hoặc, có thể, một số cách khác để tiêm CSS từ tệp JavaScript đó?

Lưu ý: Tôi không thể bao gồm biểu định kiểu trực tiếp từ tệp kê khai.

Answer 1

Bạn có thể thêm vào trường quyền của tệp kê khai; Xem web_accessible_resources. Vì vậy, bạn sẽ thêm video này vào manifest:

, "web_accessible_resources": [ 
     "fix.css" 
    ] 

---

Xem thêm "Programmatic injection". và insertCSS().

Đối với hầu hết các ứng dụng, hãy quên đi tất cả những gì createElement mã và chỉ cần thêm các tập tin CSS để manifest:

"content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css":  ["fix.css"], 
     "js":   ["script.js"] 
    } 
], 

mặc dù tôi hiểu rằng bạn không muốn làm điều đó trong trường hợp này chính xác.