google-chrome - 在 chrome 扩展中，twitter bootstrap css 发生冲突

Question

我正在将引导程序用于我正在编写的 chrome 扩展。当作为内容脚本导入时，css 似乎与我正在查看的许多网站发生冲突（即使在谷歌搜索结果页面中）。

想知道我是否可以做些什么来将其范围仅限于我使用内容脚本注入的 dom 元素？

Answer 1

解决方案是使用<style scoped>.

本质上，它允许您将样式应用于 DOM 节点及其子节点，但不能应用于其父节点。有一篇关于CSS-Tricks的好文章解释了如何使用它。

问题是它没有得到很好的支持，即使在 Chrome 中也是如此，所以你必须使用 jQuery polyfill。这基本上是一个 jQuery 插件，可以模拟您期望从<style scoped>.

这是一个使用 Bootstrap 完成的工作JSFiddle 。

这是一个如何在扩展中实现它的示例：

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

现在，请确保在您的页面中包含 jQuery 以及 Scoped Plugin：

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