clash bootstrap css twitter trong khi trong phần mở rộng chrome

Question

Tôi đang sử dụng bootstrap cho tiện ích mở rộng chrome mà tôi đang viết. Khi nhập khẩu như là kịch bản nội dung css dường như đụng độ với rất nhiều các trang web tôi đang xem (ngay cả trong trang kết quả tìm kiếm google).

Tự hỏi liệu có bất kỳ điều gì tôi có thể làm để điều chỉnh phạm vi này chỉ với các phần tử dom mà tôi sử dụng tập lệnh nội dung không?

Answer 1

Giải pháp là sử dụng <style scoped>.

Về cơ bản, nó cho phép bạn áp dụng kiểu cho nút DOM và con của nó, nhưng không áp dụng cho nút cha. Có một bài viết hay về số CSS-Tricks giải thích cách sử dụng nó.

Vấn đề là nó không được hỗ trợ rất tốt, ngay cả trong Chrome, vì vậy bạn sẽ phải sử dụng một vùng ghép jQuery. Về cơ bản, đây là một plugin jQuery mô phỏng chức năng bạn mong đợi từ <style scoped>.

Đây là cách làm việc JSFiddle làm chính xác việc sử dụng Bootstrap.

Dưới đây là một ví dụ về cách bạn có thể thực hiện nó trong phần mở rộng của bạn:

content_script.js:

$.scoped(); // Initialize the plugin 
... 
bootstrapped = document.createElement("div"); 
bootstrapped.innerHTML = "<style scoped>"; 
bootstrapped.innerHTML += "@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');"; 
bootstrapped.innerHTML += "</style>"; 
document.body.appendChild(bootstrapped);  
... 
document.body.appendChild(myDOM); // Will not possess Bootstrap styles 
bootstrapped.appendChild(myDOM); // Will possess Bootstrap styles 

Còn bây giờ, hãy chắc chắn để bao gồm jQuery trong trang của bạn, cũng như Plugin Scoped:

"content_scripts": [ { 
    "js": [ "jquery.min.js", "jquery.scoped.min.js", "content_script.js" ], 
    "matches": [ "http://*" ] 
}]