如何在Chrome扩展内容脚本中确定CSS的范围

Question

我正在开发一个将按钮注入页面的chrome扩展。点击此按钮后，它将启动一个twitter引导模式。但是，使用twitter引导注入的css会影响页面本身，我只希望它们影响模态div。我怎样才能做到这一点？

谢谢！

Answer 1

只有一种正确的方法来做到这一点，它涉及较少

看到这个答案：https://stackoverflow.com/a/14145510/1060487

或者这一个：https://stackoverflow.com/a/15115171/1060487

这两种方法都应该能正常运行。

我已经尝试了其他1个解决方法：

http://css-tricks.com/saving-the-day-with-scoped-css/

不Chrome浏览器的工作，但有一个polyfill here，它并没有真正似乎工作那么好......

检查这里的支持：http://caniuse.com/style-scoped

摘要：少路线似乎是最好的解决办法现在...

Answer 2

我最近创建了Boundary，一个CSS + JS库来解决这样的问题。边界创建与现有网页的CSS完全分离的元素。

以创建一个对话框为例。安装分界后，您可以在您的内容脚本中#yourDialogID

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName"); 

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css"); 

Boundary.appendToBox(
    "#yourDialogID", 
    "<button id='submit_button'>submit</button>" 
); 

Boundary.find("#submit_button").click(function() { 
    // find() function returns a regular jQuery DOM element 
    // so you can do whatever you want with it. 
    // some js after button is clicked. 
}); 

元素不会被现有的网页受到影响做到这一点。

希望这会有所帮助。如果您有任何问题，请告诉我。

https://github.com/liviavinci/Boundary