在Chrome扩展中，twitter引导程序css发生冲突 [英] twitter bootstrap css clashes while in chrome extensions

问题描述

我正在使用bootstrap来创建我正在写的Chrome扩展。当作为内容脚本导入时，CSS似乎与我正在查看的许多网站发生冲突（即使在谷歌搜索结果页面中）。

想知道是否有任何我可以做的事使用内容脚本注入dom元素的范围？解决方案

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

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

问题在于，即使在Chrome中，它的支持也不是很好，因此您必须使用jQuery填充。这基本上是一个jQuery插件，它模拟了你期望从< style scoped> 的功能。

一个正在工作的 JSFiddle 正在使用Bootstrap。

下面是一个示例您可以在您的扩展程序中实现它：

content_script.js ：

  $作用域（）; //初始化插件
 ... 
 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）; //不会拥有Bootstrap样式
 bootstrapped.appendChild（myDOM）; //将拥有引导样式
  

现在，请确保在您的页面中包含jQuery，以及范围插件：

 content_scripts：[{
js：[jquery.min.js ，jquery.scoped.min.js，content_script.js]，
matches：[http：// *] 
}] 
  

I am using bootstrap for a chrome extension I am writing. When imported as content script the css seem to clash with alot of the sites I am viewing (even in google search result page).

Wondering if there is anything i can do to scope this to just the dom elements I inject using content script?

解决方案

The solution is to use <style scoped>.

Essentially it allows you to apply a style to a DOM node and its children, but not its parent nodes. There's a nice article on CSS-Tricks explaining how to use it.

The problem is that it's not very well supported, even in Chrome, so you'll have to use a jQuery polyfill. This is basically a jQuery plugin that simulates the functionality you'd expect from <style scoped>.

Here's a working JSFiddle doing exactly that using Bootstrap.

Here's an example of how you could implement it in your extension:

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

For now, make sure to include jQuery in your page, as well as the Scoped Plugin:

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

这篇关于在Chrome扩展中，twitter引导程序css发生冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！