Làm cách nào để xóa tệp CSS được chèn?

Question

Tôi sử dụng chrome.tabs.insertCSS(null, {file: "style.css"}); để chèn tệp css vào trang và nó hoạt động tốt.

• Nhưng có cách nào để xóa tệp không?
• Ngoài ra, nếu tôi tiêm một tệp khác có tên style.css, nó có ghi đè lên tệp đầu tiên không?
• Và nhân tiện, tôi có thể xem các tệp CSS được chèn ở đâu? Có thể xem tập lệnh trong "Tập lệnh/Nội dung" (của các công cụ dành cho nhà phát triển Chrome) nhưng tôi không thể tìm thấy tệp CSS.

Answer 1

Tôi không chắc ngữ cảnh của câu hỏi này là gì, nhưng có vẻ như bạn muốn làm nổi bật các yếu tố cụ thể của trang theo một cách nhất định và có thể chuyển đổi đánh dấu tùy chỉnh đó. (Chứ không phải là yếu tố phong cách mở rộng của bạn sẽ tạo ra)

Vì bạn không thể thực sự loại bỏ các tập tin CSS hay chỉ xóa nó bằng cách thêm một tập tin có cùng tên, tôi đề nghị như sau:

• quấn của bạn phong cách tùy chỉnh trong một số thứ như body.JMaylinCustomStyles
• sử dụng JavaScript để thêm hoặc xóa lớp JMaylinCustomStyles thành phần body.
• không có bước 3.

Những lợi ích mà nó không thêm nhiều việc trên những gì bạn có, mà bạn không cần phải tìm ra cách để ghi đè lên phong cách tùy chỉnh của bạn trong một stylesheet thứ hai (nó luôn luôn rất khó chịu và dễ bị lỗi) và bạn thậm chí có được một chút trong CSS specificity để kiểu của bạn có nhiều khả năng được áp dụng.

Lưu ý rằng cách tốt nhất để "bọc" kiểu của bạn là sử dụng Sass hoặc LESS vì bạn có thể chỉ cần thêm body.JMaylinCustomStyles { ở đầu tệp và } ở dưới cùng.

Answer 2

Không có API để loại bỏ các tập tin CSS https://developer.chrome.com/extensions/tabs.html

Tốt nhất có lẽ sẽ chèn một tập tin đó sẽ thay thế tất cả các thiết lập CSS của bạn từ các tập tin đầu tiên bạn chèn vào.

Answer 3

Tôi vừa mới đưa ra cùng một vấn đề và nghĩ rằng tôi sẽ chia sẻ giải pháp của mình. Tôi gọi một kịch bản nội dung mà sau đó sẽ được tải hoặc dỡ bỏ các css như sau:

function loadCSS(file) { 
    var link = document.createElement("link"); 
    link.href = chrome.extension.getURL(file + '.css'); 
    link.id = file; 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    document.getElementsByTagName("head")[0].appendChild(link); 
} 

function unloadCSS(file) { 
    var cssNode = document.getElementById(file); 
    cssNode && cssNode.parentNode.removeChild(cssNode); 
} 

Logic mà những gọi cũng là trong kịch bản nội dung, dựa trên dữ liệu trong chrome.storage. Vì vậy, tất cả những gì bạn cần làm là tiêm tập lệnh và nó sẽ thêm/xóa css.

Trường hợp của tôi thực sự phức tạp hơn một chút vì vậy tôi luôn tải tập lệnh nội dung và gửi một tin nhắn tới tập lệnh đó để tải hoặc dỡ tải css. Nhưng điều này có chi phí tải các tập tin trên mỗi tải trang.